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>

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.

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>