Question

I have got just a quick question regarding the header hierarchy when using HTML5 and especially sections. I am asking from a SEO point of view.

At this moment my markup looks like this:

<article>

<header><h1>Article Header</h1></header>
<!-- Bla bla -->
<section>
<header><h1>Article section 1</h1></header>
<!-- Bla bla -->
</section>

<section>
<header><h1>Article section 2</h1></header>
<!-- Bla bla -->
<h2>Article section 2 Sub 1</h2>
<!-- Bla bla -->
</section>

<section>
<header><h1>Article section 3</h1></header>
<!-- Bla bla -->
</section>

</article>

The questions I am asking is about <h1>Article section 2</h1> and <h1>Article section 3</h1> and the code in-between.

Its outline is as expected:

hmtl5 outline http://i51.tinypic.com/34pi1hk.jpg

But when looking at the site without css, I am seeing this:

As you can see in the second picture it seems that <h2>Article section 2 Sub 1</h2> is given more “importance”, although it is just a h2 of another subsection (just like displayed in the outline).

Now I am wondering if I can safely ignore this, or does Google probably also think that <h2>Article section 2 Sub 1</h2> is more important than the previous and next h1 titles? Obviously, I want to make sure that <h2>Article section 2 Sub 1</h2> is given less importance than the previous and next h1 titles.

I hope I was able to explain what I am trying to figure out!

Answer 1

Firstly, HTML5 is backward-compatible with HTML4.

• You can use old style h2+ tags
• Or just sectioning contents and the h1 tag only
• Or both, in the same page!

but default style is firstly made to maintain backward compatibility with older pages,
then to implement html5-sectioning’s default style

• Your code is not wrong, you just need to reset the style.

I’m pretty sure about this because I’ve read some discussions on mozilla’s bugzilla

Hope this helps!