我正在为HTML5主题设置我的WordPress侧边栏,并且真的想要正确使用before_widget
和after_widget
。
所以我的问题是:两种标记模式中哪一种更合适?以下代码完全在<article>
元素之外。
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
<div id="sidebar">
<aside id="widget_1"></aside>
<aside id="widget_1"></aside >
<aside id="widget_1"></aside >
</div>
我想辅助问题是每个小部件标题使用的标题。如果我将每个小部件包装在<section>
中,那么<h1>
似乎是最合适的。如果我使用<aside>
,我不确定。
欢迎所有意见。魔鬼的拥护者鼓励。
首先,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
再次使用部分,如果他们有一个页眉或页脚,否则使用普通div。
更新17/07/27:由于这是投票最多的答案,我应该更新此选项以在本地包含当前信息(包含引用的链接)。
从规格[1]:
aside元素表示页面的一部分,该部分由与父母分区内容的内容相切的内容组成,并且可以被认为与该内容分开。这些部分通常在印刷字体中表示为侧边栏。
大!正是我们正在寻找的东西。此外,最好还查看<section>
。
section元素表示文档或应用程序的通用部分。在这种情况下,一节是内容的主题分组。应标识每个部分,通常通过将标题(h1-h6元素)包括为section元素的子元素。
...
一般规则是,只有元素的内容在文档的大纲中明确列出时,section元素才是合适的。
优秀。正是我们正在寻找的。与用于“自包含”内容的<article>
[2]相反,<section>
允许相关内容不是独立的,或者对于<div>
元素来说足够通用。
因此,该规范似乎表明使用选项1,<aside>
与<section>
儿童是最佳做法。
参考
从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>
基于这个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元素表示文档,页面,应用程序或站点中的自包含组合,并且原则上可独立分发或可重用,例如,文档元素。在联合。这可以是论坛帖子,杂志或报纸文章,博客条目,用户提交的评论,交互式小部件或小工具,或任何其他独立的内容项。
这本书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>
它还指出您可以使用页脚中的部分。因此,部分可以在实际页面内容之外使用。
此后,ASIDE已经过修改,以包含次要内容。
HTML5 Doctor在这里有一篇很棒的文章:http://html5doctor.com/aside-revisited/
摘抄:
有了新的定义,保持对其背景的了解至关重要。 >在文章元素中使用时,内容应与该文章特别相关(例如,词汇表)。当在文章元素之外使用时,>内容应该与网站相关(例如,博客滚动,附加>导航组,甚至广告,如果该内容与页面相关)。