Should multiple elements in a

Question

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/

Answer 1

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.

Answer 2

HTML no matter what version is just a semantic markup for a collection of data. If using a list to split apart the articles makes sense semantically, then that is the correct way. If it does not, then it is incorrect. If you are just worried about minimalistic bytes to send across the wire, then you could do without the list in any version of html and replace it with paragraph tags.

Typically semantic markup has a little more to do with how you are presenting the data, than just the data alone. For instance, if you want to use something like EasySlider, then you have to put the items in a list because that is the convention it uses. The same data presented in a different way could require an entirely different markup.