CODEWITHSUNDEEP
htmlsemantic-markup
Tomasz Zieliński
Tomasz Zieliński

Reputation: 16356

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.

Upvotes: 1

Views: 3056

Answers (3)

Michel FW
Michel FW

Reputation: 151

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

Upvotes: 0

Fanky
Fanky

Reputation: 1786

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

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

Upvotes: 0

unor
unor

Reputation: 96607

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

Upvotes: 3

Related Questions