Tabs and sections without headings

Question

I have the following markup:

<div id="tabbed-content">
    <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
    </ul>
    <div id="section1">
         Section 1 is about (...).
    </div>
    <div id="section2">
         Section 2 is about (...).
    </div>
</div>

I want to make the markup more semantic, as clearly the div-s are "thematic groupings of content".

But there is a problem. I don't want to put headings of the sections into the section tags but keep them as tabs. I realize that the HTML5 document flow and its presentation are two separate things that I'm mixing here, but I'm not sure how to solve the following problem without some heavy CSS/JS trickery:

<div id="tabbed-content">
    <ul>
        <li><h1 for="#section1"><a href="#section1">Section 1</a></a></li>
        <li><h1 for="#section2"><a href="#section2">Section 2</a></a></li>
    </ul>
    <section id="section1">
         Section 1 is about (...).
    </section>
    <section id="section2">
         Section 2 is about (...).
    </section>
</div>

The simplest solution would be to put the headings into the sections and then hide them, but that would be against Google guidelines.

@Scimonster: Yes, I can always do that :-). But I think tabs are so common that there has to be some easy way to implement them in a semantic way. — Tomasz Zieliński, Sep 22 '14 at 16:46
You have a typo in the question (div-s should be sections). Have you thought about using [microdata w/ the `meta` tag](http://stackoverflow.com/questions/10279277/do-you-put-schema-microdata-meta-tags-in-the-html-body)? See [Schema.org](http://schema.org) for microdata vocabularies. — webketje, Sep 22 '14 at 17:44
Looks like a CSS ``display:none`` on ``#section1 > h1, #section2 > h1`` (or inline) won't be against google's guideline ( http://webmasters.stackexchange.com/a/18764 ). That would be the best semantic-friendly way of doing that. + you should put the ``
`` inside a ``
`` if you love semantic :) — Xenos, Sep 22 '14 at 19:14
@Tyblitz: Typos fixed, thanks. Re microdata - I took a look at it but I don't see there a solution to this problem. — Tomasz Zieliński, Sep 23 '14 at 11:58
@Xenos: `
` should be used for [_major navigation blocks_](http://www.w3.org/TR/html5/sections.html#the-nav-element). And my tabs are not a "navigation block". They are merely a nice visual feature. As for the [linked answer](http://webmasters.stackexchange.com/a/18764), the question there was about media queries and hiding content based on the screen parameters. And in my case here I would be hiding content permanently which _could_ be considered keyword stuffing. — Tomasz Zieliński, Sep 23 '14 at 12:03

score 3 · Accepted Answer · edited May 23 '17 at 12:13

(While section might be appropriate in your case, note that this does not mean that section can be used whenever you have tabbed content. It always depends on the content.)

Your list is navigation and therefore should not contain the headings. Your second snippet would produce a wrong document outline.

If you want to provide a heading for a section, this heading must be placed inside of this section.

Note that you don’t have to provide headings at all. They are useful, but not required. If you just don’t want to display them, it might make sense to visually hide them, because screen reader users can often benefit from them.
A search engine that penalizes visually hiding headings could be considered a bad search engine: it’s very common (in the wild, in various CMS, e.g. Drupal, etc.) and useful for accessibility. And FWIW, the Google guidelines you linked to don’t advise against visually hiding headings (unless you use heading content that is not about your content).

OK, thanks. I know "headingless" sections are possible. Tabs are quite popular so I hoped that missed something. I still think that my tabs deserve headings and that I shouldn't need to play tricks to implement them correctly. — Tomasz Zieliński, Sep 23 '14 at 12:09

score 0 · Answer 2 · answered Apr 12 '18 at 11:57

0

How about putting the headings inside sections and absolutely positioning them above the tabs content?

#tabbed_content{
 position:relative;
}
h1{
 position:absolute;
}

answered Apr 12 '18 at 11:57

Fanky

1,673
1
18
20

score 0 · Answer 3 · answered Jan 02 '23 at 22:59

Late to the party, but this is documented in the MDN Web Docs:

Sections should always have a heading, with very few exceptions.

...

Circumstances where you might see used without a heading are typically found in web application/UI sections rather than in traditional document structures. In a document, it doesn't really make any sense to have a separate section of content without a heading to describe its contents. Such headings are useful for all readers, but particularly useful for users of assistive technologies like screen readers, and they are also good for SEO.

...

Consider however a secondary navigation mechanism. If the global navigation is already wrapped in a element, you could conceivably wrap a previous/next menu in a :

...

Depending on the content, including a heading could also be good for SEO, so it is an option to consider.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

Tabs and sections without headings

3 Answers3