HTML section elements are a lie (sort of)

Semantic HTML elements like the main, aside, footer, nav, and others all come with, well, semantic meaning... sections don't actually have that extra meaning, unless we take an extra step though!
🔗 Links
✅ w3 page on sectioning elements: www.w3.org/TR/wai-aria-practi...
✅ w3 site on regions: www.w3.org/TR/wai-aria/#region
✅ MDN page on the section element: developer.mozilla.org/en-US/d...
✅ Common mistakes people make in their HTML: • The most common HTML m...
⌚ Timestamps
00:00 - Introduction
01:29 - Typical usage of sections
02:15 - landmarks
02:43 - the region role
03:50 - adding semantic meaning to sections
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@dealloc]

Adding an id on headings (or any element, really) also allows scroll to those elements on pages from fragments in URLs. This is very useful when you send a link to a specific part of a page, rather than having to communicate it manually.

[@tomcoop9750]

Yes! And it can be used for page anchors 👍

[@dusanlukic6784]

Can someone explain me why he used div instead of section for "hero" part of his website? :)

[@GuzForster]

@@dusanlukic6784 he didn’t, the div is for the whole content of sections, including the hero.

[@adaml.5355]

I like how this guy talks about raw HTML and CSS unlike some teachers on this site that push a JavaScript framework and SASS.

[@chimchim2_]

I concur. I typically try to avoid being a purist, but I'm seriously tired of the over engineering/force-fit of CSS by the JS dev community. They have utility but it definitely feels like it's becoming the easy reach vs understanding the fundamentals of CSS and its intent. Nothing annoys me more than opening the source and seeing these crazy auto generated class names. Induces PTSD of the ASP. NET days of styling elements.

[@jakob7116]

@@chimchim2_ what’s so bad about auto-generated names? I’m using next.js and they allow me to contain my css in .modules for each file instead of sharing it all

[@cannabclaus8036]

Sass is quite great tbh..

[@minnami778]

JavaScript made a modern web application n sass is like a css with functionality , feature and break down css into components. Without knowledge of css , sass couldn’t be implemented. I don’t see any negative point in these technology.

[@Morquioo]

There's no reason to use vanilla CSS when you could be using SASS, it just doesn't make sense. It literally doesn't have a downside.

[@yousifal-raheem5061]

Super helpful. Keep making videos on semantic HTML, I think it really improves the quality of the web if all developers started adopting them instead of just using DIVs. Apart from assistive technology, it's quite important for web crawlers. For example, Google crawlers will first attempt to "understand" your content from the semantic structure of your HTML. If that's not detected, and extra piece of code is then triggered to try to guess the different parts that makes up your site. That's not optimal since Google won't be able to list sections on your page, or extract answers directly from an FAQ section for example.

[@RMSAnalyst]

Thanks for the information. I am a newbie! Much appreciate it!

[@michaelmorris4515]

Recently I've been conducting a lot of new hire interviews. My boss coordinates the meetings and I'm one of the interviewers. One of his questions is to ask people to assess their knowledge of HTML on a scale of 1 to 10. Most people don't dare give themselves a 10, likely because of stuff like this. Fascinating to be sure.

[@yugiohsc]

I like how you’ve been emphasizing “front-end” now so it doesn’t sound like “hello my friend and friends”

[@JoppeKroon]

Yes Kevin, preach! Let's keep the accessibility content going! So many devs miss these kinds of subtleties because they don't 'see' the consequences!

[@dusanlukic6784]

Can you explain me why he used div instead of section for "hero" part of his website? :)

[@dusanlukic6784]

sorry, my mistake by why he wrapped his hero section in div?

[@mario3452]

what is the consequences?

[@opposite342]

@@mario3452 I'm p sure it's mainly just "assistive technology". aka the one helping people with visual disability. It is helpful to care for them as well and be inclusive of everyone.

[@opposite342]

@@dusanlukic6784 div doesn't do anything anyway. Apart from readability, it's mainly used for adding class name to be used in the css file. Kevin probably used the div there to style something visually. As long as the section bit has an aria-label/aria-labelby (no matter if it is nested under a div) it should be picked up by the voice assistant.

[@jaydenmoon1165]

Dang Kevin I hope you know how important and awesome videos covering topics like this are - I feel more "complete" as a dev when I have a better understanding and more in depth knowledge of web development as a whole - thank you!

[@pfever]

I always appreciate your videos! I suppose you could have catched this issue earlier by testing your website utilizing a screen reader. I heard that it is the best method to test the accessibility of your website, but most programmers do not know how to use a screen reader. What about making a tutorial about it? 😁

[@BjarneOldrup]

I definitely recommend testing with a screen reader, as synthetic tests don't catch anything close to all the issues. Getting comfortable with the free NVDA og the 40 minutes per reboot JAWS takes an hour or so, just to learn the basics. It's super valuable and benefits everyone.

[@jpisello]

"Twoday" is my birthday, and I learned something new. So thanks for an "awesome" birthday present!

[@SuperGylden]

There's an add-on for FF and Chrome, Landmark Navigation..., you can use to navigate a site and for testing purposes. Why it hasn't been implemented in the browsers is beyond med

[@pauker2017]

Very nice! Thanks Kevin. Please more of this in-depth look for: article, aside, figure and so on :-)

[@cm3462]

Really enjoying digging into your channel. I'd been putting off learning CSS. You really drill down to the most core concepts, thank you and nice job.

[@joranschneyer]

Thanks for clearing that up. By the way, nice t-shirt. DFTBA! I am relatively new to your channel but almost immediatly got positives vibes like with the nerdfighteria community. Especially when you do this thoughtful accessibility content. So nice to see unrelated corners of the internet suddenly related. Are you really into the nerdfighteria community or just liked the shirt?

[@Sjon_E]

I think a really good video that I feel like no one else has done (or maybe you have even, I just don't know) is actually show what these accessible features are doing side by side as you edit them. A lot of us are told "well do this because accessibility, do this because of screen readers" but what exactly is there experience with and without these technologies? I think that would be a great video.

[@hetoverseo3887]

I believe the main advantage is "eye scanning" the html code.

[@2DJF]

Good job paying attention to these semantic aspects that might seem so irrelevant to many, but are in fact very important to some.

[@LauraMarieAlix]

Thanks for this Kevin, really interesting. Would be great to see things from the perspective of some assistive technology during these accessibility tutorials.

[@xOvernight]

We should take a second to appreciate that Kevin says "frontend friends" slower now because he learned that we misunderstood what he was saying before.

[@bulletproofcode5733]

You taught me the practical skills of accessibility and the value and excitement about it! Thanks so much, Kevin.

[@schmufus]

Could you make a video about the best workflow to update your own page? The process of making changes, save them in git, upload them on your webserver, ... This is something I would be very interested in. Thank you for your educative content :)

[@jordanlarocque3756]

You started doing youtube videos? WTH! good to see ya!

[@alvaroprietovideos]

I still remember that moment when I learned the secrets behind "front-end friends". Now it is much clearer!

[@davbrito]

I always get it wrong, and the caption says friends and friends so it's weird.

[@PeleTeleBui]

what secret??

[@Defcon1702]

Great video! I would really appreciate a video that explains the semantic elements completely and just like here, the accessibility contexts. Feel free to make a course out of it, I'll buy it right away! :)

[@scizophreniac]

i like the way he went "just copy this" copied it, and then completely ignored what he just did and typed it out manually...

[@jeromesnail]

The best content about HTML/CSS on KZbin. Really.

[@BitwiseMobile]

By the way, the dashes are called spinal case, or alternatively kebab case. It's similar to snake case, but instead of underscores it uses dashes. Also, thank you for a great video. I'm a long time web developer, but there is always something new to learn. Thank you for sharing. I have been using these semantic elements naively. I will learn more about the proper way to use them for future implementation.

[@haycoal8773]

Oh my goodness. This is such a big help. I prefer to use divs but because I was wanting to use Semantic, I decided to use section... I may go back and adjust some things ^_^ thank you for the awesome videos! They're a big help on my web dev journey!

[@gesucristo9763]

Off topic time, is it correct to use want + ing? I’m studying English and I remember that you can’t use in this way

[@n_mckean]

is as dumb as pretty much, just the semantic version. When reviewing, see if it is more appropriate to use (content that can standalone in other contexts) or (peripheral content) etc first.

[@kentcassidy7116]

@@gesucristo9763 estaba quiriendo

[@maestrothundero7105]

So if I have multiple sections on a page,that have the class of "hero-title", can I add the id of "hero title" to each one? Will the the aria-lablledy pick the the id in that specific section or will it will it cause an error because an id is supposed to be unique? Or will I have to label each hero title id individually, for example: "hero-title-one", "hero-title-two", "hero-title-three" etc? Love the content btw Kevin!

[@maestrothundero7105]

@Deborah Hearne Thanks! I was afraid as much. I am using the generic name of hero title as I have an extremely large single page layout and each of the 15 sections has its own title. In hindsight I should have used articles.

[@maestrothundero7105]

​@Deborah Hearne There is only one hero per section, each is used as a title specifying what each section is about. It is similar in layout to a docs section of a framework or a js library, heavy on text and images. It has a "table of contents" style side navigation with anchors to each section, hence the need for many sections on a single page.

[@AlThePal78]

so you give yourstuff a div of container, then a section, then a div is ther a purporse for this flow? I get very confused for that :) love you stuff always

[@joefads5040]

Nice! I have so many sections to update now across my blog... super useful to know this! Cheers Kevin!!

[@sonerzorlu7079]

hi great video. thank you for your effort. could you please tell me the name of the font you used for tags

[@lonleybeer]

I needed this so badly thanks, always prefered divs

[@Shrab]

I never knew this, thank you for sharing the knowledge and helping make the web a place for everyone not just the fully abled bodied users.

[@NicholasShanks]

How do you get VS Code to edit the closing tag at the same time as the opening tag?

[@younglion0451]

Your accessibility content have been perfect! So, appreciative!!

[@archiem6323]

Yes, I always wonder about that. What's the difference 🤔. Love your videos.

[@hovhadovah]

Wow, didn't know that sections don't get a role unless they're labelled! Thanks for sharing! My only concern is redundant narration. Wouldn't a screen reader narrate the heading twice? (Once when it encounters the region and once again at the heading itself.)

[@BenDMyers]

Fancy running into you here, Aleksandr! The answer to this is… not a binary yes or no. Screenreaders have multiple ways to navigate a page. If you’re navigating linearly using the virtual cursor, yes, you’ll get some redundant narration. But screenreaders have modes (such as VoiceOver’s Rotor or JAWS’s seemingly infinite keybindings) that allow folks to skim through the page region by region, or heading by heading - and in these skimming modes, you’re not guaranteed duplicate announcements, so having the redundancy is actually a good thing there. TL;DR, yes, it leads to duplication in some screenreader navigation modes, but not all, and that duplication is typically expected.

[@hovhadovah]

@@BenDMyers Hey Ben! Thanks for clarifying-good to know that the duplicate narration is expected in these scenarios! I'm always so worried about misusing aria-labelledby/describedby/aria-label for that reason 😅

[@nahdev2889]

#

[@meepsmeep7457]

Even worse, remember all that talk about the document outline and how section + title was supposed to create a headline/reference for screenreaders? .. turns out that while it was implemented in the accepted HTML standard, browsers and screenreaders just never bothered implementing it, or did it badly... so now it's no longer a thing.

[@PaulMountney]

I've seen a lot of your videos, but I've never seen anything about TailWind CSS. What do you think about it? Personally, I don't see the point in putting CSS in every line, cos that's how it used to be back in the old days.

[@jehawkins333]

So awesome Kevin! Thanks. This was really informative and helpful!

[@anttipaas1682]

I think is more easily to be structured in HTML. Div could be used for container classes to make them differ from the code. For example the following: I'm seeing the code more simple this way instead of everything having "div" in it. Section after all means kind of like a faction of some sort and content related to that faction will be placed there.

[@agent-33]

Still the same. You are still gonna look at the value of class or id to know what it is or for what.

[@abielkiflu1845]

I never regret watching your videos. please keep it up. they are really useful.

[@lefactuoscope5692]

Is it better to put tags inside a section, or put sections inside an article?

[@theasianviking86]

I say put the article inside a section cause that section can contain bunt of articles.

[@yofi2614]

06:28 So let me get it straight, i dont need to add label to my section if i have already have heading inside it... unless i think the heading doesnt really describe the content in exact way, and then i should add the section aria label?

[@milansingh3222]

Very helpful… could you make some more videos or series…this really need to be understood by developers…

[@valeriousmonk654]

Mind blowing. I really didn't know about that. Keep it up!

[@alvaroprietovideos]

I don't like IDs since it is sometimes a pain to use them in programmatically generated code, but they are required for labelling. Do you know if there is any plan to solve this in future specifications? Great content, as always

[@truvc]

You can wrap an el in a label. Even better would be a group element where any label and control within are auto associated without needing id and for attributes

[@JoppeKroon]

I'd think if you have programmatically generated code, you should also be able to generate the link with the labeling element. With an input you can indeed wrap it in the label instead of using the for attribute, but that structure _can_ be problematic when it comes to styling. Auto association by grouping them in an element doesn't exist right now?! Unless I'm missing something.

[@renascienza.bazarclub]

The real problem with HTML and HTML5: HTML comes from SGML to be a markup language to *formating*, a kind of LaTEX for. web documents. After a lot of additions, the upgrade to XHTML, XSL transformations (allowing multiple possible formats for the same document by the application of XSL sheets) and the CSS rise, finally someone figure out that HTML should be a language that express *meaning*, not formatting. Knowing the meaning of each part, is possible to some set of post processing instructions determine how to format the document. Should work, should be good. In practice, nobody wanted to make this happen. For the sake of correctness, nav, aside, sections and so on shouldn't be rendered as nothing in special, are just meaning marks. The real formating should be delegated to somewhere else. Instead, all these marks have a "default" rendering, and we can't change it.

[@naimas8120]

That actually makes sense.

[@Anna-dh2kg]

I literally was trying to understand this yesterday.

[@john-r-edge]

Good stuff. To assist the easily confused it may help to explain what "Aria" is, (Accessible Rich Internet Applications) - and help avoid listeners thinking you are using the word "area".

[@NicholasShanks]

I don’t think anyone watching this channel is thinking that.

[@composernotes]

Hi Kevin, have you done a video on aria and how to use it?

[@mirvids5036]

Was thinking aria was an American misspelling of area until I looked it up. "Overview. ARIA is a W3C specification that stands for “Accessible Rich Internet Applications”. It consists of markup that can be added to HTML in order to clearly communicate the roles, states, and properties of user interface elements."

[@Holy_Frijole]

Bruce Lawson has a Smashing Magazine post from 1/7/2020 stating section tags mess up header hierarchy and cautions developers to use it properly. Could make accessibility worse so be careful. I would love a deeper dive video from you Kevin b/c you just make sense to me and I think it would sink in more from your pov.

[@sergejstojanovic2518]

5:50 how do you change your section opening and closing tag at the same time. Is it alt + mouse left or something else?

[@tiktaktictac]

Assume you're using VSCode, that shortcut is F2.

[@aldyreal]

I think he used Auto Rename Tag extension for that

[@RMSAnalyst]

Your videos are amazing. Thank you Kevin!

[@dave6012]

Looking for a good reference for minute semantic html. I can find many sources for the big stuff like Kevin describes, but I was designing a cart-item card for an e-commerce site, and struggling to find which element is appropriate for things like product name, type, price, quantity, etc. Anybody know a good reference for that kind of stuff? Somehow I doubt or is appropriate for this situation.

[@dave6012]

I suppose I could inspect the Amazon cart page, or Air BnB… 🤔

[@dave6012]

@Deborah Hearne thanks Deborah! Where did you learn this? Is there a source I can reference for further learning?

[@JohnBortins]

Outstanding! I implemented this right away.

[@shgysk8zer0]

Looks like I got this wrong too. I could've sworn I saw that it automatically used a heading element if available. And, I think it probably should.

[@Cypressious]

Kevin, I appreciate the video. IMHO it would have been even better if you showed the difference using a screen reader or some other assistive technology debugger.

[@ruffy___]

Really love your helpful content (: sich a nice dude! Thx 🙏

[@universecode1101]

Niiicee over the basic ✌🏻

[@grinsk3ks]

First page I opened on w3c doesn't have a aria label in the section xD It's the one for the article tag

[@cousinrolf871]

While you're not wrong about this, I think what you're doing in your case is redundant, since you already have an accessible name of your heading within your section content

[@distantcam]

Are your headers getting the right role? The w3 link says that headers don't get the banner role when they are decendants of sections.

[@Zantrol1]

i was considering the exact same thing

[@AlThePal78]

you literally copied then typed it out lmao :) you're one of my favorites to learn from I need a deep dive to honestly go to real world scenerios with all this. I would love for you to make a class and I would buy it to make a real world website, like your hero page, and then reshow all this we learned from you. I am understanding section a lot better thanks to this, it was confusing and I did not know you needed a label awesome :)

[@TheVideogamemaster9]

Huh. I just did a take-home test for an interview, and just put a section in my main because I didn't want to use another div, but I had no idea about any of this stuff lol

[@JamesWelbes]

Does Trudeau know you're making KZbin videos without a mask on? 🤣 Great video as usual Kevin!

[@dailymeow3283]

I think aria-labeledby attribute might help in SEO, might make the crawler bot more understand the content, and it might appear as a search result if it matches the search query

[@tyu3456]

Oh man I always thought you were saying "friend and friends" at the beginning lollllll

[@stevenleonmusic]

Semantics isn't always about the visitor/viewer. Developers need semantic information to make their jobs easier too. As someone in the middle of teaching a web development class, descriptive tags make learning a lot easier. How does one explain the purpose of a "div" tag when no one even knows what a "div" is? It's a lot easier to explain the role of a element since it's the same terminology we use in document design. So even if you're not using the element's full accessibility potential, it's still better than for people looking at the actual source code. One thing that frustrates me with HTML5 is that they did not improve the crummy anchor tag paradigm. We should have a tag that specifically functions as a hyperlink only. Personally I wouldn't mind having separate tags for outbound/internal hyperlinks as well.

[@meepsmeep7457]

Nah, nobody cares.

[@stevenleonmusic]

@@meepsmeep7457 People who care enough to leave the comment "nobody cares" is the ultimate form of cognitive dissonance.

[@meepsmeep7457]

@@stevenleonmusic Nah, you just dont like being told your opinion is pointless :-3

[@stevenleonmusic]

@@meepsmeep7457 And your opinion matters any more than mine because...? Are you some coding Guru I've never heard of with years of experience that people should care about?

[@AngelHdzMultimedia]

@@stevenleonmusic and people who spit "cognitive dissonance" around just to sound smart. Ultimate attention seeking. 😂

[@foxjonesofficial]

Same is

[@mohtashimali581]

Hi Kevin Your videos are great. Idk if this kind of github repo exist or not. Can you make a github repo in which you can make layout(by layout i mean best approach to write html) and gving little explanation like your are doing in videos.

[@dbweb.creative]

I remember in some other video you mentioned setting font-size: 62.5% to have rem to be equal 10px by default and scale with browser settings. So I have a question, why not set it to 6.25% to have rem be 1px, wouldn't it be even more convenient?

[@nemea6698]

You could test but generally 1 px is not even noticible u would just see a dot. So 10 px is at least visible as a letter and then we can imagine what it could be scaled up.

[@magburner]

When you set the font-size to 62.5%, rem and px have a 1:1 conversion ratio. So, 1px = 0.1rem, 10px = 1 rem, 16px = 1.6rem. So on, and so on.

[@dbweb.creative]

@@magburner my point is why not have rem to represent 1px in relative terms, This way basically any styling done in pixels can be converted to dynamic sizing just by replacing px with rem. Also perhaps using integers would be better than using various decimals just because we are having rem at 10px rather than 1px.

[@magburner]

@@dbweb.creative You can set rem relative to pixels, at whatever ratio you desire. The 62.5% ratio, is just a convention from way back in the day.

[@solr4cc]

Kevin why not article instead of section for your page?

[@DavisBenjaminA]

So do sections have articles, or articles have sections?

[@Errox358]

Speaking of semantic, I just dived into a new job where I work with Angular. First time. And I don't like it for many reasons but I hate the bloated html mash it creates. Which you will have, even if done right, because of all that angular specific pseudo html. What do you people think of that?

[@_ric]

I've been coding sites for decades, and while I love semantic HTML for it's readability, accessibility and ease of maintenance, for me the distinction between article and section, and the W3C guidelines on how to use them, just feels "a little off". The rest of the semantic stuff; header, footer, main, aside, etc... all feel far more "defined", for the lack of a better word.

[@n_mckean]

Its best to think of not as a written article but as an article of clothing - meaning it can stand alone and by mixed in other contexts. If the content inside fits this definition, then always go , if not, then consider fallback to or depending on semantics (though section was never realised to its full potential).

[@_ric]

@@n_mckean Thanks for the reply. You've hit the nail on the head with the very last bit in brackets. It's not that I don't understand or have difficulty in implementing either, it's that in comparison they are not as clearly defined in the way the other semantic tags are (or at least the newer HTML5 semantic ones).

[@n_mckean]

@@_ric Agreed. To its full potential, you'd use to control heading semantics in the document outline... but hey, browsers will be browsers.

[@n_mckean]

@Deborah Hearne Be very careful with your statements, I'm not wrong. If you read it correctly you'll see my point was to think broader than a "written article" - many developers take article too literally. I never said a written article didn't also fit the description of a standalone piece of content.

[@VinceAggrippino]

Re-watching this as I didn't quite register what it meant until I started writing unit tests... `getByRole('region')` didn't work on my `

[@bizoitz86]

What is the difference between title and aria-label?

[@smohammadhn]

this tip was literally out of this world ...

[@neontuts5637]

Thanks for sharing Kevin :)

[@mrparanoid9698]

You get a super like for this video :)

[@jenova2916]

Its not only about accessibility but for SEO as well. And even though accessibility is very important it was mostly done for SEO.

[@cristianacosta2636]

OMG, Thank u sooo much for the knowledge

[@proteus1]

Isn't it part of the dom structure. Arn't semantics used for better understanding the websites structure.

[@igu642]

❤❤❤❤

[@stratman1234]

This is very useful. Thanks.

[@m.a.karimkhan1898]

i was really lokking at these things when this video poped up sucha acoincedencd

[@XerosXIII]

always thought section is extra flair of div! and now you telling me i have to label all of them now? :D

[@n_mckean]

Only if you want them to be regions :)

[@EliotNash]

Really interesting - thanks Kevin

[@user-fu6kf1yk2o]

Thank u Kevin, really useful.

[@somnvm37]

I think, lots of divs is kinda hard to operate, if yiu see word section you knowbit's soemthing big.

[@berndeckenfels]

Good tool to see the aria interpretation of sections, roles and titles?

[@mirjalolochilov8428]

👍👍👍

[@nitras.design]

Please do an example page with semantic markup.

[@intipontt7490]

Huh. I had no idea about that. w3's documentation seem to be better than mdn's for semantic html.

[@nic00la1]

cool 😎

[@adamstuartclark]

Extremely informative video. Thank you. Love the way you put your videos together. Super work.

[@dreamseekersecondarychanne6053]

Kevin is always here to read trough my mind and pop with what I need in my recommendations. Kevin Powell is our god, he is omnipotent.

[@johnrhansonsr]

Thanks Kevin.

[@oldclient]

I thought it's done to make use for bots and AI as like microdata formats are

[@artifectmedia]

Hectic!