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.