Geek Answers Handbook

Untitled navigation item - document outline

This question is related to the structure of the document structure associated with the headers inside the <nav> element. This is not a matter of verification.

When I check one of the pages of my web application and check the box that says "document outline", the outline includes the following:

[navigation element without title]

I do not want to add a title to my nav element, because it will seem extraneous, for the consumer of the application, in the context of my nav (this is the nav element for pagination of the page subpage); but I want to have a well-structured document.

So my question is multiple:

  • Why do I need a circuit?
  • How can I add a title to the nav element?
  • Do I need to add a title to the nav element? because it’s not like the usual practice on most websites.
+5
source share
4 answers

This is because the nav element is defined in the Sections section of the HTML5 specification , and sections are expected to have headers.

Regarding the outline of the document:

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

- 4.3.10.1 Creating an outline - HTML5 specification

Note that the word may - they are not required. If they were necessary, the validator would throw warnings and errors, rather than a few friendly notes, to remind you that the title is missing.

So, to answer your questions:

Why is this circuit, including this?

This is just a friendly reminder that there is no title. Just in case, you expected the title to be present, but you, for example, forgot to add it.

What is the correct way to add a title to a nav element?

It completely depends on what you want to achieve. The HTML5 specification itself gives the following example:

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

Do I need to add a title to the nav element? because it’s not like the usual practice on most websites.

Not at all. This is completely optional. Some may argue that it would be useful for SEO to add a title to all sections, but that is entirely up to you. You can always hide the title with CSS if you want to add them, but do not want to display them.

+11
source
  • The nav element is a sectioning element , like body, article, section, and to the side. Each section, although not required, should have a title.
  • The correct way is with the h1, h2, ... element, as with any other sectioning element.
  • No, this is not necessary. If you're really concerned about the outline, you can always add it and hide it with CSS, but there is nothing wrong with completely eliminating the title.

The outline created by the document does not affect validation. A document can be validated as HTML5 when creating a completely different outline than the author might expect. But in the context of validation, headers are never required by any sectioning element.

+6
source

It is not an HTML compliance error to have a navigation element without a title. The outline representation contained in the conformity check is purely informative.

+4
source

@ james-donnelly answer to the question. Just wanted to add that I usually do something like this:

 <nav> <h1 class="vh">Site Navigation</h1> <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </nav>

And then in my CSS, the vh class is defined as:

 .vh { 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 title invisible in the displayed HTML content, but allows screen readers to "see" the content.

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

+4
source

More articles:


All Articles