没有标题的选项卡和部分答案

【问题标题】：Tabs and sections without headings没有标题的选项卡和部分
【发布时间】：2014-09-22 16:32:00
【问题描述】：

我有以下标记：

<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>

我想让标记更加语义化，因为显然 div 是 "thematic groupings of content"。

但是有一个问题。我不想将部分的标题放入部分标签中，而是将它们保留为选项卡。我意识到 HTML5 文档流及其呈现是我在这里混合的两个独立的东西，但我不确定如何在没有一些繁重的 CSS/JS 技巧的情况下解决以下问题：

<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>

最简单的解决方案是将标题放入部分中，然后将其隐藏，但这将违反Google guidelines。

【问题讨论】：

最简单的解决方案：忽略语义，就这一次。
@Scimonster：是的，我总能做到 :-)。但我认为标签是如此普遍，以至于必须有一些简单的方法来以语义方式实现它们。
您的问题中有错字（div-s 应该是部分）。你有没有想过使用microdata w/ the meta tag？有关微数据词汇表，请参阅 Schema.org。
看起来像#section1 > h1, #section2 > h1（或内联）上的 CSS display:none 不会违反谷歌的指导方针（webmasters.stackexchange.com/a/18764）。这将是最好的语义友好方式。 + 如果你喜欢语义，你应该把 <ul/> 放在 <nav/> 中:)
@Tyblitz：错别字已修复，谢谢。重新微数据 - 我看了一下，但我没有看到解决这个问题的方法。

标签： html semantic-markup

【解决方案1】：

（虽然section 可能适合您的情况，但请注意，这并不意味着只要您有选项卡式内容就可以使用section。它始终取决于内容。）

您的列表是导航，因此不应包含标题。您的第二个 sn-p 会生成错误的文档大纲。

如果您想为section 提供标题，请使用此heading must be placed inside of this section。

注意你don’t have to provide headings at all。它们很有用，但不是必需的。如果您只是不想显示它们，那么在视觉上隐藏它们可能是有意义的，因为屏幕阅读器用户通常可以从中受益。
惩罚视觉隐藏标题的搜索引擎可能被认为是一个糟糕的搜索引擎：它非常常见（在野外，在各种 CMS 中，例如 Drupal 等）并且对可访问性很有用。 FWIW，您链接到的 Google 指南不建议不要在视觉上隐藏标题（除非您使用与您的内容无关的标题内容）。

【讨论】：

好的，谢谢。我知道“无标题”部分是可能的。标签很受欢迎，所以我希望错过了一些东西。我仍然认为我的标签应该有标题，我不应该需要耍花招来正确实现它们。

【解决方案2】：

将标题放在部分内并将它们绝对定位在选项卡内容之上怎么样？

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

【讨论】：