I'm talking about proper semantic mark-up.
I know normally there's no reason not to start at h1 and work your way down from there.
But, if I am building something like a sidebar that has its own somewhat separate hierarchy, what is the best practice? I know I could start at h1 and use css rules to distinguish sidebar h1 from main h1, but if I start instead at h3, there might be a better chance that I don't have to write as much css because it would match up directly, or at least closer, to the main h3.
At the same time, that is not strictly semantic, is it?
Is there a best practice here? (I'm primarily concerned with what looks best to a screen-reader)
Some people think it's bad practice to skip heading levels. This view is so prevalent that it's actually mentioned in the HTML 4.01 spec (see green text). But the spec doesn't say you shouldn't skip levels.
In fact, the HTML5 spec even contains an example where all the headings are <h1>
, distinguished from one another using the new <section>
tag. That would have looked crazy a few years ago.
I still consider it good practice to have at least one <h1>
with the article title in it. But the sidebar usually doesn't need any specific level of headings. Nobody cares -- not even search engines -- whether you start from <h1>
or <h4>
in a sidebar. Just make sure there's some sense of hierarchy, to help people with screen readers. Other than that, do whatever the heck you want to do.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With