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)
Disregard CSS and styling when you are thinking about headers. It is completely down to the importance of the heading in your page.
Personally I would start a sidebar heading at about h3
at the most, some even start at h5
. The weight of the heading in your document should determine the respective level. For example a fairly unimportant header "Navigation" should not be a h1
.
To Google and other search engines, if both "Navigation" and "My Amazing title" are h1
s they are equally important, which is semantically not the case.
Once you have determined the semantic level of you headings, you can dive in and style them with CSS in order to get the size which you deem correct for your design. They really should have made the default font size the same for all headings for the sake of developers getting the wrong impression.