How to properly use h1 in HTML5

Question

Which of the following is the correct way to structure a page:

1) h1 only in header

    <         


        

Answer 1

I would recommend using h1 throughout. Forget about h2 through h6.

Back in HTML4, the 6 heading levels were used to implicitly define the sections. For example,

This is a top-level heading
some content here
This is the heading of a subsection
content in the subsection
Another subsection begins here
content
another top-level heading

Now with the section element, you can explicitly define the sections rather than having to rely on the implicit sections created by your browser reading the different heading levels. A browser equipped with HTML5 knows that everything inside a section element gets "demoted" by one level in the doc outline. So for example a section > h1 is semantically treated like an h2, a section > section > h1 is like an h3, etc.

What's confusing is that browsers STILL create implicit sections based on the h2–h6 heading levels, yet the h2–h6 elements don't change their styles. That means that an h2, no matter how many sections it is nested in, will still appear like an h2 (at least in Webkit). This would be confusing if your h2 was supposed to be, say, a level-4 heading.

Mixing h2–h6 with section leads to very unexpected results. Just stick with h1 only, and use section to create explicit sections.

    
This is a top-level heading
    
you may optionally wrap this p and the h1 above it inside a header element.
     the header element doesn't affect the doc outline.
     the section element does, however.


    
even though this is an h1, the browser "treats it" like an h2
        because it's inside an explicit section.
        (it got demoted).
    
content in the subsection


    
Another subsection begins here, also treated like an h2
    
content
    
This is misleading. it is semantically treated like an h3.
    
that is because after an h1, an h2 is demoted one level. the h1 above is
        already a "level 2" heading, so this h2 becomes a "level 3" heading.
    

        
just do this instead.
        
it is treated like an h3 because it's in a section within a section.
            (It got demoted twice.)
    

another top-level heading

---

Furthermore, you may use the

element. This element contains only information specific to the page, and should not include content that is repeated site-wide, such as navigation links, site headers/footers, etc. There may be only one

element present in the . So your solution may be as simple as this:

    
Site title
    
...


    
Page title
    
page content