nav element with no heading -- document outline

Question

This question has to do with document outline structure as it relates to headers within the <nav> element. It is not a question about validation.

When I validate one of the pages for my web app, and check the field that says "document outline" the outline includes this:

[nav element with no heading]

I don't want to add a heading to my nav element because it will seem extraneous, to the consumer of the app, in the context of my nav (it's a nav element for pagination of a sub-section of the page); but I do want to have a well structured document outline.

So my question is multi-part:

• Why is the outline including this?
• What is the proper way to add a heading to a nav element?
• Is it necessary to add a heading to a nav element? because it doesn't seem like a common practice on most websites.

Corbitt

Please post your code, also, what document type are you validating against? – Greening

possible duplicate of w3c html validation error - Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections – Caia

It is not a duplicate question, the question you're linking is about validation warnings. My question is about document outline structure. – Corbitt

Answer 1

This is because the nav element is defined within the Sections section of the HTML5 specification and sections are expected to have headings.

As for the document outline:

The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. A section is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested sections.

— 4.3.10.1 Creating an outline - HTML5 Specification

Note the word can - they aren't required. If they were required, the validator would be throwing warnings and errors, not somewhat-friendly notes to remind you that a heading is missing.

---

So to answer your questions:

Why is the outline including this?

It's just a friendly reminder that a heading isn't present. Just in case you were expecting a heading to be present but you'd forgotten to add one, for instance.

What is the proper way to add a heading to a nav element?

That entirely depends on what you're wanting to achieve. The HTML5 specification itself gives the following example:

<nav>
  <h1>Navigation</h1>
  <ul>...</ul>
</nav>

Is it necessary to add a heading to a nav element? because it doesn't seem like a common practice on most websites.

Not at all. It's entirely optional. Some may argue that it'd be good for SEO purposes to add a heading to all sections, but that's entirely up to you. You can always hide the heading with CSS if you do want to add them but don't want to display them.

Manure

Thanks @James Donnelly – Corbitt

according to the proposed example of adding a heading to nav element, the page goes with two h1 headings and it has a negative impact on SEO. Could you please explain this in your answer? (Even if you change this into h2 the problem with logical structure of heading exists) – Circumlunar

Answer 2

• The nav element is a sectioning element, much like body, article, section and aside. Every section is expected, though not required, to have a heading.
• The proper way is with an h1, h2, ... element, just as with any other sectioning element.
• No, it's not necessary to do so. If you're really concerned about the outline, you can always add one and hide it using CSS, but there is nothing wrong with leaving out the heading altogether.

The outline that's produced by a document has no effect on validation. A document can validate as HTML5 while producing a completely different outline than the author might expect. But in the context of validation, headings are never required by any sectioning element.

Clientele

Answer 3

It is not a HTML conformance error to have a nav element without a heading. The outline view provided in the conformance checker is purely informative.

Shamrock

Answer 4

@james-donnelly's answer is spot on. Just wanted to add that I typically do something like this:

<nav>
    <h1 class="v-h">Site Navigation</h1>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</nav>

And then in my CSS, the v-h class is defined as:

.v-h {
    position: absolute !important;
    height: 1px; width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

This makes the header invisible in the rendered HTML content, but allows screen readers to 'see' the content.

references: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

Somali

And what do you do with two h1 s in your page? (one Site Navigation & one main heading of page) – Circumlunar

@Pmpr not sure what you mean. You can re-use the class as many times as you'd like, although I don't imagine that you want to visually hide both of the headers you mention. I assume you would not want to hide the main heading of the page, so you'd not apply the .v-h heading to your main page heading. – Somali

Hiding and using that class is not important to me. Using your soltion means you have 2 h1 s in your page which is wrong – Circumlunar

@Pmpr Having 2 h1 elements in your page is NOT wrong. Having 2 H1 elements in the same root or content section is "wrong" (e.g,, invalid HTML). Refer to this article for more information about multiple H1 elements in an HTML document (This is not the only article out there that explains this, but it's a fairly decent write-up). – Somali