How to properly use h1 in HTML5
html, semantic-markup, semantics, seo
Solution
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).
Here is a good article on this.
Problem
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.