The HTML even seasoned devs get wrong

[zapptuff]

Very good to see you talking about this - correct heading use is so useful for folks using screen readers!

[ragtop]

It's out of laziness. I know because I'm guilty of it myself. The way most browsers render <h> tags is horrendous. That means normalizing the style with CSS, which means more work. Albeit, a few of seconds of work at most.

[wlockuz]

Meanwhile me: <div class="h1"></div>

[Turabbo]

I maintain an enterprise UI framework, so we don't really have blog-style content.

So to help with this I've recently stripped back the size styling for most H tags.

H1 is super big and stylised, so you can only realistically use it as your page title. But every H after that is about 1.5rem

They still have the heading font and colour, just not the size. Seems to be helping so far 🙂

[CarlosBallena]

I was expecting the debate of should my logo/site name be the h1 of the page for a second. 😂

[MizManFryingP]

The confusion starts when you are making a web app and not a blog where not everything is like a document. Headings for the hamburger menu items for example or headings for footer notes. There are many places where this doesn't necessarily make sense and just using a <p> or <span> tag for it feels off (but maybe right?)

[jkevinparker]

Absolutely correct. I’ve been trying to get this across to people for almost 2 decades now! 😅

[Ryan-xqkl]

I like to set my headers per section so that I dont confuse myself when working with too many different font styles within nested divs

[pokefreak]

It's surprising to me that mainstream editors don't provide static analysis for these kinds of semantic html problems. Any idea why?

[howling-wolf]

So normally I should only use 1 h1 per page as the title?

[andrewmcmaster]

Yes thank you. I’ve been reading about accessibility lately and it is something that is missed a lot!

[oliver]

Actually it works just like markdown!
Btw love your T-shirt

[sltho]

Separation of concerns! Html is for structure, css is for styling, and js is for functionality! I am learning through 100devs and your channel is awesome! Thanks!

[natoisnazi]

And I even made an ID for h tags for font sizes 😂

I'M DONE!😂

[SerenityForschen]

Currently working on fixing my new employer's website to correct this exact problem. They used h2 where h1 should have been and the rest is just a mess.

[julioherrera]

Yes. Maybe, Google's SEO approach is responsible for this because its Search Engine looks into these heading tags for indexing pages and makes your page more able to be shown at first in the resulting search as long as your heading tags have relevant information. So, sometimes developers end up using heading tags for a different purpose for which they were created.

[nigistbinyam]

Thanks I am student front and back
web development what is your advice

[joshcv]

I’m surprised to hear seasoned devs get this wrong lol

[vintprox]

Kevin, I would appreciate it if you covered the long-standing debate of section+h1 vs. level headings? What's the state of it in 2022? I remember reading about it year ago, to no resolution.

[kosmar]

what about each block element can actually haz its own structure restarting with h1?