Is it semantically correct in HTML to markup a list with only a single list item?

Question

Is it semantically correct to markup a ul in HTML with another embedded ul that has only one single list item?

For example, I have a ul with several lis, and one of those lis has an embedded ul with a single li:

<ul>
  <li>Example LI 1
    <ul>
        <li>Example LI 1a</li>
    </ul>
  </li>
  <li>Example LI 2</li>
  <li>Example LI 3</li>
</ul>

Personality

why do you think it wouldn't be correct? – Warchaw

Also, your main question (the "title" if you like), and the first question you actually ask are opposites. One asks if it's semantically correct, the other if it's semantically incorrect. Which would you like people to answer? – Cubitiere

@icabod, fixed to avoid confusion. – Slivovitz

Answer 1

Absolutely. A list is not defined by quantity. It's defined by semantics. So a list can consist of only one element if only one item applies to the list's purpose. For example, I have only crashed one computer today so that list would be only one element long.

Martine

Answer 2

Yes, it is semantically correct to have a list with a single item if used correctly, even if it does feel a little strange (it’s not really a list if there is only one item because by definition, a list is, well, a list of item​s, otherwise it would just be an item).

In the example you provided, the items were placeholders and had no meaning, so it is hard to tell if it applies. Whether it is correct or not depends on why you are putting it in a sub-item. It is perfectly reasonable to have a single-item sub-list if it is indeed a list item, especially if there are other sub-lists with multiple items. In that case, the meaning is clear. For example, the following is fine:

<h1>Auto Insurance Customers</h1>
<ul>

  <li>
    <strong>#1234</strong>
    <ul>
      <li>2003 Ford Focus</li>
      <li>1998 Ford Escort</li>
    <ul>
  </li>

  <li>
    <strong>#2468</strong>
    <ul>
      <li>1999 Lamborghini Diablo VT Roadster</li>
    </ul>
  </li>
  …

</ul>

There is nothing wrong with this example because it is perfectly reasonable for a customer to have a single car while others may have more.

On the other hand, if the reason that you are making the single-item sub-list is simply to create an indent to offset and highlight part of a list item, then it is incorrect.

For example, say you have a list of paragraphs of text. In one of the paragraphs, you have a passage that needs some sort of attention and you want to indent and offset it. While putting it in a list would work, it is incorrect because you are mixing style with structure.

The correct way to accomplish this would be to wrap the section in another tag (like <blockquote>, styled <div>, etc.) and leave it in the regular flow of that list item. In the following example, there is a part of one of the list items that needs to be highlighted. Putting it in a (single-item) list is the wrong way to do it:

<h1>Blog posts or something…</h1>
<ul>

  <li>
    <strong>Foo</strong>
    <p>Some long paragraph about Foos, what they do, how they work, etc.</p>
    <p>More information about Foos and where they originated.</p>
    <p>Instructions on care and feeding of Foos.</p>
  </li>

  <li>
    <strong>Bar</strong>
    <p>Detailed description of local watering holes for lawyers.</p>
    <p>Anecdotes about experiences of drinking & lawyering.</p>

    <!-- This section is to be highlighted and offset to draw attention to it from the rest of this list item. -->
    <ul>
      <li>
        <p>Highlighted account of the subsequent problems and what happened that one strange night.</p>
      </li>
    </ul>

    <p>Summary of what to not do when out drinking with lawyers.</p>
  </li>

  <li>
    <strong>Baaz Luhrmann</strong>
    <p>A bunch of stuff about a brass-skinned movie director who made a widely-panned film adaptation of a Shakespeare play who turns to stone and traps your sword when he dies.
  </li>

</ul>

Instead, you should use the correct tag for this purpose. Not only is it semantically and structurally correct, it is also clearer and even reduces the size of the page a little:

<style…>
  p.highlight {
    margin : 20px 50px;
    width  : 150px;
  }
</style>

…
  <li>
    <strong>Bar</strong>
    <p>Detailed description of local watering holes for lawyers.</p>
    <p>Anecdotes about experiences of drinking and lawyering.</p>

    <!-- This section is to be highlighted and offset to draw attention to it from the rest of this list item. -->
    <p class="highlight">
      Highlighted account of the subsequent problems and what happened that one strange night.
    </p>

    <p>Summary of what to not do when out drinking with lawyers.</p>
  </li>

Karalee

(I ran into this exact issue today and decided to look up opinions on single-item lists. The solution suddenly came to me moments after seeing this page so I figured I’d share it. I guess Zeldman’s discussions stuck and reading his book paid off. ☺) – Karalee

Such a use of blockquote is not correct: "represents a section that is quoted from another source". Also, you typically don't want to use headings inside of a list item (without using sectioning elements), as the start of the next list item would still be in scope of the heading of the previous list item (see the last Note for li). – Paxon

@unor, that was just a contrived example; the point was to not use list tags for styling. In any case, I’ve replaced the headings with strongs, and the blockquote with a styled paragraph (though there is nothing wrong with using a blockquote, especially in actual, non-example use where the highlighted paragraph may be an actual quote or excerpt—like in my case this afternoon). – Karalee

Well, you wrote that for "a passage that needs some sort of attention" → "The correct way to accomplish this would be to wrap the section in a <blockquote>". This conveyed that blockquote should be used in any case where you need to draw attention. – Thanks for the edit. – Paxon

Actually, on pg 358 of the aforementioned Zeldman text, he mentions abusing blockquotes for formatting. :-D – Karalee

Answer 3

According to dictionary.com, a list is a meaningfully grouped series of items and a series is a group of similar or related items. (Results are similar at oxforddictionaries.com and thefreedictionary.com.) Anything that contains only one item can't contain meaningful grouping or a similarity or relatedness between its contents. Thus, for a one-item list, the semantics of the markup don't match the semantics of the content.

A single-item list also just doesn't seem to fit with what people mean when they say "list". (On that note, contemporary dictionaries are more focused on recording common usage than proper usage (which is why "bling" is in the OED).)

Additionally, even if it wasn't technically wrong, there just doesn't seem to be much editorial value in marking up such a simple statement as a list instead of a paragraph. It seems to me that the first of the three following examples would be the easiest for the user to parse and comprehend.

<p>XYZ is the only computer that crashed.</p>

<p>
     The computer that crashed:
     <ul><li>XYZ</li></ul>
<p>

<ul>
     <li>
          The computer that crashed:
          <ul><li>XYZ</li></ul>
     </li>
<ul>

Kong