侧边栏的最佳HTML5标记

问题描述 投票:60回答:6

我正在为HTML5主题设置我的WordPress侧边栏,并且真的想要正确使用before_widgetafter_widget

所以我的问题是:两种标记模式中哪一种更合适?以下代码完全在<article>元素之外。

选项1:除了部分

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

选项2:Div with Asides

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

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

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

html5 semantic-markup
6个回答
54
投票

首先,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。


24
投票

更新17/07/27:由于这是投票最多的答案,我应该更新此选项以在本地包含当前信息(包含引用的链接)。

从规格[1]

aside元素表示页面的一部分,该部分由与父母分区内容的内容相切的内容组成,并且可以被认为与该内容分开。这些部分通常在印刷字体中表示为侧边栏。

大!正是我们正在寻找的东西。此外,最好还查看<section>

section元素表示文档或应用程序的通用部分。在这种情况下,一节是内容的主题分组。应标识每个部分,通常通过将标题(h1-h6元素)包括为section元素的子元素。

...

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

优秀。正是我们正在寻找的。与用于“自包含”内容的<article> [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/

11
投票

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>

6
投票

基于这个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元素表示文档,页面,应用程序或站点中的自包含组合,并且原则上可独立分发或可重用,例如,文档元素。在联合。这可以是论坛帖子,杂志或报纸文章,博客条目,用户提交的评论,交互式小部件或小工具,或任何其他独立的内容项。


2
投票

这本书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>

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


0
投票

此后,ASIDE已经过修改,以包含次要内容。

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

摘抄:

有了新的定义,保持对其背景的了解至关重要。 >在文章元素中使用时,内容应与该文章特别相关(例如,词汇表)。当在文章元素之外使用时,>内容应该与网站相关(例如,博客滚动,附加>导航组,甚至广告,如果该内容与页面相关)。

© www.soinside.com 2019 - 2024. All rights reserved.