HTML 5 Document Outlining Algorithm

Question

I am building a new site and I have recently started looking at the Document Outlining Algorithm. It states that all sections should have a header, sections include section, nav, article and body (There are probably some more too).

So, I have a couple of navigation areas and my question is; would it be wise to have a heading but just hide it from the browser?

score 4 · Accepted Answer · edited Apr 13 '17 at 12:50

4

Every sectioning content element "longs" for a heading element (h1-h6). But you are not required to provide one.

If you don’t provide a heading element for a section, this section will have an implied heading. HTML5 outline tools might display those implied headings as "Untitled section" or "Empty title".

So when you always use sectioning content elements where possible, your document outline will be correct even if you don’t provide a single heading element (of course this is not recommended; headings are very useful!).

These two documents will have the same outline hierarchy:

<!-- DOCUMENT A -->
<body>
  <article>
  </article>
  <nav>
  </nav>
</body>

<!-- DOCUMENT B -->
<body>
  <h1>site title</h1>
  <article><h1>main content title</h1></article>
  <nav><h1>navigation title</h1></nav>
</body>

Outline for DOCUMENT A       Outline for DOCUMENT B
1. untitled (body)           1. "site title" (body)
  1. untitled (article)        1. "main content title" (article)
  2. untitled (nav)            2. "navigation title" (nav)

So it’s fine to use nav without any heading. But if you think a heading might be useful for consumers without CSS support (e.g., screen reader users or search engines), you can provide a heading and hide it visually.

edited Apr 13 '17 at 12:50

Community

1
1

answered May 20 '14 at 12:42

unor

92,415
26
211
360

And what is that h1(site title)? Is that really title or title (according to uniqueness between different pages)? – Peyman Mohamadpour Apr 18 '19 at 13:12
@Trix: Site title (so it’s the same on all pages), because it would be wrong to have the site-wide navigation in scope of the article heading. – unor Apr 18 '19 at 19:34
Then you will end up with multiple pages havig similar h1 s (which is wrong in SEO) – Peyman Mohamadpour Apr 18 '19 at 19:38
@Trix: That’s no problem for SEO. It’s commonly claimed, but it comes from a time before sectioning content elements (and even then it was fine to use `h1` for the site title and `h2` for the page title). If search engines care, they can easily find the relevant heading: it’s inside `main` and/or inside `article`, and also part of the `` (next to the site name), and it’s the most prominently styled heading on the page. – unor Apr 18 '19 at 19:43

HTML 5 Document Outlining Algorithm

1 Answers1

Linked