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

Question

假设 aside 元素包含 "Oh, by the way …" 内容，例如阅读建议、广告或交叉销售。

在 main 之外使用 aside 在语义上是否可以？
如果是，如果我将 aside 保留在 main 之外，例如 "skip to main content" 命令，它是否比可访问性有任何优势？
最后但并非最不重要的一点是，如果我在 main.

aside

Answer 1

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

是的，在 <main> 之外使用 <aside> 在语义上是可以的（例如，它是有效的，但您的内容可能有其他保证）。
我不明白你是怎么想的 skip link 在这里发挥作用，但是 <main> 之外的 <aside> 对可访问性没有坏处也没有好处。只要您遵循良好的结构和有效的标记，就应该没问题。
我知道 none。我的网站上 <main> 外有 <aside>，<main> 内也有 <aside>，而且我的排名没有差异。鉴于搜索引擎通常对此类特定位不透明，如果您担心，我会考虑进行一些 A/B 测试。

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

Answer 2

In HTML5只是定义了aside是"related to the content around the aside element"。

In HTML 5.1 (CR) the definition became more specific，现在说 aside 是 "related to the content of the parenting sectioning content".

根据较新的定义，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>

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

Should I have aside element ouside or inside of main element?

html

seo

accessibility

semantic-markup