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

Specific header sections should have equal weight throughout the page. If something is an h2 in the left column and something is an h2 in the right column, those two elements should be of equal weight. So it doesn't matter where it is or what section div it's in, just how important it is semantically.

I also prefer to only have a single h1. As far as SEO, specific header tags aren't as important as it used to be.

Answer 3

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.

Answer 4

I think a good way to look at it is just like if you had an outline made for your document.

A. Main Part
1. Many sections
a. Section 1
1a. Subtitle
b. Section 2
1b. Subtitle

Each item in the outline is going to have a different level of importance and more important things should be more noticeable. So when it comes to giving headers they should make sense and each level of importance should have their own header size. Thats why I like your second answer better. With giving each type of title its own header size it will allow for a cleaner look and allow for a continuous style. This will also make it easier for the reader.