Search code examples
htmlsemantic-markup

Tabs and sections without headings


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.


Solution

  • (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).