边栏的最佳 HTML5标记

我正在为一个 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 id="sidebar">
<aside id="widget_1"></aside>
<aside id="widget_1"></aside >
<aside id="widget_1"></aside >
</div>

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

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

150556 次浏览
小开
最佳答案

首先，所有 ASIDE 中的 仅用于将相关内容表示为主内容，而不用于通用侧边栏。第二，每边栏只留一个

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

我会选 备选案文1: 除各款之外

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

Here is the spec https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

Again use section only if they have a 标题 or 页脚 in them, otherwise use a plain div.

小开

Update 17/07/27: As this is the most-voted answer, I should update this to include current information locally (with links to the references).

From the spec < a href = “ https://www.w3.org/TR/html51/sections.html # the-side-element”rel = “ nofollow noReferrer”> [1] :

Side 元素表示页面的一个部分，该部分由 与父母教养方式的内容无关的内容 部分内容，并可以认为是独立的 这些部分通常在印刷品中表示为侧栏 字体设计。

太好了! 正是我们要找的。另外，最好也检查一下 <section>。

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

...

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

好极了。正是我们要找的。与“自包含”内容的 <article> < a href = “ https://www.w3.org/TR/html51/sections.html # elementdef-article”rel = “ nofollow noReferrer”> [2] 不同，<section>允许相关内容不是独立的，或者对于 <div>元素来说足够通用的。

因此，规范似乎建议使用选项1，<aside>与 <section>的孩子是最佳实践。

参考文献

  1. Https://www.w3.org/tr/html51/sections.html#the-aside-element
  2. Https://www.w3.org/tr/html51/sections.html#elementdef-article
  3. http://html5doctor.com/aside-revisited/
小开

基于这个 HTML5医生图，我认为这可能是最好的标记:

<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>也适用于边上的每个小部件。在 W3C 的话中:

元素中的自包含组合 文件、页面、应用程序或网站，即原则上, 可独立分发或可重用的，例如在联合中 可以是论坛帖子，杂志或报纸文章，博客条目, a user-submitted comment, an interactive widget or gadget, or any 其他独立内容。

小开

看下面的例子，来自 关于 aside的 HTML5规范。

它明确指出，目前推荐的(2012年10月)是在 aside元素内部对小部件进行分组。然后，每个小部件都是最好的代表，一个 nav，一系列 blockquotes等等

The following extract shows how aside can be used for blogrolls and 博客的其他侧面内容:

<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>
小开

此后，ASIDE 也进行了修改，以包括辅助内容。

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

节选:

对于“旁观者”的新定义，保持对其背景的了解是至关重要的。 > 当在 article 元素中使用时，内容应该明确地与该 article 相关 > (例如，术语表)。当在 article 元素之外使用时，> 内容应该与站点相关(例如，blogroll、附加的 > 导航组，如果内容与页面相关，甚至广告)。

小开

针对 Web 开发人员的 HTML5指南: 文档的结构和语义这本书是这样建议的 (选择1):

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

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

小开

I'm surprised that none of the responses above consider responsive design.

我可能有有效的 一边去元素，如标签云，链接进一步阅读等在一起，一个接一个，在我的侧边栏当我的网页是在桌面设备上查看。 然而，当我的页面在移动设备上缩减为一列时，我将把这些元素分离开来。我的导航元素将位于头部和主要内容元素之间，进一步阅读的链接将位于主要内容元素之下、页脚之上。

由于这些元素的语义内容不会随着显示窗口的宽度而改变，因此需要将它们单独标记为 一边去元素。 因此，侧边栏本身不应该标记为 一边去元素，即使它只包含一种类型的内容。 反过来，这意味着选项1在原来的问题必须是不受欢迎的(错误的?)而更好的答案应该是选项2。


提交答案