Which of the following is the correct way to structure a page:
1) h1
only in header
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h2>Page title</h2>
</section>
If I use h1
exclusively inside header
as the site's title, every page will have the same content for the h1
tag. That doesn't seem very informative.
2) h1
in header
and section
, for both site and page title
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>
I've also seen examples of using h1
more than once, in both header
and section
tags. However, isn't it wrong to have two titles for the same page? This example shows multiple header and h1
tags http://orderedlist.com/resources/html-css/structural-tags-in-html5/
3) h1
only in section
, emphasizing the page title
<header>
<p>Site title</p>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>
Lastly, W3 seems to recommend using h1
within the main section
element, does that mean I shouldn't use it in the header
element?
Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.
As I state in my comment and you quote in the W3C, h1 is a heading and not a title. Each sectioning element can have its own heading element(s). You cannot think of h1 as being the title of a page only but as the heading of that particular section of the page. Just like the front page of a newspaper, each article can have its own heading (or title).