The h1 in the structure of a page

Question

(I am not sure if this is the right place to ask this question, if not please suggest the appropriate forum)

I have a very simple structure in the page:

<nav>
<h2>Menu</h2>
<ul>
    <li>first</li>
    <li>second</li>
</ul>
</nav>

<h1>This is the h1</h1>
<p>This is a paragraph</p>

<h2>This is the h2</h2>
<p>This is a paragraph</p>

I use a Chrome extension "HTML5 Outliner" to check if the structure of the page is correct. To my surprise this is what it gives me:

1- Untitled BODY
    1- Menu
2- This is the h1
    1- This is the h2

I think the problem is that, in the code above, I put the nav before the h1. If I put the h1 first, "HTML5 Outliner" gives me the structure of the page that I really want:

1- This is the h1
    1- Menu
    2- This is the h2

In the design of my page (as in many others) it makes more sense to put the nav first and then the h1.

My questions are:
1- Is the structure that I give here correct?
2- Is the problem with that extension that does not work well? if so, can anyone recommend me another good way to check the structure-outline of the pages of my site?

score 2 · Answer 1 · answered May 06 '15 at 13:52

2

What you can do is structure your html accordingly:

Header
Main (Note: there can only be one main element on the page)
Footer

<header>
    <nav>
        <h2>Menu</h2>
        <ul>
            <li>first</li>
            <li>second</li>
        </ul>
    </nav>
</header>

<main>
    <h1>This is the h1</h1>
    <p>This is a paragraph</p>

    <h2>This is the h2</h2>
    <p>This is a paragraph</p>
</main>

<footer>
    <!-- Optional footer stuff -->
</footer>

answered May 06 '15 at 13:52

Richard de Wit

7,102
7
44
54

The nav in the header, are you sure? – Nrc May 06 '15 at 14:31
Then the h1, the only h1, is not in the header?. Sorry, I am just learning and I am confused – Nrc May 06 '15 at 14:49

score 1 · Accepted Answer · answered May 06 '15 at 13:52

1

The <h1> can be after other headlines, if the document structure need it. In this case I don't think you need to have there <h2>Menu</h2> - everyone see that the block of links is menu. If not, try to work on UX.

Remember that no automatic code checker/validator can't tell if code is good or bad. This plugin can just recommend something, but the headline structure isn't strictly defined. You can use order what you need, you can miss and headline levels, etc.

answered May 06 '15 at 13:52

pavel

26,538
10
45
61

So do you think that structure is ok? And I should have a clear structure and I do not have to worry about that extension or any other tool too much. Is that right? – Nrc May 06 '15 at 15:01
@Nrc: i said it isn't bad and you don't care about browser extensions. – pavel May 06 '15 at 17:54

The h1 in the structure of a page

2 Answers2