Login/Register
Why does the HTML5 header element require a h tag?
Asked Answered
Solved htmlsemantic-markupseo
P

3

8

According to HTML5Doctor.com and other HTML5 introductory sites, the header element should contain a h1-h6 tag plus other navigational or introductory content. However, the traditional 'header' on most websites consists of just a logo and some navigational elements.

A lot of major sites including Facebook and Twitter use a h1 tag for their logo, which seems illogical to me, since the logo is not the most important or most informative element on the page.

A h1 tag appears in the content section of 95% of websites, not the header section. So why are we instructed to include a h tag in the header? If we must, why don't Facebook and Twitter use a h6 tag instead?

Plump answered 17/10, 2011 at 15:59 Comment(0)
V
10

You should take a look at the outline algorithm for HTML5.

You probably want your site title/logo to be a h1.

Imagine a small webpage, consisting of a page header (logo, site name, …), a site navigation and a blog entry (main content of this page):

<body>
 <!-- not using sectioning elements, for the sake of the example -->

 <header>ACME Inc.</header>

 <div class="navigation">
  <ul>…</ul>
 </div>

 <div class="content">
  <h1>Lorem Ipsum</h1>
  <p>…</p>
 </div>

</body>

Here the only heading is the h1 inside the div. Semantically this would mean, that all content of this page is in the scope of this heading. See the outline of this page:

  1. Lorem Ipsum

But this would not be true (in the semantic way): hierarchically, the page header "ACME Inc." is not "part" of the blog entry. Same goes for the navigation; it's a site navigation, not navigation for "Lorem Ipsum".

So the site header and the site navigation need a heading. Let's try to give them a h1, too:

<body>
 <!-- not using sectioning elements, for the sake of the example -->

 <header>
  <h1>ACME Inc.</h1>
 </header>

 <div class="navigation">
  <h1>Site navigation</h1>
  <ul>…</ul>
 </div>

 <div class="content">
  <h1>Lorem Ipsum</h1>
  <p>…</p>
 </div>

</body>

Way better! The page outline now looks like:

  1. ACME Inc.
  2. Site navigation
  3. Lorem Ipsum

But it's still not perfect: they are all on the same level, but "ACME Inc." is what makes all the webpages to form a website, it's the whole point why there are webpages at all. The navigation and the blog entry are parts of "ACME Inc.", which represents the company and the website itself.

So we should go and change the navigation and blog entry headings from h1 to h2:

<body>
 <!-- not using sectioning elements, for the sake of the example -->

 <header>
  <h1>ACME Inc.</h1>
 </header>

 <div class="navigation">
  <h2>Site navigation</h2>
  <ul>…</ul>
 </div>

 <div class="content">
  <h2>Lorem Ipsum</h2
  <p>…</p>
 </div>

</body>

Now we have this outline:

  1. ACME Inc.
    1. Site navigation
    2. Lorem Ipsum

And this is exactly what the content of the example webpage means. (By the way, this would work in HTML 4.01, too.)

As explained in the link, HTML5 gives us sectioning elements, which play an important role for the outline (instead of div, which doesn't influence the outline) We should use them:

<body>

 <header>
  <h1>ACME Inc.</h1>
 </header>

 <nav>
  <h2>Site navigation</h2>
  <ul>…</ul>
 </nav>

 <article>
  <h2>Lorem Ipsum</h2
  <p>…</p>
 </article>

</body>

The outline stays the same. We could even change the h2 (inside of the nav and the article) back to h1, the outline would stay the same, too.

If you don't want an "explicit" heading for the navigation, you are free to remove it: the outline stays the same (now with an implicit/"unnamed" heading for the nav). Each section has a heading, whether you add it or not.

You could even change the h1 inside the header to h6 and it wouldn't change the outline. You can think of this heading as the "heading of the body".

Additional notes

  • The header element is not needed in these examples. I only added it because you mentioned it in your question.
  • If you want to use a logo instead of a textual name ("ACME Inc."), you should still use a h1 and add the img as a child. The value of the alt attribute should give the name then.
  • The top level heading doesn't have to be "the most important or most informative element on the page". This is not what headings are used for. They give the structure/outline and "label" their scoped content. In this example, you could assume that the article (with its heading inside) is the most important content.
  • If you use the sectioning elements everytime whend needed, you don't need h2…h6 anymore (but you are free to use them, for clarity or backwards compatibility).
  • You can play around and test some markup constructs with the HTML Outliner: http://gsnedders.html5.org/outliner/ (it had some unfixed bugs) the HTML5 Outliner.
Valentine answered 11/8, 2012 at 14:26 Comment(3)
what should i be doing? im not sure why i find all of this so confusing. the structure of my page is as follows: <body><header><h1><img id='logo'/></h1><nav><a></a><a></a><a></a></nav></header>. to my understanding i could reuse <h1> in the <nav> explicit section. however, MDN suggests you should never use more than one <h1>, yet all of the <a></a> elements in the site navigation are on equal footing in my eyes? MDN's example was to use <h2><a></a></h2><h2><a></a></h2><h2><a></a></h2>. is this correct and can you please elaborate a little more? – Damle
@Anthony: This sounds like a separate issue, and should be asked in its own question. In short, the single links in a nav must not be parts of a heading; the whole nav can get one heading (or multiple headings, if there is some kind of structure in the nav), if you prefer -- it can be a h1, but it’s (mostly for backwards compatibility) better to use the heading of the calculated rank, i.e., a h2 in this case. – Valentine
you should probably change the first link from the W3C standard to the HTML Living Standard -> Headings and Outlines (this is what browsers implement as they have no intention of ever implementing the HTML 5 heading outline algorithm.) – Fuzzy
A
1

Don't get confused by "should" contain and "must" contain. You aren't required to have anything inside the header you don't want but the 'semantic' purpose of the header is that is where you should look for and place such things, at the head of a document. Just as you would look for the title or introduction or table of contents at the top of a printed page.

Amylopectin answered 17/10, 2011 at 17:21 Comment(2)
But I would NEVER look for the title of a web page in the header. I don't believe anyone would, ever. The h1 is always in the content section. The header contains the logo, taglines and navigation. – Plump
@Moppy - Then you need to read the W3C spec where they do exactly that: dev.w3.org/html5/spec-author-view/… – Amylopectin
D
0

This is a flexible but important concept for SEO and basic HTML programming. While there is some room for wiggling through this standard, it will not make or break your site.

For example, you mention Facebook has the logo instead of an H1 in their header. This is half true as they have their header within a pair of h1 tags, making it function essentially the same as any other H1 text might:

<h1><a href="https://www.facebook.com/" title="Go to Facebook Home"><i class="fb_logo img sp_-NykExE5Q03 sx_a7f409"><u>Facebook logo</u></i></a></h1>

Again, not exactly ideal, but they are Facebook and can do what they want. You on the other hand might want to be more mindful of these best practices when building out a site.

Deflower answered 21/4, 2015 at 16:7 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.