Html 侧边栏的最佳 HTML5 标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8407805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best HTML5 markup for sidebar
提问by mrwweb
I'm setting up my WordPress sidebars for an HTML5 theme and really wanting to use before_widgetand after_widgetright.
我正在为 HTML5 主题设置我的 WordPress 侧边栏，并且真的很想使用before_widget并且after_widget正确。
So my question is this: which of the two markup patterns is more appropriate? The following code is all completely outside the <article>element.
所以我的问题是：这两种标记模式中哪一种更合适？以下代码完全在<article>元素之外。
Option 1: Aside with sections
选项 1：除了部分
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
Option 2: Div with Asides
选项 2：带旁白的 Div
<div id="sidebar">
<aside id="widget_1"></aside>
<aside id="widget_1"></aside >
<aside id="widget_1"></aside >
</div>
I suppose the auxiliary question is then what heading to use for each widget title. If I wrap each widget in a <section>then <h1>seems most appropriate. If I use <aside>, I'm not sure.
我想辅助问题是每个小部件标题使用什么标题。如果我将每个小部件包装在一个中，<section>那么<h1>似乎最合适。如果我使用<aside>，我不确定。
All opinions welcome. Devil's advocates encouraged.
欢迎所有意见。魔鬼的拥护者受到鼓励。
采纳答案by aWebDeveloper
Firstof all ASIDE is to be used only to denote related content to main content, not for a generic sidebar. Second, one aside for each sidebar only
首先，ASIDE 仅用于表示与主要内容相关的内容，而不是用于通用侧边栏。其次，每个侧边栏只有一个
You will have only one aside for each sidebar. Elements of a sidebar are divs or sections inside a aside.
每个侧边栏只有一个。侧边栏的元素是边栏内的 div 或部分。
I would go with Option 1: Aside with sections
我会选择选项 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
这是规范https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
Again use section only if they have a headeror footerin them, otherwise use a plain div.
再次使用 section 只有当它们有页眉或页脚时，否则使用普通 div。
回答by David Bradbury
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).
27 年 7 月 17 日更新：由于这是投票最多的答案，我应该更新它以在本地包含当前信息（带有参考文献的链接）。
From the spec [1]:
从规范[1]：
The aside element represents a section of a page that consists of content that is tangentially related to the content of the parenting sectioning content, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
side 元素表示页面的一部分，该部分由与育儿部分内容的内容相切相关的内容组成，并且可以被视为与该内容分开。这些部分通常在印刷版式中表示为侧边栏。
Great! Exactly what we're looking for. In addition, it is best to check on <section>as well.
伟大的！正是我们正在寻找的。此外，最好也检查一下<section>。
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
...
A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
section 元素代表文档或应用程序的通用部分。在这种情况下，部分是内容的主题分组。每个部分都应该被标识，通常通过包含一个标题（h1-h6 元素）作为部分元素的子元素。
...
一般规则是，仅当元素的内容将在文档的大纲中明确列出时，section 元素才是合适的。
Excellent. Just what we're looking for. As opposed to <article>[2]which is for "self-contained" content, <section>allows for related content that isn't stand-alone, or generic enough for a <div>element.
优秀。正是我们正在寻找的。与用于“自包含”内容的<article>[2]相反，<section>允许相关内容不是独立的，或者对于<div>元素来说足够通用。
As such, the spec seems to suggest that using Option 1, <aside>with <section>children is best practice.
因此，规范似乎表明，使用选项1，<aside>与<section>孩子是最好的做法。
References
参考
回答by Waiting for Dev...
Look at the following example, from the HTML5 specification about aside.
看下面的例子，来自HTML5 规范关于aside.
It makes clear that what currently is recommended (October 2012) it is to group widgets inside asideelements. Then, each widget is whatever best represents it, a nav, a serie of blockquotes, etc
它清楚地表明当前推荐的（2012 年 10 月）是在aside元素内对小部件进行分组。然后，每个小部件都是最能代表它的东西，一个nav，一系列的blockquotes等等
The following extract shows how aside can be used for blogrolls and other side content on a blog:
<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 用于 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>
回答by mrwweb
Based on this HTML5 Doctor diagram, I'm thinking this may be the best markup:
基于这个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 -->
I think it's clear that <aside>is the appropriate element as long as it's outsidethe main <article>element.
我认为很明显，<aside>只要它在主要元素之外，它就是合适的<article>元素。
Now, I'm thinking that <article>is also appropriate for each widget in the aside. In the words of the W3C:
现在，我认为这<article>也适用于旁边的每个小部件。在该W3C的话：
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
article 元素代表文档、页面、应用程序或站点中的独立组合，也就是说，原则上可以独立分发或重用，例如在联合中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具，或任何其他独立的内容项。
回答by alds
The book HTML5 Guidelines for Web Developers: Structure and Semantics for Documentssuggested this way (option 1):
《HTML5 Web Developers Guidelines: 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>
It also points out that you can use sections in the footer. So section can be used outside of the actual page content.
它还指出您可以在页脚中使用部分。因此部分可以在实际页面内容之外使用。
回答by Kray
The ASIDE has since been modified to include secondary content as well.
自那以后，ASIDE 也被修改为包含次要内容。
HTML5 Doctor has a great writeup on it here: http://html5doctor.com/aside-revisited/
HTML5 Doctor 在这里有一篇很棒的文章：http: //html5doctor.com/aside-revisited/
Excerpt:
摘抄：
With the new definition of aside, it's crucial to remain aware of its context. >When used within an article element, the contents should be specifically related >to that article (e.g., a glossary). When used outside of an article element, the >contents should be related to the site (e.g., a blogroll, groups of additional >navigation, and even advertising if that content is related to the page).
随着新定义的搁置，保持对其上下文的了解至关重要。>当在文章元素中使用时，内容应该与该文章（例如，词汇表）具体相关。当在文章元素之外使用时，> 内容应该与站点相关（例如，博客、附加 > 导航组，如果该内容与页面相关，甚至还有广告）。
