CODEWITHSUNDEEP
htmlsemantic-markup
meo
meo

Reputation: 31249

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

Upvotes: 9

Views: 5287

Answers (3)

ryankeairns
ryankeairns

Reputation: 808

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>

Upvotes: 7

Andres I Perez
Andres I Perez

Reputation: 75379

Why are you defining another <h1> tag outside of your title of your page? The outliner is picking up two contending titles for your page and is probably why is being thrown off. Semantically speaking, the main title of a page can exist anywhere inside your <header> section of your page as long as its unique and defines your main title, though that is not an exclusive property of the <header> section or the <h1> tag (and opinions vary to that description but it is more sound). Proper outline is defined here http://www.w3.org/TR/html5/sections.html#outline.

You can write your main heading section using any combination you want, as long as it is properly understood. So;

<header>
<nav>
<h1>Title of Page</h1>
<h2>Subtitle</h2>
</header>

Is fine, because it is properly understood what the sections of your header and title of your page are.

Here is an online outliner that you can use to test your design. Your title section should be first above everything else.

Upvotes: 2

Maurice
Maurice

Reputation: 27632

According to the specs a <header> doesn't need to start with an <h1>.

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

Upvotes: 0

Related Questions