<section> 中的多个 <article> 元素是否应该放在 <ul> 标记中？答案

【问题标题】：Should multiple <article> elements in a <section> be put it in <ul> tags?<section> 中的多个 <article> 元素是否应该放在 <ul> 标记中？
【发布时间】：2010-11-19 14:14:06
【问题描述】：

我正在使用新的 HTML5 标记，我想知道以下两个选项中哪个更可取：

选项 1

<article class="menu">
  <section>
    <header>
      <h4>Breakfast</h4>
    </header>
    <ul>
      <li>
        <article class="menu-item">Cereal</article>
      </li>
      <li>
        <article class="menu-item">Bacon & Eggs</article>
      </li>
      <li>
        <article class="menu-item">Waffles</article>
      </li>
    </ul>
  </section>
  <section>
    <header>
      <h4>Lunch</h4>
    </header>
    <ul>
      <li>
        <article class="menu-item">Peanut Butter & Jelly</article>
      </li>
      <li>
        <article class="menu-item">Ham Sammich</article>
      </li>
      <li>
        <article class="menu-item">Soup</article>
      </li>
    </ul>
  </section>
</article>

选项 2

<article class="menu">
  <section>
    <header>
      <h4>Breakfast</h4>
    </header>
    <article class="menu-item">Cereal</article>
    <article class="menu-item">Bacon & Eggs</article>
    <article class="menu-item">Waffles</article>
  </section>
  <section>
    <header>
      <h4>Lunch</h4>
    </header>
    <article class="menu-item">Peanut Butter & Jelly</article>
    <article class="menu-item">Ham Sammich</article>
    <article class="menu-item">Soup</article>
  </section>
</article>

由于 HTML 4.01 遗留下来的习惯，我目前正在使用第一个选项与标签，但在我看来，它们在 HTML5 中是完全多余且不必要的。哪个更正确？

例如，在本文中他们不使用标签： http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

【问题讨论】：

已修复。我忘记了常规 HTML 与 HAML 相比是多么乏味。

标签： html html-lists semantic-markup

【解决方案1】：

应该吗？不必要。能？是的。

我有一种情况，我正在做类似于您的第一个示例，其中

。在这种情况下，包含元素是

当然，图不是文章。但

和

的规范都允许这样做。

允许的内容是“流内容”，其中包括，

section or nav or article or aside or header or 页脚或图

等等。整个清单很长。因此，这取决于您在特定情况下的感觉。

这些文章摘要是否用作导航到按日期排序的文章全文？如果我想要
作为额外的容器，或者因为我喜欢这种方式，我可能会做类似于上面对 figure 所做的事情。
它是文章的全文，而不是您认为的文章列表吗？省略列表。

【讨论】：

它们是餐厅菜单上的菜单项。它们不是报纸或博客文章之类的文章，但考虑到我从 Bruce Lawson 和 Hixie 等人那里读到的所有内容，这是一个合适的用途。不过，为了回答您的问题，它们将在稍后提供一个完整页面链接的摘要。
点头这也是我的理解。＆我喜欢那种情况下的列表版本，但绝对有效。 :-)

【解决方案2】：

无论是什么版本的 HTML 都只是数据集合的语义标记。如果使用列表拆分文章在语义上有意义，那么这是正确的方法。如果没有，那么它是不正确的。如果您只是担心要通过网络发送的极简字节，那么您可以在任何版本的 html 中不使用列表并将其替换为段落标签。

通常，语义标记与您呈现数据的方式有关，而不仅仅是数据本身。例如，如果您想使用EasySlider 之类的东西，那么您必须将这些项目放在一个列表中，因为这是它使用的约定。以不同方式呈现的相同数据可能需要完全不同的标记。

【讨论】：