deb deb - 24 days ago 12
HTML Question

How to properly use h1 in HTML5

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.

Rob Rob
Answer

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.

Comments