Home/ Questions/Q 8406613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T23:09:25+00:00

According to HTML5Doctor.com and other HTML5 introductory sites, the header element should contain a

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.
    • 0