Semantic separator in an unordered list

Question

I have done a little looking around and am looking for the most semantic way of inserting a separator in a list, where the separator has meaning.

The list of items is a menu, and isn't long enough to separate into two separate lists, but I'd like to have a way of showing that there is an extra layer of grouping.

<h1>Our menu:
<ul>
 <li> Duck ala orangé
 <li> Chicken ala Banana
 <li> Beef
 <!-- Some kind of separator here -->
 <li> Chocolate mousse
 <li> Wafer thin mints
</ul>

Since I want this to be suitable for screen readers, so a CSS-only solution like adding a border-bottom to the "Beef" item doesn't really work. I can change the HTML, but I'd rather not have a solution that ends up having two lists wrapped in another element, but could be convinced otherwise.

So is there a nice semantic / WCAG-compliant way of denoting a semantic separator in a list?

"*isn't long enough to separate into two separate lists*". Why not? There isn't a minimum list length — Oriol, Mar 29 '14 at 00:18
True, but it would mean 2 `ul`s of 3-4 items each, all wrapped up in another element (maybe `nav`?) to group them together. That seems like a lot of extraeneous markup. Also, the items all belong together. As I said I could be convinced by a good answer. — , Mar 29 '14 at 00:20
There is nothing in HTML that is defined to be a separator in a list, so asking for “most semantic way” is effectively an opinion poll. — Jukka K. Korpela, Mar 29 '14 at 07:07

score 3 · Answer 1 · edited May 23 '17 at 12:01

An ul may only contain li elements (and script/template elements, but they are irrelevant for this question).

Using an additional li for the separator doesn’t seem to be appropriate because a separator is hardly a "list item".

If a list can be split into several groups (or, well, lists), I’d go with using several ul elements, optionally with headings.

<h1>Our menu</h1>

<h2>Meat</h2>
<ul>
  <li>Duck ala orangé</li>
  <li>Chicken ala Banana</li>
  <li>Beef</li>
</ul>

<h2>Dessert</h2>
<ul>
  <li>Chocolate mousse</li>
  <li>Wafer thin mints</li>
</ul>

Thanks to the headings, this allows user-agents (e.g., screen readers with outline access) to jump directly to a list of interest.
If you don’t want to provide explicit headings, you could use section so that there are still outline entries (unlabeled, though) (and/or visually hide the headings):

<h1>Our menu</h1>

<section>
  <ul>
    <li>Duck ala orangé</li>
    <li>Chicken ala Banana</li>
    <li>Beef</li>
  </ul>
</section>

<section>
  <ul>
    <li>Chocolate mousse</li>
    <li>Wafer thin mints</li>
  </ul>
</section>

It would certainly be possible to use only one list (as suggested by Oriol):

<h1>Our menu</h1>

<ul>

  <li>
    <ul>
      <li>Duck ala orangé</li>
      <li>Chicken ala Banana</li>
      <li>Beef</li>
    </ul>
  </li>

  <li>
    <ul>
      <li>Chocolate mousse</li>
      <li>Wafer thin mints</li>
    </ul>
  </li>

</ul>

But personally I don’t find it elegant to have those unlabeled top-level li.

If you can use headings, you should definitely use explicit section elements (otherwise the heading scope includes the beginning of the next list item):

<h1>Our menu</h1>

<ul>

  <li>
    <section>
      <h2>Meat</h2>
      <ul>
        <li>Duck ala orangé</li>
        <li>Chicken ala Banana</li>
        <li>Beef</li>
      </ul>
    </section>
  </li>

  <li>
    <section>
      <h2>Dessert</h2>
      <ul>
        <li>Chocolate mousse</li>
        <li>Wafer thin mints</li>
      </ul>
    </section>
  </li>

</ul>

But why? This gives you a list of categories on the first level (while the actual items are on the second level). But is this useful? Probably depends on the context, but generally I’d prefer to use headings/sections (for each category) + separate lists.

It’s probably mostly personal taste.

score 2 · Answer 2 · answered Mar 29 '14 at 00:28

You could try using submenus:

<h1>Our menu:</h1>
<ul id="menu">
    <li><ul>
        <li> Duck ala orangé</li>
        <li> Chicken ala Banana</li>
        <li> Beef</li>
    </ul></li>
    <li><ul>
        <li> Chocolate mousse</li>
        <li> Wafer thin mints</li>
    </ul></li>
</ul>

styled with

#menu {
    list-style: none;
    padding-left: 0;
}
#menu > li:not(:first-child) { /* or #menu > li:nth-child(n+2) */
    border-top: 1px solid;
}

Demo

Semantic separator in an unordered list

2 Answers2