Menu
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
267
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>
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
