我应该将侧边栏元素放在主元素内部还是外部？

Question

我应该将侧边栏元素放在主元素内部还是外部？

htmlseoaccessibilitysemantic-markup

38

假设aside元素包含“顺便说一下…”内容，如阅读建议、广告或交叉销售。

在语义上，aside放在main之外是否可以？
如果可以，如果我把aside放在main之外，是否有任何较好的可访问性优势，例如“跳到主要内容”命令？
最后但并非最不重要的，我想知道如果我将aside标签放在main之外或之内，是否会有任何SEO影响。

- Pratik Mehta

请注意，在Stack Overflow上询问“SEO影响”是不符合主题的。这类问题可以在[webmasters.se]上提问。 - unor

谢谢@unor！我会记住这个，以备将来提问之用。 - Pratik Mehta

2个回答

14

如果您的<aside>与<main>中的内容直接相关，则应将其保留在<main>中。话虽如此...

是的，将<aside>放在<main>之外在语义上是没问题的（也就是说，它是有效的，但您的内容可能需要其他）。
我不明白您如何认为跳过链接在这里发挥作用，但是，将<aside>放在<main>之外对可访问性没有任何损害或好处。只要遵循良好的结构和有效的标记，您应该会没问题。
我不知道有任何影响。我的网站上有<aside>在<main>之外，也有<aside>在<main>之内，但我发现它们对我的排名没有任何影响。鉴于搜索引擎通常对此类特定位持不透明态度，如果您担心此问题，您可以考虑一些A/B测试。

HTML5 Doctor提供了相关资料，该网站由HTML5规范编辑之一编写：

- aardrian

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

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

- unor · Accepted Answer

在HTML5中，只定义了aside与“aside元素周围的内容有关”。在HTML 5.1（CR）中，定义变得更加具体，现在它指出aside与父级分区内容的内容有关。HTML5 HTML 5.1 变得更具体根据新的定义，aside元素应该位于其相关的

元素内。 main元素不是分区元素（例如article、section、body、figure等元素）。当然，您仍然可以将aside放在main中，但它将与main的最近的分区元素父级相关联。

这意味着这两个示例（对于aside）没有语义差异：

<body>
  <main></main>
  <aside><!-- related to the body --></aside>
</body>

<body>
  <main><aside><!-- related to the body --></aside></main>
</body>

展示几种不同情况的示例：

<body>

  <main>

    <article>

      <aside><!-- related to the article --></aside>

      <section>

        <aside><!-- related to the section --></aside>

        <blockquote>
          <aside><!-- related to the blockquote (not to the section!) --></aside>
        </blockquote>

        <div>
          <aside><!-- related to the section (not to the div!) --></aside>
        </div>

      </section>

    </article>

    <aside><!-- related to the body (not to the main!) --></aside>

  </main>

  <aside>
    <!-- related to the body -->
    <aside><!-- related to the (parent) aside --></aside>
  </aside>

  <nav>
    <aside><!-- related to the nav --></aside>
  </nav>

  <footer>
    <aside><!-- related to the body (not to the footer!) --></aside>
  </footer>

</body>