Question

我正在为HTML5主题设置我的WordPress侧边栏，并且真的想要正确使用before_widget和after_widget。

所以我的问题是：两种标记模式中哪一种更合适？以下代码完全在<article>元素之外。

选项1：除了部分

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

选项2：Div with Asides

<div id="sidebar">
    <aside id="widget_1"></aside>
    <aside id="widget_1"></aside >
    <aside id="widget_1"></aside >
</div>

我认为辅助问题是每个小部件标题使用的标题。如果我将每个小部件包装在<section>中，那么<h1>似乎是最合适的。如果我使用<aside>，我不确定。

欢迎所有意见。魔鬼的拥护者鼓励。

Answer 1

所有ASIDE的

首先仅用于表示主要内容的相关内容，而不是通用侧边栏。第二，仅限每个侧边栏一个

每个侧边栏只有一个。侧边栏的元素是div或部分在旁边。

我会选择选项1：除了部分

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

以下是规范https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

如果他们在其中有标题或页脚，则再次使用部分

答案 1 :(得分：24)

~~两者都不正确。您应该可能正在使用DIV。 <aside>不得用于侧边栏，而是用于相关内容的一部分（例如术语表或关于该主题的附加说明）。~~

~~另请参阅：http://html5doctor.com/understanding-aside/~~

更新：正如乔丹在下面指出的那样，本文已经更新，应该引用而不是我原来发布的那篇。和往常一样，如有疑问，请参阅规格！

<德尔> http://html5doctor.com/aside-revisited/

更新17/07/27：由于这是投票最多的答案，我应该更新此选项以在本地包含当前信息（包含参考文献的链接）。

来自规范^[1]：

aside元素表示由页面组成的部分与父母教育内容相切的内容分割内容，可以认为与内容分开内容。这些部分通常表示为印刷的侧边栏排版。

大！正是我们正在寻找的东西。此外，最好还要检查<section>。

section元素表示文档的通用部分或   应用。在这方面，一节是一个主题分组   内容。应通过包括a来识别每个部分   标题（h1-h6元素）作为section元素的子元素。

...

一般规则是，只有元素的内容在文档大纲中明确列出时，section元素才适用。

优异。正是我们正在寻找的。与用于“自包含”内容的<article> ^[2]相反，<section>允许相关内容不是独立的，或者是足够通用的对于<div>元素。

因此，规范似乎建议使用选项1，<aside>和<section>孩子是最佳做法。

<强>参考

答案 2 :(得分：11)

从HTML5 specification about aside。

中查看以下示例

明确指出，目前推荐的内容（2012年10月）是将aside元素内的小部件分组。然后，每个小部件都是最能代表它的小部件，nav，一系列blockquotes等等

以下摘录显示了如何使用blogrolls和博客上的其他内容：

<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="http://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="http://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h1>My last post</h1>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h1>My first post</h1>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h1>Posting</h1>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">Archives</a> —
   <a href="/about">About me</a> —
   <a href="/copyright">Copyright</a>
  </nav>
 </footer>
</body>

答案 3 :(得分：6)

基于此HTML5 Doctor diagram，我认为这可能是最好的标记：

<aside class="sidebar">
    <article id="widget_1" class="widget">...</article>
    <article id="widget_2" class="widget">...</article>
    <article id="widget_3" class="widget">...</article>
</aside> <!-- end .sidebar -->

我认为很明显<aside>是合适的元素，只要它是在主<{1}}元素之外。

现在，我认为<article>也适用于旁边的每个小部件。在the words of the W3C：

文章元素代表一个独立的组合文档，页面，应用程序或站点，原则上，可独立分发或可重复使用的，例如在联合。这个可以是论坛帖子，杂志或报纸文章，博客文章，用户提交的评论，交互式小部件或小工具，或任何其他独立的内容项目。

答案 4 :(得分：2)

本书HTML5 Guidelines for Web Developers: Structure and Semantics for Documents以这种方式建议（选项1）：

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

它还指出您可以在页脚中使用部分。因此，部分可以在实际页面内容之外使用。

答案 5 :(得分：0)

此后，ASIDE已经过修改，以包含次要内容。

HTML5 Doctor在这里有一篇很棒的文章： http://html5doctor.com/aside-revisited/

摘录：

对于新的定义，保持对其背景的了解至关重要。＆gt;当在文章元素中使用时，内容应该与该文章（例如，词汇表）具体相关。在文章元素之外使用时，＆gt;内容应与网站相关（例如，博客滚动，附加＆gt;导航组，甚至广告，如果该内容与页面相关）。

答案 6 :(得分：0)

令我惊讶的是，上述回复均未考虑响应式设计。

当我在桌面设备上查看我的页面时，我的侧边栏中可能会一个接一个地将有效的aside元素放在一起，例如标签云、用于进一步阅读的链接等。但是，当我的页面在移动设备上缩小为一列时，我将分离这些元素。我的导航元素将位于标题和主要内容元素之间，进一步阅读的链接将位于主要内容元素下方、页脚上方。

由于这些元素的语义内容不随显示窗口的宽度而变化，因此需要将它们单独标记为aside元素。因此，侧边栏本身不应被标记为 aside 元素，即使它只包含一种类型的内容。反过来，这意味着原始问题中的选项 1 一定是不可取的（错误？），而更好的答案应该是选项 2。

Answer 2