HTML5：在aside元素内部的内容中，我应该使用h2还是h3？

Question

HTML5：在aside元素内部的内容中，我应该使用h2还是h3？

6

我在网上查找了一些信息，但似乎没有一个明确的答案。给定下面的HTML5结构，对于内容标题，我应该在我的aside元素内使用h2还是h3？

我知道在section和/或article元素内使用多个h1是可以的。但是我不确定在aside内应该怎么做？我认为我应该避免在aside中使用多个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>

- Maddhacker24

1

你应该使用h2和h3作为小标题。如果你需要调整大小，可以使用CSS进行调整。 - aug

3个回答

1

在页面上使用多个 <h1> 标签是不合适的。 h 标签主要用于指定文档结构。Web Content Accessibility Guidelines (WCAG) 2.0 standard 显示了 h1 标签应该用于页面标题。大多数州（例如伊利诺伊州）都有自己的无障碍标准概述。伊利诺伊州的特定概述指出，页面上只能有一个 h1 标签，并且其内容应与 <title> 标签类似。虽然这可能会引起争议，但只使用一个 h1 标签并让其他五个层正确嵌套是语义上正确的。

实际上，常识在构建其他 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>

只要你想要的东西在同一级别上共享相同的标题编号，那么你就走在了正确的轨道上。与某个标题相关的事物，在语境上应该被视为“在”该标题下的事物，应将标题编号增加一。

最后，你可以使用HTML 5大纲来查看你完成的网站的大纲。在这里查看：http://gsnedders.html5.org/outliner/。

- Michael Irigoyen

21

实际上，我认为您被鼓励多次使用<h1>，因为自HTML5起，文档将嵌套的<section><h1>标题视为<h2>。请参考http://html5doctor.com/your-questions-answered-6/。 - potench

这是我对潜力的印象。 - Maddhacker24

1

从Google站长帮助中心：http://www.youtube.com/watch?v=GIn5qJKU8VM&feature=player_embedded 简而言之，SEO算法优先考虑H1标签，多次使用它是可以的，但不要操纵系统。 - potench

1

@alohci 这是讽刺...我是在说你不应该推荐支持HTML4标准，同时又使用HTML5元素。这里是HTML5医生的示例标记，其中<aside>被文档视为一个部分，因此应该使用<h1> http://html5doctor.com/aside-revisited/ 假设您的<aside>没有嵌套在另一个<section>中。 - potench

1

在我看来，在侧边栏中，“What's Hot”应该是一个h2，其下的每个标题都应该是一个h3。我会这样做是为了避免“多个h1”的情况。然而，根据HTML5规范，使用h1作为“What's Hot”的标题，使用h2作为子标题也是合适的。无论如何，各个子标题都不应该是h1。 - Michael Irigoyen

显示剩余11条评论

0

MDN 2022年4月21日的状态：

HTML规范允许使用多个 <h1>，但这并不被认为是最佳实践。仅使用一个 <h1> 对于屏幕阅读器用户非常有益。

HTML规范包括通过使用 <h1> 元素形成大纲的概念。如果实现了这一点，就可以使用多个 <h1> 元素，使用户代理（包括屏幕阅读器）能够理解嵌套在定义的部分中的 <h1> 是一个子标题。然而，这个功能从未被实现过；因此，使用标题来描述文档的大纲非常重要。

- phlppn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luke · Accepted Answer

根据 MDN:

HTML5中的部分是可以嵌套的。除了由<主要>元素定义的主要部分外，部分限制可以明确或隐式地定义。明确定义的部分是在,

,