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: github.com/craigabourne/html-...
Divs & Spans: codepen.io/craigabourne/pen/J...
Semantic Start: codepen.io/craigabourne/pen/m...
Semantic Final: codepen.io/craigabourne/pen/X...
Semantic Layout: codepen.io/craigabourne/pen/O...
► Links used in the video:
Google Definition: www.google.com/search?q=semantic
Dictionary semantics definition: www.merriam-webster.com/dicti...
Div Soup Definition: www.hackterms.com/div%20soup
MDN: developer.mozilla.org/en-US/d...
► The HTML for Absolute Beginners Playlist: • HTML for Absolute Begi...
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
github.com/craigabourne
codepen.io/craigabourne

[@craigabourne]

Learn HTML: kzbin.info/aero/PL4cTxE4s2XIYJL6uPQUwMt25M70gPl-O6

[@squarerootof2]

I found this video very minimful

[@ramzyabdul185]

I was interested in checking out your HTML tutorial... Thank you for providing the link.

[@user-ze3jx9vw2i]

Simply awesome

[@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!

[@craigabourne]

Thanks, I appreciate that! Glad it was helpful. Currently (slowly) building a platform for people to learn from tryminim.com/learn

[@juanortegaa6916]

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 !!!

[@craigabourne]

Thanks! Well worth it though! Website in development now, will let you know when a sneak peak is ready

[@jiajunsun3845]

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

[@craigabourne]

Thank you! Appreciate the kind words

[@henrythomas7112]

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

[@petradanquah]

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

[@craigabourne]

Thank you! Glad they helped 👍

[@macesboy]

This was so helpful, I feel like all these videos on KZbin 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.

[@craigabourne]

Completely agree. I think a lot of detail is missing. I don't think many of the people on the bigger channels would get hired as junior developers. They just got in early and started creating content and courses

[@plcasiraghi4722]

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

[@craigabourne]

Thank you! Much appreciated! 🙏

[@janelleschuh3263]

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 🔥

[@craigabourne]

That's great to hear! Thank you I appreciate the kind words 🙏

[@coolaverage2017]

Udemy is great but research is part of learning too.

[@georgeepohcuaw2545]

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

[@craigabourne]

Thanks! Appreciate the kind words 🙏

[@abdpz]

Good brevity makes sense. Thank you Craig!

[@craigabourne]

No problem. Thanks!

[@besjanaelezi]

That was a great video, thank you so much!

[@craigabourne]

You are so welcome!

[@hectorg362]

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.

[@craigabourne]

Thanks for sharing!

[@stj8614]

Clearly explained and easy to understand thanks!

[@craigabourne]

You're welcome! Thanks for the kind words!

[@freddiekarlsson5429]

Thank you, this is clearer for me now!

[@craigabourne]

You are welcome!

[@80Vikram]

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

[@craigabourne]

You're very welcome my friend!

[@rafirafirafirafi9542]

Thank you sir thanks for your valuable information thankyou so much

[@sportshealthfitness5065]

You just made my life easier.

[@user-iq1gk7xt6y]

Great explanation sir, it's really useful :)

[@craigabourne]

Thanks! Appreciate the kind words

[@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.

[@craigabourne]

For sure. The auto generated class names give it away. You still don’t have to write your components to put out divs though, ie: @Component({ selector: 'not-loads-of-divs', template: ` Hello World! Some text ` })

[@esraamohamed5601]

Thank you for your hard work !!

[@craigabourne]

My pleasure!

[@gambo2003]

Thanks for you efforts 🎉🎊

[@craigabourne]

It's absolutely my pleasure 👍

[@tnt-dn1jp]

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.

[@craigabourne]

No, thank you! Age is just a number. 46 is young and you have all the time in the world!

[@mikeyboi5690]

Great video!

[@craigabourne]

Thanks!

[@sanyamjain4777]

Thank you learned so much

[@moet6948]

You are the best

[@craigabourne]

No, you are! Thanks Moe

[@it9hektar]

great tutorial 👍

[@craigabourne]

Thank you 👍

[@skimpylemon8034]

Thank you Craig!

[@craigabourne]

You're most welcome!

[@sajmathew8798]

Thank you, this was helpfull

[@craigabourne]

You're welcome! Glad it was helpful!

[@jovanstrickland]

Awesome bro

[@craigabourne]

Thanks 🤗

[@abubakaroyewale5657]

great stuff

[@craigabourne]

Thanks! 👍

[@minnnjupark]

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

[@TheJacklwilliams]

Glad I'm not the only one. Stuff like this always sticks in my head though taking a wild guess, and maybe you can correct me? Whether it's labeled article or section doesn't matter? Aka, we are going to style it one way or the other. I wonder if, in the case of a screen reader or SEO page crawling it will be viewed/catalogued in any different fashion?

[@jamesdarnel]

Time zones can't stop the understanding!

[@craigabourne]

Definitely not! 👍

[@ahmedakharoub6188]

جزاك الله خيرا

[@craigabourne]

You too, my friend

[@Naz-yi9bs]

Semantics FTW!!!

[@eliasbinde2629]

The gmail source code is not really just nested divs, I assume google built it in angular and there are many components that all use divs to apply their style and functionality, in the source they are perfectly readable and maintainable, just the rendered html is a div soup

[@shaiouaknine9121]

F! LOL thanks for the informative vid, it was just what I was looking for

[@craigabourne]

No problem!

[@appsenence9244]

Semantic!!

[@camionesfernandez3745]

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.

[@craigabourne]

Hi Alex! Git is kind of like a camera for code. It allows you to take a snapshot of your code at a certain point. We call those ‘commits’. If you want to go back and look at code you wrote in the past, then you can look at your commits. They help you look backwards at where errors arose at certain points of development, or how an idea was previously implemented before it was changed. If you go off track, or break something, you can return to the code from earlier on and start again from there. GitHub is a website that allows you to store the code you have ‘snapshots’ of in a repository, or a repo as it is commonly called. You can then view it all there. So if Git is the camera, the ‘commits’ are the photographs, then GitHub is the photo album. If that makes sense? A branch in git is kind of like an independent development line. You might have several developers working on one codebase. All working on different features at once. You don't want you or are doing to affect them, and vice versa. So you would work on your branch and then when ready you (or more likely, a senior developer reviews the code, and if it is ok) merge the code into the main or master branch. .. and yeah, defintely going to do some Git videos in the future. Have a bit more CSS to get through first. When I first learned Git I took this free Udacity course which might help you www.udacity.com/course/version-control-with-git--ud123 For learning HTML, CSS, & JS together, I’d start with Colt Steele’s Web Devlopment Bootcamp. It’s the best course to get going with. You can usually get it for about $10 www.udemy.com/course/the-web-developer-bootcamp/ Hope that helps!

[@TheJacklwilliams]

Alright Craig, thank you, I'm learning CSS (then js, etc...etc..etc..) working on mastery of the stack then I'll find my place in it I suppose. What I'd love to know is, why at 6:01 (roughly, not literally) our first example of a symantic page vs div hell, the entire page is wrapped, in a div? Keep in mind where I'm at with this please. Every CSS Grid course I've taken so far I realized, the entire block of content, aka the page consisted of divs with very little to NO symantics. With that in mind, why here, do we choose to wrap the page, in a div? I have to believe the choice is so that you can class that div as container and that allows top level styling of the page? I'm of course taking a wild ass guess because well, I'm new... Anyone, Craig, Anyone? lol, thanks again, enjoying this.

[@craigabourne]

Hi Jack. The main function of is simply divide content. A div is fine to use where there isn't a more suitable semantic element for the job. This is the case in this example, as we're simply creating a parent container that is holding the page’s content elements. Common practice so we can leave the element alone. The reason we create a container is so that later on we can set global layout styles that affect the whole page. Things like setting the entire page’s width, outer margins and paddings, the page’s media queries, and so on. We can even use it to set the general layout conditions for the page with flex or grid. Also, if you use an id rather than a class, you can link to it from elsewhere on the same page. You might have an internal link somewhere to ‘go back home’ that when clicked brings the user back to the top. Useful on long single pages. tldr: It sets up a container for content to which we can apply layout styles that affect the whole page. We can also use an id to define the top of the page to which users can return via a link.

[@TheJacklwilliams]

@@craigabourne Thanks so very much! Made me feel a little wiser to know I was headinng in the right direction! Also, thank you for taking the time out to provide an answer and great explanation!

[@craigabourne]

@@TheJacklwilliams No worries!

[@CiscoZero]

You, sir, are a godsend. One question: How does the aside tag automatically place the aside content within the same section of the article element?

[@CiscoZero]

Does it automatically join the element above it by design?

[@jillianpatterson2677]

Jamie, my guess is he used display:flex in his CSS to create two columns! I think the aside is just descriptive, but the tag itself doesn’t make the text go to the side. He used CSS for it!

[@tenebrae1191]

👍

[@craigabourne]

👍

[@saeidghorbani4388]

thanks

[@craigabourne]

You're most welcome

[@kishore8440]

100th like 👍

[@craigabourne]

Awesome. Thanks!

[@idioticidiot911]

Semantics

[@PhillipMHarden]

Why would the entire page ever need to be wrapped in a div.container and not just wrapped in the body.container tag alone?

[@craigabourne]

Obviously small websites can avoid doing this, but the more something grows, the better an option it is. There are a couple of main reasons. The first is that it is repeatable. A body tag can only be used once, but you could have more than one wrapper on a page if you wanted. Meaning If you wanted to repeat a wrapper structure, and retain styles you have already written, you can. If you made the body the wrapper, you lose that option. Second is that having the wrapper in the body allows us to size and position relative to the body. We could also style the two differently. ie set a black color to the body then give the content a light color so it appears as a box. You see this on blogs a lot. css-tricks.com for example. Third is accessibility. Having a wrapper allows people with say, vision deficiencies that use screen readers, to know where they are within the page structure. They can assume that a wrapper is the part of the structure that will wrap content. Fourth is web apps. Modern libraries or frameworks usually use one root div within the body to render and re-render all content to. React for example compiles JSX to HTML and displays it all inside a div with a #root id. So it showing a wrapper div is just an early stage teaching technique to prepare students for encountering such patterns later on. That there is one outer structure which holds content.

[@PhillipMHarden]

@@craigabourne 👍 awesome thanks! I have not used React yet. I am still only using html, css/scss, & JavaScript.

[@webb-developer]

☑

[@monemshahriar]

9:39 F

[@EmmanuelOloyede]

SEMANTICS

[@aravindc9232]

semantic

[@chillbro2275]

I would not want to be charged with maintaining that gmail code. 😬

[@chillbro2275]

Semantic

[@caizza3]

I think your usage of section and article is wrong. It should be reversed.

[@craigabourne]

Hi, you’re incorrect sir. I’m not a novice. I’m an experienced senior developer and everything I do on this channel is about detail and accuracy. That's the motive. I wouldn't teach it here or to developers I train in person otherwise. In fact, the primary reason I started the channel is because the likes of Traversy Media and other longstanding channels teach things that are littered with fundamental mistakes. The people running those channels aren't developers. As the primary audience for those channels is usually new and aspiring developers, they don’t see the errors. And worse, take them on board and repeat them in their own coding. We see it all the time when hiring junior devs and consequently spend a lot of time and money correcting bad habits. If we hire them at all. Regarding your point, the section element is a semantic element used to divide a generic standalone section of a document. This could absolutely be a distinct section of a webpage, so the usage shown here is completely correct. Distinct sections might contain images, text (in the form of articles even), forms, tables, whatever. It is much more semantic than using a div to carry out that same job. Does an article need to be in a section? No, definitely not, but it depends on the pattern of how the rest of the page is divided. Can an article itself also contain distinct sections? Sure!

[@caizza3]

@@craigabourne Hey appreciate the response. To clarify, I was only referring to the "typical layout" template portion of the video. According to the Living Standards, "articles are a complete, or self-contained, composition in a document." And based on the examples they have given on sections, in general, a webpage would have multiple sections nested with a (single) article.

[@caizza3]

@@craigabourne Hey appreciate the response. To clarify, I was only referring to the "typical layout" template portion of the video. According to the Living Standards, "articles are a complete, or self-contained, composition in a document." And based on the examples they have given on sections, in general, a webpage would have multiple sections nested with a (single) article.

[@latinboy906]

@@craigabourne My fear as an aspiring developer is just that, accumulating bad habits I acquire from various sources and not learning the correct way of doing things the first time around. Especially if if hurts my prospects of getting hired! Looking forward to the website, hope you get to unveil it soon.

[@ovidiu2394]

F

[@yaroslavmako]

f

[@dunder9444]

F

[@appreciate-the-vue]

f

[@prajwalpatil8579]

F

[@metapoic9420]

F

[@thelaitas]

F