The most common HTML mistake // The incorrect use of HTML heading levels

[@KevinPowell]

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/

[@anilkumarhansda8087]

Is this why my Markdown editor complains when I have more than 1 or no headings , thanks

[@drizzzzz]

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!

[@sebaszwarc6028]

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

[@ACharlar22]

@@sebaszwarc6028 h1 is the title of the book, h2 is the title of the chapter so yeah, is a mistake.

[@sebaszwarc6028]

@@ACharlar22 not for me

[@KevinPowell]

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 😊

[@umafly]

Oh so it wasn't my phone acting up again 😂

[@00_Andre_00]

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 🤣💯

[@JeremyWhiteford1]

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.

[@TravisHi_YT]

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.

[@nnmrts]

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.

[@KevinKipp3]

Definitely want to see more accessibility content! ☺️

[@ShawnRitch]

Absolutely !!!

[@MightyMage2]

Agree to what he said

[@renedekart5069]

> Definitely want to see more accessibility content! > But i can`t

[@sayeddileri3461]

@@renedekart5069 that was deep 🥲

[@intergalaxen]

Same!

[@peteryates308]

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.

[@JeremyWhiteford1]

I reference your site's design system quite often. It's very nice!

[@peteryates308]

@@JeremyWhiteford1 thanks. I can't take credit for the design system itself, I'm just a dev who implements it on services.

[@JeremyWhiteford1]

@@peteryates308 Well it's still nice and great that the dev team is concerned with accessibility.

[@studiosoftmorecambe6879]

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.

[@peteryates308]

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

[@Ali-lm7uw]

This was so useful, usually programmers don't talk about this.

[@andorkh]

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!

[@bushigi5913]

Thank you Kevin for not only created high quality CSS tutorial, but also HTML related one. Please make more of HTML videos!

[@sauliustb]

for someone starting out in front end dev (out of necessity: 1 dev studio) this is a great video. clear, concise, useful

[@JoppeKroon]

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.

[@n_mckean]

Skipping headings is a violation of WCAG 2.1

[@fuzzypumpkin7743]

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.

[@JoppeKroon]

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

[@JoppeKroon]

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

[@PascalHorn]

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.

[@NadirNovelties]

Simply not true. Per google: kzbin.info/www/bejne/sKrUe32OjNBjnc0&ab_channel=GoogleSearchCentral

[@PascalHorn]

@@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. ;-)

[@NadirNovelties]

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

[@PascalHorn]

​@@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 KZbin 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.

[@WillyGrippo]

30 FIFA web devs disliked this video... But seriously, another super-useful vid, and yes please do one on semantic markup! Thanks Kevin!

[@Ashanmaril]

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!

[@PlayRuin]

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.

[@diablo.the.cheater]

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

[@wattsonthetube]

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.

[@diablo.the.cheater]

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

[@dannyr2976]

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!

[@AntiAtheismIsUnstoppable]

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.

[@valentinocopec858]

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

[@joyheron5482]

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.

[@NicholasShanks]

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.

[@plamenmitev559]

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

[@sidisting1381]

"... 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.

[@timsch4101]

Yes, more accessibility content please! It's such a shame that this topic seems to often go unnoticed.

[@BunkerD]

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 ?

[@Bizarro69]

great help! I'm still learning but can only imagine how invaluable this will be when I start actually making stuff, working, etc.

[@XMattingly]

Great breakdown - these are definitely best practices _everyone_ should be using when composing HTML documents. I have to point out that what you said about H1 tags isn’t completely accurate. Multiple H1’s on a page are definitely acceptable _when they’re enclosed inside article tags._ So what you might have is the main content of a page (not necessarily within an ), and then “content snippets” for additional, related content, and that sort of thing.

[@KevinPowell]

That was part of the HTML5 spec, but no browser or screen reader implemented that version of the document outline, so we can't take advantage of it.

[@XMattingly]

​@@KevinPowell True, but it's still in the spec, and Google is on record that's multiple H1's are OK if/when it makes sense, "as long as you don't abuse them"; neither does it affect SEO. Also, Section 508's documentation does not identify any negative impact; only that 1. there needs to be numerical hierarchy, and 2. don't use them for non-heading content. So I don't think it's as much of a question of whether it can be taken advantage of (particularly since it's neither a gain or loss), as much as whether your document structure makes sense to incorporate it. And I've certainly been times where it made more sense for my project.

[@MattMcT]

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

[@JohnnieDoe183]

Frankly, anything that puts people off spending time on the FIFA website is a good thing imo 😂

[@caffeinated-pixels]

It's so fitting that the FIFA website is a top example of how not to do accessibility!

[@mentaladd]

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.

[@abielortega]

Please do more of these videos! This was super helpful to understand!

[@Stoney_Eagle]

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!

[@KevinPowell]

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.

[@Stoney_Eagle]

@@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 KZbin? 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.

[@NathanHedglin]

@@Stoney_Eagle blind doesn’t mean no sight, it means impaired sight. Same with Deaf. Some are completely dead and others have impaired hearing.

[@Stoney_Eagle]

@@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 KZbin videos instead of documentation where the words start moving around.

[@tapank415]

Yes, We need more on this.

[@ViorelMocanu]

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.

[@ClawGr]

Great Video as Usual. You should also mention this is exactly what SEO does. To most of us h1 h2 ... etc, might look like style. But search engine's crawl-bots actually figure out about what your page is about, by looking your content (from bottom to top). And they rank you for it. And in Ms-Word headings work the same way! It is worth the extra effort

[@BojanF]

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!

[@kathrinayer6402]

More a11y and HTML please!

[@nicolaskeith8872]

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.

[@ivlis.w8630]

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

[@johnrichmondrobles3911]

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.

[@evroskate]

More accessibility videos please! 🙌That was really good Kevin.

[@aevitas1]

Well this video made me decide to rewrite my entire portfolio website, I also did not know this. Thank you.

[@joawir]

Would definitely like more videos on accessibility!

[@Atran05182]

Yes, Yes and yes!! please do add more content Kevin!

[@rebelshadowrm]

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.

[@DrHappybone]

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!

[@CynthiaSotoCaballerolYEAHl]

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 🥰

[@Yous0147]

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

[@WellSaint001]

man, really appreciate the time you take to teach us about a11y! thank you!

[@akramdahmani7214]

Great topic Kevin, it'll be great to see more of it!

[@jordancutler7552]

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?

[@danatronics9039]

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.

[@talkdatrue]

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.

[@GeekBastion]

you should do more popular sites breakdowns, think this is pretty cool and useful :)

[@katorz_euh]

Really interesting! I always have a headache figuring out how to use headings, as many do. This is my new heading bible. Thank you 😀

[@daniellinzel1994]

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!

[@LordHonkInc]

There's an old XKCD comic, "If you really hate somebody, teach them to recognize bad kerning." Learning about accessibility guidelines in university and seeing them broken on way too many pages nowadays feels very reminiscent.

[@1kbean]

So valuable! Yes please more content on accessibility 🌟👍

[@Krzysiekoy]

This video is something I was looking for. Thank you, Kevin. I love the topic of semantic HTML.

[@CharlesSmall]

Thank you for the tips Kevin. You are a great teacher.

[@parrot785]

Thank you! I need more videos about HTML semantics and accessibility. I have many doubts how to structure things properly.

[@n_mckean]

Another pet peeve is the heading "AUSTRALIA & NEW ZEALAND 2023". If you want headings to take a capitalised style, it should be done with uppercase in CSS but the HTML written normally - "Australia & New Zealand 2023". Then that content pulled into any other system will read better AND if you later change your heading styles to not be in capitals, you won't have to edit the HTML to remove the capitals there, it will just change ;)

[@kilianvalkhof]

It actually won't, unfortunately. When you use CSS to uppercase it still affects the accessible name being sent to assistive technologies.

[@n_mckean]

@@kilianvalkhof I'm not referring to ssistive technologies - if you've capitalised your HTML and it pulls into anywhere else(eg. RSS feed) it will remain capitalised. If capitalised with CSS, it will only take a capitalised style when the CSS styles it so.

[@philipdratcliffe9648]

i learnt a lot from this video as with all your content, thanks kevin!

[@e0b1ff]

loved this! More accessibly and HTML structure best practices please!

[@warrenbuckley3267]

How does the rule of thumb "One H1 per page" work if your page has a tab control? So lets say on each tabbed section you have an H1, does this break that rule? On another note, I would love more videos on accessibility.

[@KevinPowell]

yup, that's till more than one h1, unless you're updating the DOM to change what's actually in there with `hidden` attributes or something else, then I'm not so sure. But really, there should be one main title, and then each tab is a "section" under that title, no?

[@alexradu1921]

You can have an h1 before that tabbed section, and in each tab you could use an h2

[@caludio]

@@KevinPowell the "one H1 per page" is a bit of a relic of the past, though. Since HTML5 and the introduction of SECTION, it's fine to use a H1 per section. I find it more elegant and consistent than "one H1 per page", unless of course Mr. Google disagrees - even though I don't think so.

[@KevinPowell]

@@caludio the HTML5 document outline was never implemented by any of the browsers. Yes, it's part of the spec, but with no browsers having implemented it, and with them publicly saying they don't plan to, the one h1 per page still stands.

[@fuzzypumpkin7743]

@@caludio It's really not excused by the intro of section. H1 is your document title (where the webpage is the document). Your document can't have 3 titles. The section headings should then be H2s. I also do some PDF compliance work, and semantic HTML is almost completely the same on a webpage or in a PDF. Bit of weirdness around list item tagging aside.

[@kamasahdickson1549]

Literally want to see more of this

[@JohnChvatalGSTV]

Yes, I’d appreciate more videos on accessibility.

[@zachjensz]

I'd like to see a video on sectioning elements!

[@marshwiggleme]

Yes please!

[@kaid3566]

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.

[@steveportas7961]

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

[@MrGuzzler]

we definitely need more videos about semantics in HTML

[@kneekoo]

Yup, I'm very interested in more videos about a11y. 😀

[@caffeinated-pixels]

Great video! So, we're not supposed to have multiple elements each with their own h1, because I've seen a few websites doing this, for example, the Netflix homepage?

[@pianochess1882]

No there should only be 1 h1 element. The sections could have h2 or higher

[@caffeinated-pixels]

@@pianochess1882 That's what I thought but I keep seeing websites and tutorials that do this!

[@KevinPowell]

That was part of the HTML5 document outline spec, which none of the browsers actually implemented

[@caffeinated-pixels]

@@KevinPowell Do you think it ever will get implemented, or has it just been completely forgotten about or abandoned?

[@aram5642]

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.

[@castlemoyle]

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.

[@ORiveraJr84]

More a11y videos would be 🔥

[@gunarcom]

More a11y please.

[@ArtyomStouch]

Hello my teacher. I am from Ukraine, thanks you for the lessons

[@didkei]

You have a really relaxing voice

[@mohsinmiyaji1801]

please do make more accessibility content! itd be great to see you make one of those "building a website" from scratch and demonstrating the proper way to type out accessibility content.

[@AmandaLucaseu]

Great video Kevin, yes would love more Accessibility videos

[@abdullahseba4375]

Great video, answered all my questions on aria stuff!

[@AnkitKumarMehta95]

I really did not know anything of this... Thank you... Plz make some more videos related to this topic

[@ckernest]

just wondering any Chrome extensions that could show the document outline as well? thanks

[@KevinPowell]

I bet there are, but I haven't used any. I think in Chrome there is a way to find it, but it's pretty hidden away.

[@TheCocoaDaddy]

Brilliant video! I really like the way you think! Thanks for posting!

[@sororbudwiser]

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.

[@J_Quinn_Creates]

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.

[@pixelinercom]

I haven't seen alot of websites that actually use html5 as it should. As you stated, headings are most likely to be misused. Sections, dd-listings, button vs hrefs, focus & hover, tabIndex (or a11y in general), basic SEO, .... You name it. What do you get as response in some big companies, that's not the priority. It shouldn't be a priority, it should be common sense, like brushing teeth. Cause fixing that later down the line, costs more money. As stupid as it sounds, such laziness, costs thousands extras (fixes, PR, useless meetings, ...).

[@catherinedesrochers]

I especially loved that video 👏. More, more, more like this!

[@VinhNguyen-ul8yg]

After I got dinged for accessibility issues doing a Frontend Mentor challenge, this video really helped. LOL

[@DanteMishima]

Absolutely would love more videos

[@brianthesewingmachinetechn9715]

Yes, please do more videos on accessibility, please.

[@mahadevovnl]

When I review job application projects I always look at semantic HTML first. Too many "frontend developers" only use DIV elements. Buttons and tags for links? Nope, all DIV tags with an onclick. It's horrendous. Instant rejection.

[@MiserableDuck95]

That's quite common when you inspect element on some react sites

[@mahadevovnl]

@@MiserableDuck95 The library/framework don't really matter, I think, I think some devs are crazy creative in their bad code :) I wish I could educate them..

[@AdamGaffney96]

I would love more on accessibility! I think the web is sadly quite unique in how it is really built to cater to disabled people from the beginning, and I'd love to learn more about the tools I can use to make my website the best it can be.

[@Shawn-Mosher]

More on accessibility please! And thank you!

[@Potatis1337]

Excellent video Kevin, thanks!

[@aciraxeroteam]

Great video as always! Do you happen to have any Chrome extension that we could use for the outline?

[@brendanleighton]

Article vs Section has always confused me. If you have a a for-dummies approach I wanna hear it! Newspapers have articles and they're grouped into sections, or newspaper articles have sections?

[@yehannk448]

is there any way of deciding between a main and a section tag , when you are making a landing page, or is it okay if section tags are used inside of main. Great video as always 👍

[@KevinPowell]

one main per page only, and then sections inside it :)

[@yehannk448]

@@KevinPowell thanks for replying 👍

[@reb569]

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.

[@mattshirlaw3092]

Unbelievably good video 👌

[@cowabungatv4159]

wow, nice video! please more higher level explanation videos!

[@nielslytzdk]

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 😛.

[@luisanamora2363]

More accessibility videos please! You're amazing

[@Mystiskem1]

Really enjoyed this video. Very informative, and quite a lot of things I didn't know, in a concise format. 👌