When to Use Semantic HTML Elements Instead of Divs

► 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-...
Divs & Spans: https://codepen.io/craigabourne/pen/J...
Semantic Start: https://codepen.io/craigabourne/pen/m...
Semantic Final: https://codepen.io/craigabourne/pen/X...
Semantic Layout: https://codepen.io/craigabourne/pen/O...

► Links used in the video:
Google Definition: https://www.google.com/search?q=semantic
Dictionary semantics definition: https://www.merriam-webster.com/dicti...
Div Soup Definition: https://www.hackterms.com/div%20soup
MDN: https://developer.mozilla.org/en-US/d...

► The HTML for Absolute Beginners Playlist:    • HTML for Absolute Beginners  

► Social Media:
  / craigabourne  
  / craigabourne  

► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne