Question

我有以下标记：

<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-s显然是"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。

Answer 1

（虽然section可能适用于您的情况，但请注意，这并不意味着只要您有标签内容就可以使用section。它总是取决于内容。）

您的列表是导航，因此不应包含标题。你的第二个片段会产生错误的文档大纲。

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

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

Answer 2

如何将标题放在部分中并将它们绝对放在标签内容上方？

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

没有标题的标签和部分

2 个答案: