Semantic HTML Tags | HTML5 Semantic Elements Tutorial

Learn how to use Semantic HTML tags in this full tutorial. HTML5 semantic elements convey both meaning and structure for our web pages. Applying proper semantics to your web pages helps both browsers and assistive technologies interpret your pages.

🚀 This lesson is part of an HTML for Beginners tutorial series playlist:

Semantic HTML Tags | HTML5 Semantic Elements Tutorial

(00:00) Intro
(00:05) Welcome
(00:25) Setup
(01:06) Heading Hierarchy
(02:06) nav and hr tags
(03:20) The word: "semantic"
(04:00) header element
(05:33) main element
(06:21) footer element
(07:30) Labeling multiple nav elements
(10:01) article vs section elements
(11:49) Adding sections
(13:20) aside, details, and summary elements
(15:50) mark and time elements
(17:57) More sections
(19:04) Avoid these HTML tags (for now)
(21:04) HTML5 Outliner
(23:35) Validate your HTML code

⚙ Web Dev Tools:

📚 References:

🚀 Semantic HTML References:

✅ Follow Me:

Was this tutorial about Semantic HTML elements helpful? If so, please share. Let me know your thoughts in the comments.

#html #html5 #semantics

[cagdasbalkay]

This is a best video about "Semantic Elements" that I've ever seen. Thank you so much, sir.

[cocoscacao]

This is an awfully underrated subject that almost no one talks about.

[javabeanz]

Near the end of the video, you mention checking the Outline. You can check the box for Outline when you use the Validator, and it can display the outline along with the results. Also in the Validator, you can have it show the entire HTML, which can be handy when troubleshooting errors.

[angelsv]

I was looking for an HTML course that actually teaches the technical part and explains the reasoning of why we do certain things. Or why we use a certain TAG on an Element. I think absorbing this knowledge since the beginning of your learning journey is without doubt a key part at making decisions in any field in a later day.
Furthermore, I found very important the topic discussed at minute 19:12 as I just came back from another tutorial, wasted almost 2 hours and the instructor was using <div> and giving the class name "container" to wrap the whole content on it.
I'll definitely will subscribe and start from scratch. I want to switch career at this moment and Front End development it's something I would enjoy doing.
With regards,

[aragorn]

Definitly one of the best teachers out there,
Thanks a lot dave your channel is a gem !!

[xpresscomedy]

I had no choice but to subscribe
This well explained thanks.

[garikmelqonyan]

Thanks for this cool tutorial, Dave: descriptive and well-detailed explanation.

[Valdaur]

I still see people using the <div> element a lot, and it does bother me! I inspected the source code of a certification provider that offer web development certifications and was surprised to see them use liberal amounts of <div> elements and IDs more than classes to style their sections. From what I have read, the only place to use a <div> element is for things like wrappers and containers. At first I was using sections for these because I felt like I needed to ditch using divs altogether, but they still do have their uses; just like spans actually!

[Valdaur]

Regarding the <hr> elements, would it make sense to keep the elements on the page between different topic areas but have them invisible. You mentioned that you would use CSS instead to create borders between elements, but is it worth still keeping the <hr> elements for the semantic meaning they provide?

[ahmad-murery]

Using semantic elements is a must-have skill for all type of developers,
Semantic elements describe your content logically while none sematic ones describe it politically (no offense) 😁
What about the address element? it looks semantic but must be used with care as it refers to contact information instead of an address (as mentioned on MDN)

Thanks Dave, that was a good video to start 2022 which I hope it'll be as semantic as HTML5

[stephenhammond]

For some reason I can't get the outliner to work in Chrome. When I click on it it just tells me that it can't read data from this site (meaning my page). I don't normally use Chrome anyway so I found an outliner addin for FireFox called HeadingsMap that works the same way.

[fairytail]

Thank you very much for teaching me the basics of html. Planning to watch all of your videos related to web development. Great job!!!

[sammclaren]

You did a great job! Thank you very much!

[evanmico]

it seems that a lot of these semantic html elements provide default formatting. This sounds like a nightmare from the CSS perspective later on. How would we strip them of the default formatting if we know we don't want it?

[sayedalimousavi]

Subscribed and liked, in response to your effort and time for us. Thanks alot.

[SamChaneyProductions]

Is it the Live Server extension (with the purple radio waves logo) or the Live Server Preview (with the orange HTML doc logo)?

[talat]

can you please let us know about your VSC color theme? btw thank you for the great video

[lilcurtie]

I love your video. They have helped me out a lot. I'm still new, and I'm trying to become a full-stack engineer. I have been looking around, and I keep seeing that you only should use one id and I have 4 of them in my article, so it seems like this <article id="projects"> and I have four pieces is this okay, or should I change to a class and how every time I try my nav bar don't work.

[Vikram]

Can you please clarify which validator you're talking about ? Is it some plugin with VS Code which does semantic HTML validation ?

[NedumEze]

Hi Gray. Thanks. You shocked me! Am a user of divs for most of my markup! That a page can have no divs! Shocking. Speaks work for me to begin refactoring.

Still, I have a terrible Javascript challenge.
You've been my Javascript Tutor too.

Would you help me sort it?