Ordering your title tags

Question

I haven't found this question, feel free to close if it's already up here.

What is you favorite way to set your titles in HTML?

<h1> Main Part </h1>
<h2> In here there are many sections</h2>
<div id="section1">
  <h1> Section 1 </h1>
  <h2> Subtitle </h2>
</div>
<div id="section2">
  <h1> Section 2 </h1>
  <h2> Subtitle </h2>
</div>

OR

<h1> Main Part </h1>
<h2> In here there are many sections</h2>
<div id="section1">
  <h3> Section 1 </h3>
  <h4> Subtitle </h4>
</div>
<div id="section2">
  <h3> Section 2 </h3>
  <h4> Subtitle </h4>
</div>

... meaning ordering from top, or starting from H1 in every part of the page that is a different section (/container/sidebar/whatever).

There are also other pratices out there. So which one do you prefer? Do you do it even differently, and if so, how? Is there a best practice out there? Is this impacting SEO? Which one is the most semantic?

---

Edit: It seems that people here agree on the second solution. This is my opinion as well, but here is the problem that lead me to this question: what if I want to put a h3 in the main part?

<h1> Main Part </h1>
<h2> In here there are many sections</h2>
<h3> Something else </h3>
<div id="section1">
  <h3> Section 1 </h3>
  <h4> Subtitle </h4>
</div>
<div id="section2">
  <h3> Section 2 </h3>
  <h4> Subtitle </h4>
</div>

Do I have to rewrite all the sections? This could be an entire website! It's often pretty hard to know exactly how many subtitles you will have in a section.

Keep in mind that the sections could be sidebars or something looking totally different and somewhere else on the page.

Answer 1

I believe you should only have one H1 element per document, but I'm not sure if this is a rule. However, it is something that I tend to follow.

Thus, I vote for the second example you provided, it is more logical to have multiple H3/H4, etc. elements than multiple H1 elements. This implies the hierarchy that you're trying to convey in a better manner.

Answer 2

The main reason I would tend to use the h1-h4 approach rather than h1-h2, h1-h2 style is that I gain more control over formatting in CSS. If you want H1 and H3 to look the same, just style them that way.

Your HTML should reflect the structure of the document, and it appears you mean for H3 and H4 to be subtopics to the higher levels. So code it that way... and use CSS to control your actual appearance.

EDIT: You have little choice in HTML4, but with HTML5 you can use Section tags. The advantage here is that there is no information about the level of section embedded in the tag itself. Use class attributes to set your section names and you can insert a new level easily by defining the new class attribute (and perhaps redoing the CSS that goes with the various section classes).

Alternatively (staying with HTML4), consider having your content in XML or a database and then use a language with templates to generate the H tags dynamically. If you need to add a level, you can then alter your template code once.