How to use H tags correctly?

Question

I'm looking at my template now, and I see a problem. Although, I'm not too advanced, so here I am, asking if I'm seeing a problem when there isn't one:

Homepage contains:

15 H1 tags, one for each post header.

0 H2 tags.

3 H3 tags, for the widget titles.

8 H4 tags, for widget contents.

0 H5 tags.

0 H6 tags.

Same goes for a single page, except it contains 1 H1 tag.

So I'm seeing a problem because there is no H2 tags, there is H3 and H4 tags, and then no H5 and H6 tags.

Answer 1

What I would for for your homepage :

• 1 H1 tags, title of the website.
• XX H2 tags, one for each post header.
• XX H2 tags, for the widget titles.
• XX H2 tags, for widget contents.

You have to use H3 for content directly related to the previous H2 in the page. The inferior title tags must used when a semantic relationship exists between, eg :

h1 : 10 cars I love
p : intro

h2 : Audi A5 (the first car)
p : some text about the audi

h3 : the speed of the A5
p : some text about the speed of the audi A5
h3 : another thing I love about the A5
p : text about this....

h2 : second car I love
same structure as the Audi A5 part

This way, you have a relationship between every title tags and the immediate following title level.

For your homepage, the different titles seems totally unrelated, thus you should use H2 only for them.

Answer 2

You should only have one h1 per HTML document.

But h2, h3, h4, h5 you can use at will.

But following a hierarchy. So, try to not skip a level.