preventing <nav> to appear as "untitled section" on html5 websites

html navigation semantics nav

19,488

Solution 1

Apparently, nav elements are untitled because they are sectioning elements.

If you must have them as titled sections in your outline, you will need to add a heading inside them.

In this instance, you could do the following...

<nav class="breadcrumbs">
    <h2>Breadcrumb navigation</h2><ol />
</nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
<nav class="main_navigation">
    <h2>Main navigation</h2><ul />
</nav>

Then hide the h2s with css.

BTW, you should probably change div to section to be more semantic... here

<section class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
</section>

Solution 2

Here is the recommended approach from w3c - as mentioned in their edx course.

BEST PRACTICE 1: In order to NOT display the heading content on screen the recommended technique is described in this article by Steve Faulkner. Do not use display:none or visibility:hidden in your CSS stylesheet, as in that case the heading content will never be vocalized by screen readers, and more generally by assistive technologies.

Example code in the article:

.offscreen
{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

<div class="offscreen">This text is hidden.</div>

Solution 3

You don't have to restrict yourself to only one h1 on the entire page, you can use as many as you want. Headers are divided by sectioning elements, each section can have its own hierarchical structure starting at h1 and on down. You can even have numerous h1s per section if you wanted, sections nested within sections each with their own independent structure. It all depends on how you want to structure your page/outline.

Also, given that you're only using 3 levels in your example, you could very easily bump your articles down to h3 or h4 to accommodate nav headers. Having a header (hidden or otherwise) is indeed the correct way to semantically title your sectioning elements.

http://html5doctor.com/outlines/ http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/

Solution 4

I created a CSS class for headings that were important only for HTML5 outlines.

h1.outline, .outline {
  display: none;
}

...then in the html

<nav>
  <h1 class="nocontent outline">--- Main Navigation ---</h1>
  <a href="/about">About Us</a>
  <a href="/products">Products</a>
  ...
</nav>

...in the outline, this shows up as

 1. --- Main Navigation ---

Edit: The "nocontent" class is important to let Google's SEO algorithms know that there is "boilerplate" content in the tag not relevant to SEO, so it does not get counted for or against your site's search engine ranking. https://support.google.com/customsearch/answer/2364585?hl=en According to the page, it's ok to combine other classes with "nocontent".

Edit: I did not do the following step on my own site, and according to Google Webmaster Tools, it was not penalized, nor did the hidden titles create any warnings or flags. However, Google's documentation recommends this final step to enable to "nocontent" class.

To enable the "nocontent" class for Google's ranking purposes, modify your site's context file:

On the Control Panel, on the left-hand menu, click Advanced.
In the Download context section, click Download in XML format.
Edit the downloaded context file cse.xml to add a new attribute enable_nocontent_tag="true" to the CustomSearchEngine tag. For example, change to .
In the Upload context section, click Upload and upload the updated cse.xml file.

This populated my navs with headings that were not visible to the user, but cleaned up the outline view and helped it make more sense.

View more solutions

19,488

All Bits Equal

"My name is Konrad Abe and I love building things." Certified & qualified IT specialist and field-tested front end web developer.

Updated on June 28, 2020

Comments

All Bits Equal almost 4 years
I'm trying to implement correct sectioning with html5 sectioning elements and headlines while achieving the design/layout, my customer has requested (including certain restrictions).

The general layout will be something like this:
```
<body>
  <header>
    <nav class="breadcrumbs"><ol /></nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
    <nav class="main_navigation"><ul /></nav>
  </header>
  <div class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
  </div>
  <footer>Footer stuff<footer>
</body>
```
What I'm concerned with now is that if I use an html5 outliner, I get the breadcrumb nav and the main nav show up as untitled sections. Following a hierarchical headline structure, I can't give them headlines below h2 and naturally I wouldn't "title" them at all and hiding a headline with css to "title" them feels wrong.

What's the best way to stay semantically correct, confirm to seo standards and prevent those to appear as untitled sections?
- ya.teck about 10 years
  
  Can somebody explain me what is wrong with "Untitled sections"? Why we should title all sectioning elements? Are there any w3c recomendations about it?
- All Bits Equal about 10 years
  
  To be precise, there is actually nothing wrong with untitled sections according to w3c standards. Here (html5doctor.com/outlines/#untitled-sections) html5Doctor describes untitled sections. From the sound of it, untitled sections are mainly an accessibility "problem". If you can live with that and aid screen readers in other ways, I guess there is nothing wrong with an untitled section but it would still nag me anyway so I try to prevent it. Just my two cents...
All Bits Equal over 12 years

As I understood it, the body is the first section root an gets the main title/heading (in my case h1). All Articles are direct children of the page in a semantic interpretation because the customer requested the page title to be the name of the resort that get's covered on the page. He said he didn't want to have his websites name or something like that as the first heading.
All Bits Equal over 12 years

You are correct about the section wrapping up all the articles if I title the nav as the main navigation section and the section with the articles as the main content section but I felt that that's not necessary for this content structure. I still feel like hiding a heading is wrong... dunno why. Anyways, thanks for your reply!
All Bits Equal almost 11 years

Just a word of warning: While it is true that with HTML5 we are advised/allowed to use multiple h1 for sectioning (ow.ly/lik5O) and even though google does support/understand HTML5 with its crawlers and allows multiple h1 (ow.ly/likjZ), some SEO "experts" still think that using multiple h1 might in some cases hurt your SEO rating. Overuse is bad as it looks spammy, so I advice readers to be careful with "numerous" h1 tags. Apart from that, thanks for your answer! Using more than one h1 is a viable choice.
Swivel almost 11 years

Be careful hiding heading tags using css! It will get you blacklisted from some search engines (including Google). Some sites use this in order to flood their site with SEO-friendly search terms to increase traffic. If you do get blacklisted for doing this, you can contact Google for a reevaluation to explain why your usage was legitimate, but hiding (even by moving off screen) is a very bad practice. Find another way :)
Swivel almost 11 years

In addition to changing that div to a section, the main tag would actually be more semantic here :) @see w3.org/TR/html51/grouping-content.html#the-main-element
robmclarty over 10 years

@Swivelgames is right. Semantically, sections should only be used when there is more than one section (parts of the document). If there is only one, main, section, it should be a div or a main element.
Hashem Qolami over 10 years

Then your <section class="main_content"> section would be an Untitled section. keep using main element as @Swivelgames suggested.
Swivel over 10 years

Updated answer to use <main>
All Bits Equal over 10 years

Thanks for your imput but I'm not 100% sure about this. From what I know about SEO, hiding content (especially links and headings) is considered a bad practice. Sorry for the downvote but this is something I wouldn't recommend. I'll upvote this again if I'm convinced that this doesn't have a negative impact.
Deborah over 10 years

From support.google.com/customsearch/answer/2364585?hl=en: "If your pages have regions containing boilerplate content that's not relevant to the main content of the page, you can identify it using the nocontent class attribute. When Google Custom Search sees this tag, we'll ignore any keywords it contains and won't take them into account when calculating ranking for your Custom Search engine." -- I have made an edit to the answer.
All Bits Equal over 10 years

Great, thanks for the update. I upvoted your answer again. Let's hope that the other "big" search engines do think likewise. ;-)
Deborah over 10 years

Thanks! I'm having trouble finding definitive information on what the other engines penalize, as opposed to what they rank more highly. I'll post if relevant information turns up.
Deborah over 9 years

I tracked this for over 6 months in Google webmaster tools and even though I never uploaded a context file, my site was never flagged or penalized.
Wesley Smits over 9 years

The nocontent tag is mentioned only for Custom Search. What about normal Google Search?
lowtechsun over 6 years

"Google has discontinued sale/renewal of the Google Site Search since Apr 1 2017. The product will be completely shut down by April 1, 2018." enterprise.google.com/search/products/gss.html Also, hiding content with ´display: none;´ is not good at all. css-tricks.com/places-its-tempting-to-use-display-none-but-d‌ont
Deborah over 6 years

This is one of the corner cases where hiding content with "display: none" solves the problem that was asked very well, and is not penalized by Google. If the whole project is ending, why mark down an answer that was relevant when asked?
lowtechsun over 6 years

Not because of shut down but because of display none, you should not use it for this.