侧边栏的最佳HTML5标记_Html_Semantic Markup

侧边栏的最佳HTML5标记

html

侧边栏的最佳HTML5标记,html,semantic-markup,Html,Semantic Markup,我正在为HTML5主题设置我的WordPress边栏，我真的很想在widget之前使用，在widget之后使用所以我的问题是：这两种标记模式中哪一种更合适？以下代码完全在元素之外备选方案1：除章节外选项2：带辅助线的Div 我想辅助问题是每个小部件标题使用什么标题。如果我用包装每个小部件，那么似乎最合适。如果我使用，我不确定欢迎所有意见。魔鬼的拥护者受到鼓励。首先，搁置只用于表示与主要内容相关的内容，而不是一般的侧边栏第二个，仅为每个侧边栏留出一个每个边栏只有一个边栏。侧边栏的

我正在为HTML5主题设置我的WordPress边栏，我真的很想在widget之前使用

，在widget

之后使用


所以我的问题是：这两种标记模式中哪一种更合适？以下代码完全在
元素之外
备选方案1：除章节外


选项2：带辅助线的Div


我想辅助问题是每个小部件标题使用什么标题。如果我用
包装每个小部件，那么
似乎最合适。如果我使用
，我不确定
欢迎所有意见。魔鬼的拥护者受到鼓励。
首先，搁置只用于表示与主要内容相关的内容，而不是一般的侧边栏第二个，仅为每个侧边栏留出一个
每个边栏只有一个边栏。侧边栏的元素是侧边栏中的div或section
我会选择选项1：除了章节之外
<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>


仅当他们有页眉或页脚时，再次使用section，否则使用普通div。
更新17/07/27:由于这是投票最多的答案，我应该更新此部分以包含本地的当前信息（带有参考链接）
根据规范：
aside元素表示页面的一部分，该部分由
与父项内容切向相关的内容
分段内容，可将其视为独立的内容
内容。这些部分通常在印刷体中表示为边栏
印刷术
太好了！正是我们要找的。此外，最好也查看

section元素表示文档或文档的通用节
应用在这种情况下，一节是一个主题分组
内容。应确定每个部分，通常包括
标题（h1-h6元素）作为节元素的子元素

一般规则是，只有在文档大纲中明确列出元素的内容时，section元素才是合适的
好极了。这正是我们要找的。与用于“自包含”内容的相反，
允许不独立的相关内容，或不适合
元素的通用内容
因此，规范似乎建议使用选项1，


基于此，我认为这可能是最好的标记：
<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 -->

：
article元素表示文档中的自包含组合
文档、页面、应用程序或站点，即原则上，
可独立分发或可重复使用，例如在联合中。这
可以是论坛帖子，杂志或报纸文章，博客条目，
用户提交的评论、交互式小部件或小工具，或任何
其他独立的内容项
请看下面的示例，来自
它明确指出，目前建议（2012年10月）将小部件分组在元素旁边。然后，每个小部件都是最能代表它的东西，一个nav
，一系列blockquotes
，等等
以下摘录显示了如何将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>


我的精彩博客
我的口号

档案室


—
—

此后，旁白也被修改为包括次要内容
HTML5博士在这里有一篇很棒的文章：

摘录：
有了新的“搁置”定义，保持对其上下文的了解至关重要。>在文章元素中使用时，内容应与该文章（例如，术语表）明确相关>。当在文章元素之外使用时，>内容应该与站点相关（例如，blogroll、附加>导航组，甚至广告，如果该内容与页面相关）
这本书建议这样做（选项1）：


它还指出，您可以在页脚中使用节。所以节可以在实际页面内容之外使用。
我喜欢该选项的外观。我想我对这个选项的关注，我应该在上面列出，就是如果每个小部件和其他小部件无关，它们真的是单个部件的一部分吗？我不知道。它们肯定是一个侧边里面的部分。我的答案是正确的，你可以点击“/（勾选）标记，将其评定为正确答案。那么，是什么让它们成为一个旁白而不是多个独立旁白的一部分呢？我没有被出卖。正如我所说，我喜欢选项1的外观，但当我考虑它时，它没有太多的意义。如果你有2个侧边栏，你将有2个在旁边。但是您有一个侧边栏，其中有几个部分/小部件。这就是为什么选择1。每个侧边栏一个侧边栏我认为上面给出的解决方案过于依赖侧边栏元素和#侧边栏的视觉样式之间的等效性。一个典型的WordPress边栏将包含一个blogroll、归档链接，可能还有一个登录小部件。它们都与页面/站点相关，但只有在这种能力下，它们才彼此相关。从逻辑上讲，它们可以放在许多不同的地方，但它们恰好组合在一个侧栏中。所以我认为，@等待Dev。。。下面更近。如果这些小部件以可视方式组合在一起，则使用div.Related链接（）表示不同。OP确实提到这是在@conexion之外使用的，我读过那篇文章和@shawn发布的那篇文章。我认为两者都没有真正解决这个问题，这就是为什么我首先发布这个。我最终选择了@web开发者推荐的
和s。感觉不太对劲，但我还是没有想出更好的办法。对不起，
<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 -->

<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 id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>