Do html headers always have to count up from 1?

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.

---

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

---

Depents. I think some search engines think h1 is more important as h2,h3, etc. But for coding it doesn't matter.

---

I think using CSS descendents would be the recommended way. Don't worry about writing "too much" CSS. The more explicitly you define your layout using CSS, the more flexible it will be. I would use the sidebar ID as main selector.

<style>
  h1 {
    font-size: 2em;
  }

  #sidebar h1 {
    font-size: 1.1em;
  }
</style>

And define it in code as such:

<div id="sidebar">
  <h1><!-- sidebar H1--></h1>
</div>
<h1>Page Title</h1>

Additionally, I recommend using h1 only once for accessibility reasons, using it only for the title of the main content. Similarly, use h2-h6 only for content subheadings. (See WAI-ARIA roles for menu-specific markup).

---

You could use list and then use classes to format them in CSS, even though that would also not be very semantic:

<ul>
  <li class="level1">Level 1</li>
  <li class="level2">Level 2</li>
</ul>

<style>
  .level1 { font-size: 1.2em; }
  .level2 { font-size: 0.8em; }
</style> 

Paragraph tags may be more semantic:

<p class="level1">Level 1</p>
<p class="level2">Level 2</p>

<style>
  .level1 { font-size: 1.2em; }
  .level2 { font-size: 0.8em; } 
</style>