Search code examples
htmlhtml-listssemantic-markup

Should multiple <article> elements in a <section> be put it in <ul> tags?


I'm using the new HTML5 tags and and I was wondering which of the following two options is preferable:

OPTION 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>

OPTION 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>

I'm currently using the first option with the tags due to habits leftover from HTML 4.01, however it seems to me that they are completely redundant and unnecessary in HTML5. Which is more correct?

For example, in this article here they don't use tags: http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/


Solution

  • Should? Not necessarily. Can? Yes.

    I have a situation in which I am doing something similar to your first example with <figure>. In this case the containing element is <nav>. The figures are a list of items with a photo and title. It is a list of navigation items which are also figures. Thus nav > ... > li > figure.

    A figure isn't an article, of course. But it is permitted by the spec with both <figure> and <article>. Permitted contents of <li> are "flow content", which includes,

    section or nav or article or aside or header or footer or figure

    Among others. The whole list is long. So it depends on what feels right to you in your specific situation.

    • Are these article summaries that are serving as navigation to the full text of articles ordered by date? I might do something similar to what I did above with figure if I wanted the <li> for an additional container or because I liked it that way.
    • Is it the full text of articles, and not something you'd think of as a list of articles? Omit the list.