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.

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.