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:

► Links used in the video:

► Social Media:

► Code & Projects:

[janelleschuh]

Thank you Craig you are helping me so much! I paid for a udemy course which has nowhere near the quality of your videos. Keep going 🔥

[macesboy]

This was so helpful, I feel like all these videos on YouTube are put out rapid-fire to try and teach you how to create a webpage, but rarely do they teach you how to properly do so.

[simonbielik]

Really appreciate the way this is narrated and also what really sets it apart from other tutorial videos is that you present a text version of the lesson, that's great!

[juanortegaa]

Man, to explain it, to make great examples, to write each resource you used on the video on youtube it is a hard work, and even more with the Big Quality and professional you did. Expecting your website with a big desire !!!

[hectorg]

Thanks for this. Learning HTML is easy, but as I got more serious into learning, I found that the meaning of a content mattered more. I used just put everything into divs. Now I'm more careful as to what I use.

[plcasiraghi]

Very clear well-made video, thank you. It deserves many more views and likes.

[InactivePhoenix]

Just a note about the Gmail example: just because you see dozens of nested divs in your browser's inspector doesn't mean that is how their actual source code is structured. In the case of Google, the site is probably composed of Angular components that are simply rendered down to HTML divs when it comes time to build and ship to production. In the actual project structure, the divs would be abstracted behind custom names that do have semantic meaning.

[henrythomas]

Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!

[georgeepohcuaw]

Very good collection of semantic elements and you explain their use and purpose in very good detail

[petradanquah]

Learned so much from this series of videos. Thank you!

[minnnjupark]

Hey mate great video, just curious in your reasoning as to why you decided to choose <article> instead of using <section> or <section> with a nested <article> for your About Me?

[jiajunsun]

Fantastic video!! Clear, clean and straight to the point, keep up the great work!

[abdpz]

Good brevity makes sense. Thank you Craig!

[tnt-dnjp]

Thank you very much for sharing the knowledge! Very explanatory video! I am 46 yo and I give a chance to myself to learn HTML.

[rafirafirafirafi]

Thank you sir thanks for your valuable information thankyou so much

[freddiekarlsson]

Thank you, this is clearer for me now!

[camionesfernandez]

Hi Craig im Alex, I just start studying Html, im 46 and i would like to understand what is git, the forks, how to use them, whats github, i asked you because its hard to move forward i guess, if you see any video of how to learn html, css, js, etc, and try to use the github as a tools to understand and practice, but you dont understand github and how to use it, and then [ you get yourself in the middle of a farm w cows, but dont know how to take the milk from this cows ] is just an example,
Probably youre very busy, but if you have time someday, ill appreciated if you have the time to make some basic videos explaining some of this staff.
And budy, thank you very much for take some of your value time to share your knowledge.

[jamesdarnel]

Time zones can't stop the understanding!

[Vikram]

Thank a ton for this great video, god bless you.

[iqgkxty]

Great explanation sir, it's really useful :)