The most common HTML mistake // The incorrect use of HTML heading levels
Vložit
- čas přidán 14. 06. 2024
- Using headings is nice and simple, but most people don't understand the effect they have on the document outline, and end up using them in incorrect ways. In this one, we look at what the document outline is, how headings effect it, and a few other best practices.
✅ Polypane: polypane.app/?ref=kevin
(this is an affiliate link, so if you purchase Polypane through this link, I will earn a small commission, which helps support my channel)
🔗 Links
✅ The a11y project: www.a11yproject.com
✅ More info about heading levels: developer.mozilla.org/en-US/d...
✅ More info on landmark regions: www.a11yproject.com/posts/201...
⌚ Timestamps
00:00 - Introduction
01:34 - Polypane and the document outline
04:06 - Issues with the document outline
07:08 - Exploring heading structure
09:23 - Skipping headings and other heading issues
10:43 - Landmark regions
13:32 - Think of it like a table of contents
#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 CZcams 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!
A lot of comments about how HTML5 allows you to have multiple h1 elements, but it's not true. Yes, it was part of the HTML5 spec, but no browser or screen reader ever implemented that, and because of that, they revised the spec to advise against it. You can read more here www.accessibility-developer-guide.com/examples/headings/html-5-outline/
Is this why my Markdown editor complains when I have more than 1 or no headings , thanks
This is such a bummer :( Does not make sense semantically. But, we've got to work with the tools available to make the best user experience we can!
I dont care, if You write a book you can have as many chapters as you have so having multiple h1 is not a mistake
@@sebaszwarc6028 h1 is the title of the book, h2 is the title of the chapter so yeah, is a mistake.
@@ACharlar22 not for me
There are few akward cuts during the video... sorry about that, but I cut out a few parts where I rambled and/or went off-topic, so it was for the best 😊
Oh so it wasn't my phone acting up again 😂
Rambling is a trait of many greats. Don't worry
Been a long time fan. You taught me how to use floats😅
I would really appreciate an a11y video.
Menu button/Navbar toggle
Navigation (When visible or hidden)
Any one of those would get my vote.
Thanks for all the great work Kevin. You have helped many developers through rough times 🤣💯
Definitely want to see more accessibility content! ☺️
Absolutely !!!
Agree to what he said
> Definitely want to see more accessibility content!
> But i can`t
@@renedekart5069 that was deep 🥲
Same!
I oversee our front-end and am constantly preaching the value of accessibility to the team. I honestly didn't think it was sinking in with them until this week... they started sharing some of your accessibility videos among themselves trying to get each other to see the value. Thank you!!! Your channel has made my career a little bit easier.
Tell them to use only 1 hand every time they're on their computer for the next week. They'll quickly see the value of being able to tab thru a website.
I don't know if Kevin saw this, but actually impacting the real lives of people in a positive way is a dream for many creators.
This was so useful, usually programmers don't talk about this.
As someone who works with the gov.uk design system and cares deeply about accessibility, thank you for covering this! It's so often overlooked and things like tab order, making pages screenreader-friendly - even designing content appropriately - aren't prioritised.
I reference your site's design system quite often. It's very nice!
@@JeremyWhiteford1 thanks. I can't take credit for the design system itself, I'm just a dev who implements it on services.
@@peteryates308 Well it's still nice and great that the dev team is concerned with accessibility.
Your gov.uk system is great but then early this year i couldn't access it because I was repeatedly asked for Northern Ireland driving licence number even though I am on the UK mainland.
@@studiosoftmorecambe6879 so that'll be a problem with a service rather than the design system itself. The design system is a set of guidelines on how to build consistent and accessible interfaces. I'd recommend using the "report a problem" link on the service you were using and hopefully someone will look into and fix the bug you encountered
As I'm coming back to front end development, this was a great overview of why this is important, I'd love a video about the other semantic elements!
Thank you Kevin for not only created high quality CSS tutorial, but also HTML related one. Please make more of HTML videos!
Frankly, anything that puts people off spending time on the FIFA website is a good thing imo 😂
It's so fitting that the FIFA website is a top example of how not to do accessibility!
I'd love a video about the difference between section and article. I often have to look that up, and I'm always looking for good metaphors to help me remember the difference.
The biggest obstacle for having well-structured HTML for web pages for most companies, will be a poorly designed or implemented Content Management System. Some CMS's are bespoke with limited functionality, or can be cookie-cutter based code, which doesn't give you full control of the website styles. So even though as a web designer or developer you may try to have a function, style or reason for the content to be displayed a particular way, most of the time you will run into issues of copywriters using a basic interface that allows you to apply HTML based styles, including Headers, Strong / Emphasis Tags and limited control of the overall content styling (which is what I think is happening with the FIFA website).
It's a very good lesson overall for front-end / full-stack developers to keep this in mind, but often times the reality is different from the practice.
A solution to this is for copywriters to use something like markdown and use a custom rendering engine so that # that would be an H1 transforms to the correct heading level for your site, and that subsequent ## and ### etc are transformed as well, if you really run out of headings, like if some copywriter uses the full range of heading to the h6 level but you transform their headings so that # are h3s for example, then just make ## h4, ### h6 and ####, ##### and ###### be styled paragraphs, as those ain't probably that relevant for the table of contents.
This separation from content and HTML allows you to adapt the content to different HTMLs to fit different designs and still be consistent
THANK YOU SOOOO MUCH FOR THIS! Admittedly I think of 'H' for styling headers (h1 to h3s, anything else be a paragraph style) but never thought about it as a table of content hierarchy (mind.... BLOWN!). I found and subscribed to your channel a few days ago and have learned so much about css (looking forward to seeing more css battles!). Look forward to more on the HTML side o' wise one!
Old Opera 12 had this ability to show the H-hiearchy built in. It had many other great stuff, IMO way ahead of its time, but then the developers decided to kill it and adopt webkit, and Opera lost its individuality. Except for the VPN, that is.
30 FIFA web devs disliked this video...
But seriously, another super-useful vid, and yes please do one on semantic markup! Thanks Kevin!
Thank you Kevin, I've been honestly thinking about this a lot, and there is a lot I didn't fully understand. This really helps a lot, and I would love to learn about more about articles and sections, I'm never quite sure when to use what and where, finding good examples is sometimes hard.
Please do more of these videos! This was super helpful to understand!
for someone starting out in front end dev (out of necessity: 1 dev studio) this is a great video. clear, concise, useful
great help! I'm still learning but can only imagine how invaluable this will be when I start actually making stuff, working, etc.
Love the "table of contents" metaphor! I'll be using that!
Two things.
Skipping heading levels is not a problem by itself, it doesn't really impact screen readers. It does make it more likely your branch of headings gets mislocated when a higher level heading is introduced in between. But sometimes you just have to choose a safe low level, so you won't be hijacking anything yourself in places you don't control.
Of course you can use the header and footer element as much as you want, but only the top level ones will have any semantic effect.
Skipping headings is a violation of WCAG 2.1
It won't read incorrectly, but it makes me stabby. If you think of HTML as creating a document outline, you're creating holes and fragments by skipping heading levels. Within CSS, we can assign classes and differentiate through style without effing up the semantics.
@@n_mckean Nope it is not a violation. It used to be something that was advised against, but seeing that it does not actually pose a problem that has been let go as well.
@@fuzzypumpkin7743 absolutely, if you can avoid it, you should. But as I said, you don't always have control over where your stuff ends up, or it gets inserted into multiple places with different structures.
im a programming student and web design is only one semester in all of our education but idk why im really enjoying html and css... also really enjoying your vids
A correct usage of headlines can also improve your search engine optimization on your page overall. Regardless of the usage of an table of contents. Very appreciated tip from the SEO front here.
Simply not true. Per google: czcams.com/video/zyqJJXWk0gk/video.html&ab_channel=GoogleSearchCentral
@@NadirNovelties The SEO Community is very specific. I‘ll try to specify.
What I agree with you and John Mueller is, that it does not per default increase your SEO, just because you use headlines in a „correct way“ or headlines in general. That was not intended with my first comment.
But overall it is agreed in the community, that a correct usage correlates with an overall better experience as well as it can have boosts for the page, if the information is also provided and/or clustered on the page. This can be done with headlines to separate massive paragraphs.
In general, one can test the ranking performance of a web page fairly easy. On a good ranking page, remove all the headlines or replace them with divs or spans. What one usually sees is a ranking drop. Same vice versa, when you try to force paragraphs or text for styling reasons to be headlines.
In general, it is a good and wise tip to use headlines correctly, even for SEO purposes. But in particular for one specific case, it depends on many things, as John and SEOs always say. ;-)
@@PascalHorn Using headers, articles, and sections in the correct way will get you much farther than H tags. What search engines want is coherently structured information, and while having a proper hierarchical H tag structure is a good way to do that, it is not enough in and of itself. Further, it isn't essential to achieving that goal. Much like metatags became less important as the technology advanced, so too has the table of content structure.
It's a good way to structure a web page if the content permits, but it isn't the "correct" way by any measure, and in some situations it's the wrong way to go.
@@NadirNovelties I totally agree with many parts of your argument. I just think that we are overcomplicating it for most people that watch this video and Kevins channel.
We should acknowledge that most people here are not too familiar with SEO, they are maybe building their first website, or are web developers, but simply don't know too much about SEO. In that regard, I'd like to generalize that how Kevin has presented the concept of TOC as well as the usage of headlines, it is not only a common practice, but also a best practice to do so. Not every time, not for all content types of course. But _in general_ it is still a good way to do it. I appreciated it. =)
Also, it should be said that SEO can vary from straight forward things to very complex stuff. If any other viewer is interested in SEO, I'd recommend to not use a random CZcams comment like mine as basis for a deeper discussion. What I can recommend is the [On-Page SEO Beginners Guide] from Moz.
Would this be an SEO channel, we might have a deeper discussion about it. But I think this is neither healthy for Kevins video nor for me, so I'm leaving it with this.
Most useful thing in this video is learning of Polypane and its Outline viewer. At my previous company we had a custom XSLT we could bring up side-by-side to show that.
Great video, answered all my questions on aria stuff!
i learnt a lot from this video as with all your content, thanks kevin!
I truly love your videos regarding accessibility friendly web-designs. As a beginner, I'd like to make sure I get it right the first time, and I haven't been able to come across very many well taught/well explained tutorials on how to make your site A11Y friendly. Therefore, many thanks to adding the tips into your videos. I would love to see more HTML semantic tips as well, most recent one I learned about was /; I was very curious to see how you would jazz that up with css.
Great great great video! More frontend devs need to see this, especially the part where you point out that various headings are not meant to be used as styling - this is very common when using something like MaterialUI.
Looking forward to more content on a11y & semantics!
loved this! More accessibly and HTML structure best practices please!
Great topic Kevin, it'll be great to see more of it!
This video is something I was looking for. Thank you, Kevin. I love the topic of semantic HTML.
Would definitely like more videos on accessibility!
Well this video made me decide to rewrite my entire portfolio website, I also did not know this.
Thank you.
Great video! Very interesting and useful! Thank you!
This was super interesting. I really didn't think there would be much to say but you really made me re-think how I write HTML. I'd like to see more about the elements such as NAV, HEADER, etc. Great video!
Really interesting! I always have a headache figuring out how to use headings, as many do. This is my new heading bible. Thank you 😀
Really enjoyed this video. Very informative, and quite a lot of things I didn't know, in a concise format. 👌
Will you be doing some more accessibility design/aria?
I would love to see some interviews with impaired people on how they use the internet, what makes a site good, great or awesome and what makes them completely useless for different types of disabilities.
There should be a browser that simulates impairments so it's easy to understand because you can experience how they would experience your site!
Actually, Polypane does have multiple simulation tools for accessibility in it as well, including different vision problems.
I did do an interview with Ashlee Boyer, where we talked about some best practice, getting started, and more. It was more of a general overview of different concerns we should take into account, and simple steps to accommodating them.
I do plan to have more a11y content though. There isn't enough on YT, and it's such an important topic.
@@KevinPowell I've seen that video, I just want to understand their experience more since it's hard to get a explanation from someone online. Maybe they're tired of answering, they can't or think you're not serious or mock them idk.
Like how does a blind-deaf person use CZcams? It makes no sense to me, in my head it's impossible. Yet I've seen a comment from someone that said they where blind-deaf.
@@Stoney_Eagle blind doesn’t mean no sight, it means impaired sight. Same with Deaf. Some are completely dead and others have impaired hearing.
@@NathanHedglin I'm aware of that, that's why I want to see more of these videos like the interview with Ashlee Boyer 😉
I'm partially dyslectic but that doesn't mean I can't write code, it just requires the right syntax highliting and CZcams videos instead of documentation where the words start moving around.
Yes, We need more on this.
You propose to use a header to create subtitles. Aren't subtitles supposed to be rather created by packing enclosing them with the inside a ?
man, really appreciate the time you take to teach us about a11y! thank you!
Thank you for the tips Kevin. You are a great teacher.
So valuable! Yes please more content on accessibility 🌟👍
I'd love to see more on html. I'm very new to this programming stuff, and in the tutorials i've watched, there's always one or a few videos on html and then a ton of videos about CSS or other things. But I hadn't heard of this kind of thought-out, structured process of making headings and essentially setting up a website. So yeah, I would love some more!
Yes, Yes and yes!! please do add more content Kevin!
Brilliant video! I really like the way you think! Thanks for posting!
I really did not know anything of this... Thank you... Plz make some more videos related to this topic
great video and yes, more about the other accessibility tags as you mentioned. I am often confused between using article and section tags and how they relate and differ to one another.
More a11y and HTML please!
More accessibility videos please! 🙌That was really good Kevin.
I'm new into html and I was wondering whats the use of the semantics and this video give me answer. I would love to see more videos like this.
I loved this video... The approach you took about the Table of Contents and why this is important. I'd love to hear more about accessibility and semantic, landmarks, regions pls 🥰
Great video. everything you said is important for SEO as well. correct use of headers and content that follows semantically is indeed important for search engines to fully grasp what a page is about but also how each section answers a query.
Excellent video Kevin, thanks!
nice informative content.
I will definitely use this advice...
*uses divs for everything*
I especially loved that video 👏. More, more, more like this!
Literally want to see more of this
Thank you! I need more videos about HTML semantics and accessibility. I have many doubts how to structure things properly.
Great video Kevin, yes would love more
Accessibility videos
Thank you so much for this video. Helped a lot.
This was awesome! Thank you!
Two hands up for more semantic and accessible HTML content. Thank you for this. A lot of people underestimate HTML because it is not a programing language. But HTML comes with its own complexity and rules that if are not followed can sink your ship even before it starts floating. Thank you for this video, and more please :D
Fantastic video! This reminds me that one of the best ways of learning website design is looking at the code of existing sites, as it's all hiding in plain sight. It's amazing that such a large organization like FIFA has such poor code organization. I hope someone at FIFA sees your video and they hire you to redo their site.
Definitely would LOVE more accessibility content! Also, would another way to do the header / subtitle be to wrap both the title and subtitle in the h1 but use a tag on the subtitle?
Yeah, if you think the header plus subtitle makes more sense being read as one continuous phrase, then some kind of inline styling element could be used to differentiate them visually without separating them for screen readers.
Absolutely would love more videos
This is a useful video. I especially find the part at the end where you talk about styling the headers using classes. I think I'm particularly guilty of using picking a specific header based on its styling not its position in the hierarchy.
I got a lot of information from the interview you did with the woman from a11y earlier and would appreciate more vids and info on accessibility.
Thanks @Kevin. Great video, and I wait more on this topic.
Thanks a lot for this video, it's very helpful
you should do more popular sites breakdowns, think this is pretty cool and useful :)
Great video as always! Do you happen to have any Chrome extension that we could use for the outline?
Great content as usual, Kevin! It would be interesting to see a follow-up videos on how CSS and JS utilize semantic HTML and if/how this is better for the end user.
I had already written some Markdown before and the headings being used as a table of contents surprised me more than it should
I knew they weren't for styling but thought they denoted like importance in the document instead of hierarchy
Nice to get it right now
Great video! Definitely interested in more videos related to accessibility. I just may play this at work! I am responsible for the front-end of a 300 plus page website and constantly battle the "Use a heading for this" recommendation in cases where paragraphs should be used.
Yes, I’d appreciate more videos on accessibility.
Nice Video Kevin, thanks
Great video, Thank you.
Yes, more accessibility content please! It's such a shame that this topic seems to often go unnoticed.
This is very interesting, I never thought about Headers in that way. I suddenly understand why tabbing through a website can be a pain sometimes when a document outline isn't properly considered
I'd like to see a video on sectioning elements!
Yes please!
Unbelievably good video 👌
Yup, I'm very interested in more videos about a11y. 😀
The H-tag utility classes... stroke of awesomeness! I will be baking that into my dailys from now on! That uyou for the top tip!!
Do you perhaps plan a video about the element? There is a lot of interesting stuff there that applies to css but also performance (prefetching etc). I think you would turn it into a very useful video.
"... and this is how heading levels are meant to be used, they are meant to be used to create a table of contents type of outline for your document, they are not meant to style things..." - Kevin Powel.
Thanks Kevin, great video, I have never thought of them this way.
Love your sharing, the king. 😀
Awesome !! Thank you
More on accessibility please! And thank you!
Great video and more like this would be appreciated.
You have a really relaxing voice
Great topic, I think we all should start building more accessibility friendly websites for people with disabilities! And it’s good that you’re talking about this, there aren’t many good videos out there about this important topic.
In my ~5 years of web development, I've literally never heard the intent behind the header tags until now. Or maybe it was explained in my intro web dev course in university, but I was too busy trying to wrap my mind around CSS to pay attention to that part. I think I always assumed that the different numbered 's were just preset sizes for text as a starting point for styling. I'll definitely be keeping this in mind going forward, cause it makes sense. It's easy to forget when building complex, modern web apps that HTML is still just a document. The "!doctype" at the beginning of every file stands for something!
header tags are really important for SEO ranking, your only supposed to have one which google uses to define your pages overall content. you can use multiple and tags etc but they are used to define other content inside your page being the second most important content and being the third most important etc. This is how google understands how to rank your page and how well your website will rank with the keywords your using for that page.
That being said, do not pay too much mind to semantic in web apps, web apps don't need semantic HTML for the most part because web apps are not documents, those are apps, semantic HTML is for HTML pieces that are intended to be used as actual documents, for example a blog, a static website of a company, a news site, a post in a forum, etc. But nobody expects google docs or google drive to have semantic HTML, because those are not documents but applications, web apps so to speak so they don't need to be semantic documents because they are not documents, even if using a platform that was intended for documents like the web.
There are muddy waters where you have a web app that is also kind of a webpage like youtube, where it is good to still use semantical HTML to some extent but is not that critical.
A newspaper or a blog should have near perfect implementations of semantic HTML in contrast, after all articles are documents. And infosites should do as well, after all those infosites are nothing more than a bunch of informational documents with a form or two. A forum should try to be semantic as much as possible, but can be forgiven if it is not perfectly semantical.
I think it depends, just put your page in scale where one end is a blog article and the other end is google docs, or so to speak where one end is web page and the other is web app, and see where in that range your web stands, that will tell you how much you should care about semantics
After I got dinged for accessibility issues doing a Frontend Mentor challenge, this video really helped. LOL
we definitely need more videos about semantics in HTML
Yes, please do more videos on accessibility, please.
Thank you Kevin, I would love some more accessibility videos 😁. Do chrome devtools not support this feature? I've tried several extensions but none of them works, and I can't afford to use Polypane 😛.
Good points there and good solutions.
Go full on with the accessibility, Kevin! :) Semantic HTML is why I love HTML, and accessibility just gives me even more purpose to the task of convincing every web developer I know to adopt web standards, semantics and WAI/ARIA/Section 508 into their daily routines.
Great video! It would be great to get a video that dives deeper into accessibility.
Watched & subscribed following recommendation from The Admin Bar, thank you for presenting this in a simple way to understand! I am guilty of creating h5’s and h6’s that look like h3’s and using them for styling 🤭
Also thank you for getting straight into it and not having a time sucking intro 👏
Btw would it then make sense when building custom post loops that the post header is always an h3, as it would likely come under an h2?
This was an incredibly interesting video......
You know… you covering this so well and in the context of the outline schema of any given html document - makes me feel like maybe the hgroup element shouldn’t be dropped after all! Because if someday all web authors DO start using headings correctly as you’ve exemplified here, all the sudden hgroup elements become useful for any topics that would need a true informational heading and a subhead. The element would allow strategic grouping that wouldn’t throw the outline off.
Granted that extent of outlining is usually only needed for heavy duty content and even textbook content and stuff… but still… the hgroup could easily be used by assistive devices to group and communicate that slightly additional contextual complexity to end users, if the outline algo was ever implemented.
I only mention this as I stumbled across the hgroup when working out some FE design systems like 2 years ago, and this vid was the first time that reading came flooding back in! Cheers and AWESOME video Kevin!!!
Great video. Unfortunately, I make all these mistakes. Will try to get better. Yes to video for other semantic tags
Great video, more videos on accessibility please, thank you 🙂
More accessibility videos please! You're amazing