6

I've been poking around online but I can't seem to find a definitive answer on this. Given the following HTML5 structure below, should I be using h2's or h3's inside of my aside element for content titles?

I know it's okay to use multiple h1's as long as they are inside a section and/or article element. But i'm not sure what I should do within my aside? I think I should stay away from multiple h1's in an aside but im not sure about h2's and h3's.

Thanks!

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

2 回答 2

5

根据MDN：

HTML5 中的部分可以嵌套。除了由元素定义的主要部分之外，部分限制是显式或隐式定义的。明确定义的部分是 <body>、<section>、<article>、<aside> 和 <nav> 标签中的内容。

每个部分都可以有自己的标题层次结构。因此，即使是嵌套部分也可以有一个 <h1>。

所以你做的方式——在你的里面有一个<h1>和多个——是合适的。<h2><aside>

于 2018-12-26T21:20:12.317 回答
-1

你真的不应该<h1>在一个页面上使用多个 s 。标签主要h用于指示文档结构。Web Content Accessibility Guidelines (WCAG) 2.0 标准显示了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 Outline 向您展示已完成网站的大纲。在这里查看：http: //gsnedders.html5.org/outliner/

于 2013-02-13T17:37:01.673 回答