最好的侧边栏HTML5标记
我设置了我的WordPress的侧边栏为HTML5主题,真的想使用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>
scheme2:Div与旁白
<div id="sidebar"> <aside id="widget_1"></aside> <aside id="widget_1"></aside > <aside id="widget_1"></aside > </div>
我想辅助问题是什么标题使用每个小部件标题。 如果我在<section>
包装每个小部件,那么<h1>
看起来是最合适的。 如果我用<aside>
,我不确定。
欢迎所有的意见。 魔鬼的鼓吹者鼓励。
首先 ,ASIDE仅用于表示与通用侧栏不相关的主要内容的相关内容。 其次 ,每个侧边栏只有一个
每个边栏只能有一个。 侧栏的元素是div或section的内部。
我会select1:除了部分
<aside id="sidebar"> <section id="widget_1"></section> <section id="widget_2"></section> <section id="widget_3"></section> </aside>
这里是规范https://www.w3.org/wiki/HTML/Elements/aside
再次使用部分,如果他们有一个页眉或页脚在其他普通的div
这两个都不正确。 你应该可能正在使用DIV的两个。 <aside>
不能用于侧边栏,而是一段相关的内容(如术语词汇表或有关该主题的附加说明)。
另见: http : //html5doctor.com/understanding-aside/
更新:正如乔丹指出的,这篇文章已经更新,应该被引用,而不是我原来的张贴。 一如既往,如有疑问,请参阅规格!
http://html5doctor.com/aside-revisited/
17/07/27更新:由于这是最有投票的答案,我应该更新这个在当地包括当前信息(与参考链接)。
从规范[1] :
其中,元素表示由与父母分割内容的切线相关的内容组成的页面的一部分,其可以被认为是与该内容分离的。 这些部分通常以印刷字体的侧边栏来表示。
大! 确切地说,我们正在寻找。 另外,最好也检查<section>
。
section元素表示文档或应用程序的通用部分。 在这方面,一节是内容的主题分组。 每个部分都应该被标识,通常包括一个标题(h1-h6元素)作为部分元素的一个子元素。
…
一般的规则是,只有元素的内容在文档的大纲中明确列出的时候,section元素才是合适的。
优秀。 只是我们正在寻找。 与<article>
[2]相对的是“自包含”内容, <section>
允许相关内容不是独立的,或者足够通用于<div>
元素。
因此,规范似乎表明,使用选项1,与<section>
儿童<section>
是<section>
是最佳实践。
参考
基于这个HTML5 Doctor图 ,我想这可能是最好的标记:
<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的话来说 :
文章元素表示文档,页面,应用程序或站点中的独立组合,并且原则上是可独立分发或可重用的,例如在聚合中。 这可能是论坛post,杂志或报纸文章,博客文章,用户提交的评论,交互式小部件或小工具或任何其他独立内容项目。
看看下面的例子,从HTML5的规格说起 。
它清楚地表明,目前build议(2012年10月)是将小部件组合在aside
。 然后,每个小部件是最好的代表它,一个nav
,一系列块blockquotes
等
下面的摘录显示了如何在博客上使用博客卷和其他内容:
<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>
本书的HTML5“Web开发人员指南:文档的结构和语义” (选项1) :
<aside id="sidebar"> <section id="widget_1"></section> <section id="widget_2"></section> <section id="widget_3"></section> </aside>
它也指出你可以使用页脚中的部分。 所以部分可以在实际的页面内容之外使用。
ASIDE已经被修改以包括次要内容。
HTML5医生在这里有一个伟大的写作: http : //html5doctor.com/aside-revisited/
摘抄:
随着抛开新的定义,了解其背景至关重要。 >在文章元素中使用时,内容应与该文章(例如术语表)具体相关。 当在文章元素之外使用时,>内容应该与网站相关(例如,博客滚动,额外>导航组,甚至如果该内容与页面相关则进行广告)。