Toptube Video Search Engine



Title:When to Use Semantic HTML Elements Instead of Divs
Duration:17:57
Viewed:38,937
Published:10-04-2021
Source:Youtube

► The word semantic can be defined as ‘relating to meaning in language or logic’ and the field of Semantics is ‘the study of meanings’. When talking about semantic HTML elements, we are simply saying that we have elements that have meaning. Semantic HTML elements make our websites much more readable and accessible, in the sense that webpages can be much more easily interpreted by screen readers that are used by those that have impaired vision. They also better describe meaning to both the browser and us as developers. Semantic HTML5 helps us keep our hundreds and thousands of lines of code organized and easier to maintain. ► Timestamps: 0:00 Start 1:14 The meaning of semantic elements 2:06 Some examples of semantic elements 2:44 Div soup 4:02 Grouping content in divs 4:54 MDN pages on semantic elements 5:52 A typical layout of a semantic web page 7:45 Using divs is ok for presentational markup 9:42 Adding semantic elements to an existing document to make it semantic 15:58 Comparing the readability of semantic & non-semantic markup 16:34 Summary ► Get the code: Repo: https://github.com/craigabourne/html-semantic-elements Divs & Spans: https://codepen.io/craigabourne/pen/JQYjeV Semantic Start: https://codepen.io/craigabourne/pen/mZeeXy Semantic Final: https://codepen.io/craigabourne/pen/XLmmZY Semantic Layout: https://codepen.io/craigabourne/pen/OeyyzN ► Links used in the video: Google Definition: https://www.google.com/search?q=semantic Dictionary semantics definition: https://www.merriam-webster.com/dictionary/semantics Div Soup Definition: https://www.hackterms.com/div%20soup MDN: https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantic_elements ► The HTML for Absolute Beginners Playlist: https://www.youtube.com/playlist?list=PL4cTxE4s2XIYJL6uPQUwMt25M70gPl-O6 ► Social Media: https://www.twitter.com/craigabourne https://www.instagram.com/craigabourne ► Code & Projects: https://github.com/craigabourne https://codepen.io/craigabourne



SHARE TO YOUR FRIENDS


Download Server 1


DOWNLOAD MP4

Download Server 2


DOWNLOAD MP4

Alternative Download :