我应该在主要元素外部还是内部放置元素？答案

【问题标题】：Should I have aside element ouside or inside of main element?我应该在主要元素外部还是内部放置元素？
【发布时间】：2016-06-24 22:43:24
【问题描述】：

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

在aside 之外有main 在语义上是否可以？
如果是，如果我将aside 保留在main 之外，它是否比可访问性有任何优势，例如“跳到主要内容”命令？
最后但并非最不重要的一点是，如果我在 main 外部或内部包含 aside 标签，我想知道是否会对 SEO 产生任何影响。

【问题讨论】：

请注意，在 Stack Overflow 上询问“SEO 影响”是题外话。此类问题可以在Webmasters提问。
谢谢@unor！对于以后的问题，我会牢记这一点。

标签： html seo accessibility semantic-markup

【解决方案1】：

In HTML5 仅定义aside 是“与aside 元素周围的内容相关”。

In HTML 5.1 (CR) 定义became more specific，因为它现在说aside“与育儿内容有关分段内容”。

按照较新的定义，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>

【讨论】：

感谢您添加更多详细信息。参考规格后，我已将您的答案标记为答案，因为它更相关。
WCAG success criterion 1.3.1: Info and Relationships 将aside 和main 标识为地标。因此，它们不应嵌套。嵌套地标使使用辅助技术的人难以感知此类内容。
@ZGuard：你是不是链接到了错误的页面？在此页面上找不到相关信息，但在 w3.org/TR/wai-aria-practices/examples/landmarks/… 上找到了它（“complementary 地标应该是顶级地标”）。由于将aside 嵌套在main 中在语义上是合适的，因此通过显式指定一个非标志性角色来覆盖aside 的隐含角色可能有意义吗？
我意识到我发布的链接非常笼统。你的资源更重要。 An article from Deque University 特别提到了aside，暗示它被解释为complementary 地标。但是覆盖语义是一个聪明的想法，尤其是在重组 HTML 不可行的情况下。

【解决方案2】：

如果您的<aside> 与您<main> 中的内容直接相关，那么我会将其留在<main> 中。现在，话虽这么说......

是的，在 <main> 之外有 <aside> 在语义上是可以的（例如，它是有效的，但您的内容可能需要另外保证）。
我不明白您如何看待跳过链接在这里发挥作用，但除此之外，<main> 之外的<aside> 对可访问性没有害处或好处。只要您遵循良好的结构和有效的标记，就可以了。
我不知道。我的网站上有<aside>s 在<main> 之外，在<main> 里面也有<aside>s，而且我的排名没有差异。鉴于搜索引擎通常对此类特定位不透明，如果您担心，我会考虑进行一些 A/B 测试。

来自 HTML5 Doctor 的相关资料，由 HTML5 规范编辑之一编写：

【讨论】：