CODEWITHSUNDEEP
htmlw3c-validation
Jesse Greathouse
Jesse Greathouse

Reputation: 478

nav element with no heading -- document outline

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:

Upvotes: 12

Views: 8554

Answers (4)

Chris
Chris

Reputation: 143

@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

Upvotes: 6

Steve Faulkner
Steve Faulkner

Reputation: 2630

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.

Upvotes: 6

James Donnelly
James Donnelly

Reputation: 128776

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.

Upvotes: 16

BoltClock
BoltClock

Reputation: 724142

  • 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.

Upvotes: 6

Related Questions