侧边栏的最佳 HTML5 标记答案

【问题标题】：Best HTML5 markup for sidebar侧边栏的最佳 HTML5 标记
【发布时间】：2011-12-06 22:27:58
【问题描述】：

我正在为 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

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

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

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

【问题讨论】：

注意：并非every 侧边栏都必须是aside 元素（尽管很多都应该是）。视具体内容而定。

标签： html semantic-markup

【解决方案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

只有当它们有 header 或 footer 时才再次使用 section，否则使用普通 div。

【讨论】：

我喜欢这个选项的外观。我想我应该在上面列出的那个选项的关注点是，如果每个小部件与其他小部件无关，它们真的是一个单独的部分吗？我不知道。
它们绝对是放在一边的部分。我的答案是正确的，您可以点击'/（打勾）标记将其评为正确答案。
那么是什么让它们成为一个单独的侧面而不是多个独立的侧面？我不卖。就像我说的，我喜欢选项 1 的外观，但是当我考虑它时，它并没有多大意义。
如果你有 2 个侧边栏，你将有 2 个。但是您有一个侧边栏，其中包含多个部分/小部件。这就是为什么选项 1。每个侧边栏一个一边
我认为上面给出的解决方案过多地依赖于sidebar元素和#sidebar的视觉样式之间的等效性。一个典型的 WordPress 侧边栏将包含一个 blogroll、存档链接，可能还有一个登录小部件。它们都与页面/站点相关，但仅在这种能力中它们彼此相关。从逻辑上讲，它们可以放在许多不同的地方，但它们恰好组合在一个侧边栏中。所以我认为@Waiting for Dev... 下面更接近。如果这些小部件在视觉上组合在一起，请使用 div。

【解决方案2】：

27 年 7 月 17 日更新：因为这是投票最多的答案，我应该更新它以在本地包含当前信息（带有参考链接）。

来自规范^[1]：

aside 元素代表页面的一部分，包括与育儿内容相关的内容分割内容，并且可以被认为是独立的内容。这些部分通常在印刷品中表示为侧边栏排版。

太棒了！正是我们正在寻找的。另外，最好也检查一下<section>。

section 元素表示文档的通用部分或应用。在这种情况下，一个部分是一个主题分组内容。每个部分都应该被识别，通常包括一个标题（h1-h6 元素）作为 section 元素的子元素。

...

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

非常好。正是我们正在寻找的。与用于“自包含”内容的<article> ^[2] 不同，<section> 允许不是独立的相关内容，或者对于<div> 元素来说不够通用.

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

参考文献

【讨论】：

相关链接 (html5doctor.com/aside-revisited) 另有说明。 OP确实提到这是在<article>之外使用的。
@conexion，我已经阅读了那篇文章和@shawn 发布的文章。我认为两者都没有真正解决问题，这就是我首先发布此问题的原因。我最终选择了@web-developers 建议的<aside> 和<section>s。感觉不太对劲，但我还没想出更好的办法。
对不起，我不同意！ :) 您引用的文章是revisited in October 2009（这是在您发布答案之后！）请注意“aside 现在可以在不嵌套在文章元素中的辅助内容中使用。”这符合 W3C HTML5 和 WHATWG HTML 规范，两者都明确建议为此目的使用它，并包含如何使用的示例。
@Conexion 太棒了——现在投票最多的答案也是正确的！ :D
这并没有明确回答问题.. 我们应该使用什么？

【解决方案3】：

看下面的例子，来自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>

【讨论】：

【解决方案4】：

基于这个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> 是合适的元素，只要它在主要的<article> 元素之外。

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

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

【讨论】：

这完全取决于小部件的内容。在许多情况下，article 的这种用法是不正确的。
是的，我认为大多数时候article 是不正确的。一个好的观点是考虑联合......通常你不需要联合到小部件......
如果是完整的文章，侧边栏中的内容将是article。如果它是预览版，或者除了它可能是 article 或者可能更好为 div、ol 或 figure。

【解决方案5】：

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>

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

【讨论】：

【解决方案6】：

ASIDE 已被修改为也包含次要内容。

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

摘录：

有了“搁置”的新定义，了解其上下文至关重要。 >在文章元素中使用时，内容应与该文章特别相关（例如，词汇表）。当在文章元素之外使用时，>内容应该与网站相关（例如，博客、额外的 > 导航组，如果内容与页面相关，甚至是广告）。

【讨论】：

【解决方案7】：

我很惊讶以上回答都没有考虑响应式设计。

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

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

【讨论】：