。

Question

我一直在网上闲逛，但我似乎无法就此找到明确的答案。鉴于下面的HTML5结构，我应该在我的旁边元素中使用h2或h3来获取内容标题吗？

我知道只要他们在一个部分和/或文章元素中，就可以使用多个h1＆＃39; s。但我不知道在我的旁边应该做些什么呢？我想我应该远离多个h1，但我不确定h2和h3。

谢谢！

<!DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<section>
    <header>
        <h1>Main Section</h1>
    </header>

    <article>
        <h1>Article Title 1</h1>
        <div>Some Content Here</div>
    </article>

    <article>
        <h1>Article Title 2</h1>
        <div>Some Content Here</div>
    </article>

    <article>
        <h1>Article Title 3</h1>
        <div>Some Content Here</div>
    </article>
</section>

<aside>
    <header>
        <h1>Side Bar Heading</h1>
    </header>

    <div>
        <h2>Side Content Title 1</h2>
        <div>Some Content Here</div>
    </div>

    <div>
        <h2>Side Content Title 2</h2>
        <div>Some Content Here</div>
    </div>

    <div>
        <h2>Side Content Title 3</h2>
        <div>Some Content Here</div>
    </div>
</aside>
</body>
</html>

Answer 1

你真的不应该在页面上使用多个<h1>。 h标记主要用于指示文档结构。 Web Content Accessibility Guidelines (WCAG) 2.0 standard显示了h1标记应该标题页面的示例。大多数州（例如伊利诺伊州）都有自己的可访问性标准大纲。伊利诺伊州在特定的大纲中，页面上应该只有一个h1标记，并且其内容与<title>标记类似。虽然这可以，也可能会被认为，但只使用一个h1标签并让其他5个图层正确嵌套，这样才具有语义意义。

实际上，常识在构建其他h标签时起着重要作用。想象一下，当你完成后，以“轮廓模式”查看你的网站。它有意义吗？

例如，假设您希望网站的大纲如下所示：

Page Title

Content
 - Article
   - Sub-article
 - Article

Sidebar
 - Weather
 - Local News

然后这就是你的标题标签应该如何工作：

<header>
  <h1>My News Website</h1>
  <nav></nav>
</header>
<section>
  <article>
    <h2>Article Title</h2>
    <p>Blah Blah Blah.</p>
    <h3>Sub-heading in Article</h3>
    <p>More blah blah blah.</p>
  </article>
  <article>
    <h2>Article Title</h2>
    <p>Blah Blah Blah.</p>
  </article>
</section>
<aside>
  <h2>Weather</h2>
  <p>Weather information.</p>
  <h2>Local News</h2>
  <ul>
    <li>News Item</li>
    <li>News Item</li>
  </ul>
</aside>

只要您想要在同一级别的内容共享相同的标题编号，那么您就是在正确的轨道上。与上下文有意义的标题相关的事项应在标题下“增加”。

最后，您可以使用HTLM 5大纲向您显示已完成网站的大纲。请在此处查看：http://gsnedders.html5.org/outliner/

Answer 2

根据to MDN：

HTML5中的部分可以嵌套。在主要部分（由元素定义）旁边，部分限制可以显式或隐式定义。明确定义的部分是，
，
，
和
标记内的内容。

每个节可以有自己的标题层次结构。因此，即使嵌套部分也可以具有
。

因此，您可以通过在<h1>中包含一个<h2>和多个<aside>的方式来实现。

HTML5：我应该在旁边元素中使用h2或h3作为内容吗？

2 个答案: