Login/Register
HTML 5 Document Outlining Algorithm
Asked Answered
Solved htmlsemantic-markuphtml-heading
C

1

5

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?

Crossstaff answered 20/5, 2014 at 9:47 Comment(0)
P
5

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.

Poliard answered 20/5, 2014 at 12:42 Comment(4)
And what is that h1(site title)? Is that really <site> title or <page> title (according to uniqueness between different pages)? – Weeny
@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. – Poliard
Then you will end up with multiple pages havig similar h1 s (which is wrong in SEO) – Weeny
@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 <title> (next to the site name), and it’s the most prominently styled heading on the page. – Poliard

© 2022 - 2024 — McMap. All rights reserved.