Menu
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?
235
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>
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>
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/
21
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:
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.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
