preventing
to appear as "untitled section" on html5 websites

Question

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?

Can somebody explain me what is wrong with "Untitled sections"? Why we should title all sectioning elements? Are there any w3c recomendations about it? — ya.teck, Mar 24 '14 at 06:58
To be precise, there is actually nothing wrong with untitled sections according to w3c standards. Here (http://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, Mar 24 '14 at 12:16

score 7 · Accepted Answer · edited Mar 28 '15 at 12:09

7

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>

edited Mar 28 '15 at 12:09

BoltClock

700,868
160
1,392
1,356

answered Aug 25 '11 at 13:41

Jason Gennaro

34,535
8
65
86

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 Aug 27 '11 at 10:30
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 Aug 27 '11 at 10:35
3

*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 Jul 06 '13 at 04:24
3

In addition to changing that `div` to a `section`, the `main` tag would actually be more semantic here :) @see http://www.w3.org/TR/html51/grouping-content.html#the-main-element – Swivel Jul 06 '13 at 04:27
1

@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. – robmclarty Oct 18 '13 at 15:51
1

Then your `
` section would be an `Untitled` section. keep using `main` element as @Swivelgames suggested.
– Hashem Qolami Nov 14 '13 at 13:36
Updated answer to use
– Swivel Nov 14 '13 at 18:56

score 5 · Answer 2 · answered Jun 27 '15 at 11:15

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>

Deadpool · Answer 3 · 2013-04-16T03:24:39.083

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/

Just a word of warning: While it is true that with HTML5 we are advised/allowed to use multiple h1 for sectioning (http://ow.ly/lik5O) and even though google does support/understand HTML5 with its crawlers and allows multiple h1 (http://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. — All Bits Equal, May 22 '13 at 18:37

Deborah · Answer 4 · 2013-12-17T23:57:28.760

1

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.

edited Dec 17 '13 at 23:57

answered Nov 22 '13 at 03:31

Deborah

4,316
8
31
45

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. – All Bits Equal Dec 05 '13 at 07:11
From https://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. – Deborah Dec 05 '13 at 19:37
Great, thanks for the update. I upvoted your answer again. Let's hope that the other "big" search engines do think likewise. ;-) – All Bits Equal Dec 06 '13 at 07:40
1

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 Dec 06 '13 at 20:13
1

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. – Deborah Oct 30 '14 at 17:37
The nocontent tag is mentioned only for Custom Search. What about normal Google Search? – Wesley Smits Dec 16 '14 at 10:27
"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." https://enterprise.google.com/search/products/gss.html Also, hiding content with ´display: none;´ is not good at all. https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ – lowtechsun Jan 22 '18 at 14:32
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? – Deborah Jan 23 '18 at 23:32
Not because of shut down but because of display none, you should not use it for this. – lowtechsun Feb 10 '18 at 16:56

preventing to appear as "untitled section" on html5 websites

4 Answers4

preventing
to appear as "untitled section" on html5 websites