How to properly use h1 in HTML5
Solution 1
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.
Solution 2
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,
<body>
<h1>This is a top-level heading</h1>
<p>some content here</p>
<h2>This is the heading of a subsection</h2>
<p>content in the subsection</p>
<h2>Another subsection begins here</h2>
<p>content</p>
<h1>another top-level heading</h1>
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.
<body>
<!-- optional --><header>
<h1>This is a top-level heading</h1>
<p>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.</p>
<!-- optional --></header>
<section>
<h1>even though this is an h1, the browser "treats it" like an h2
because it's inside an explicit section.
(it got demoted).</h1>
<p>content in the subsection</p>
</section>
<section>
<h1>Another subsection begins here, also treated like an h2</h1>
<p>content</p>
<h2>This is misleading. it is semantically treated like an h3.</h2>
<p>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.</p>
<section>
<h1>just do this instead.</h1>
<p>it is treated like an h3 because it's in a section within a section.
(It got demoted twice.)</p>
</section>
</section>
<h1>another top-level heading</h1>
Furthermore, you may use the <main>
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 <main>
element present in the <body>
. So your solution may be as simple as this:
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<main>
<h1>Page title</h1>
<p>page content</p>
</main>
Solution 3
However, don't forget accessibility concerns. According to MDN, "there are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents." That means that a screen reader might not be able to figure out the relative importance of sections with only <h1>
. It might need more heading levels, such as <h2>
and <h3>
.
Related videos on Youtube
deb
Updated on July 05, 2022Comments
-
deb almost 2 years
Which of the following is the correct way to structure a page:
1)
h1
only inheader
<header> <h1>Site title</h1> <nav>...</nav> </header> <section> <h2>Page title</h2> </section>
If I use
h1
exclusively insideheader
as the site's title, every page will have the same content for theh1
tag. That doesn't seem very informative.
2)
h1
inheader
andsection
, 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 bothheader
andsection
tags. However, isn't it wrong to have two titles for the same page? This example shows multiple header andh1
tags http://orderedlist.com/resources/html-css/structural-tags-in-html5/
3)
h1
only insection
, 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 mainsection
element, does that mean I shouldn't use it in theheader
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.
-
Michael Jasper almost 13 yearsAn interesting on topic read: iheni.com/html-5-to-the-h1-debate-rescue
-
-
deb almost 13 yearsGot it. So it's ok to use h1 more than once in HTML5. From the article, 'In HTML 5 you can specifically mark up all the “secondary” content on a page such as navigation, branding, copyright notices', what is the correct markup for branding (logo + site title)?
-
Rob almost 13 yearsThe most logical would be the header element, as you have chosen. It's the introduction to any section and, in your case, the whole page. Inside that you can group things with divs, navs, hgroups and so on, or just leave images as they are, an element unto themselves.
-
tenub almost 10 years@Rob: my question is, "What defines a 'sectioning element'? Does it have to be an actual
<section>
,<article>
, or other html5 element or can it be something like a<div>
with asection
orcallout
class?". -
Rob almost 10 years@tenub article, aside, nav and section are the only elements that are sectioning elements. You can read all about it here: developers.whatwg.org/content-models.html#sectioning-content-0
-
Rob over 8 yearsI've changed my mind. After re-reading what you wrote, I understand the point you are trying to make but feel your writing is confusing; such as the point about demotion of hx elements which, if taken literally, is wrong but in the context of the outline, I can see where you're coming from.
-
Mikko Rantalainen about 7 yearsNote that you cannot nest <main> inside <article>. Logically it would make sense to mark main content of each article (e.g. main content of each blog entry when the whole HTML document contains rendering of multiple blog entries) but this is not allowed by the spec.
-
swhitmore over 4 yearsSo if our focus is accessibility over SEO is the outline algorithm and @chharvey's answer moot? Should we use OP's scenario #1 where h1 is only the site title and all page titles be h2?
-
Michael McGinnis over 4 yearsNot exactly. I agree with Adrian Roselli, who says to use a single <h1> per page, like a page title not a site title. So it would be the same content as the <title> tag, excluding the site name, marketing tagline, etc. The document outline algorithm still has not been implemented in any browser. For section headings, I use h2. An h1 is a a top-level heading no matter where you nest it.