Search code examples
htmlsemantic-markup

Does the h1 need to be the first semantic element in a header tag?


I am using a Chrome outliner extension to check the semantics of my page. It seems to be a problem to have any structural element before the h1 in the document main header tag. I was thinking the order does not matter, but apparently it does:

+Document Body
  +Header
    +nav
      +h1 Main Navigation
    +h1 MyPage
  -Section
  -Footer

Does outline like this:

Untitled Body
  Main Navigation
  MyPage
  etc...

But when the h1 is the first element in my header:

+Document Body
  +Header
    +h1 MyPage
    +nav
      +h1 Main Navigation
  -Section
  -Footer

it does outline like this:

MyPage
  Main Navigation
  etc...

Why is that? Is the outliner buggy, or did I understand something wrong in HTML5 semantics? The W3C Specification does not seem to mention it: http://dev.w3.org/html5/spec/Overview.html#the-header-element


Solution

  • After revisiting the specs, I agree that the h1 does not have to be the first element. I suspect the issue is with the chrome extension you are using.

    I ran the following two scenarios through this HTML outlining tool and received the same results (My Navigation appears under My Header):

    With h1 second element under header:

    <body>
    <header>
    <h1>My Header</h1>
    <nav><h1>My Navigation</h1></nav>
    </header>
    <section><h1>My Section</h1></section>
    <footer></footer>
    </body>
    

    With H1 first element under header:

    <body>
    <header>
    <nav><h1>My Navigation</h1></nav>
    <h1>My Header</h1>
    </header>
    <section><h1>My Section</h1></section>
    <footer></footer>
    </body>