0

I have a ul that can have a varying number of lis inside it:

<ul>
  <li>content</li>
  <li>content</li>
</ul>

When there are no items in the list, we would have no li elements:

<ul>
  <!-- nothing -->
</ul>

However, when this is displayed to the user, it is not clear there is even a list there. To improve UX, we would want to indicate the lack of items somehow.

To solve the UX problem, one would be inclined to create a li that says this:

<ul>
  <li>no items</li>
</ul>

However, this implies there is in fact an item, "no items", in the list. This is incorrect.

Another option would be to put a different element inside the ul to indicate the lack of items:

<ul>
  <div>no items</div>
</ul>

However, only lis (and script + template elements) are permitted inside a ul.

My question is: what is the recommended way (that is semantically correct) to indicate to the user that a list contains no items?

Tables have the same issue, though I suspect the solution would be similar.

Chris Smith
  • 2,928
  • 4
  • 27
  • 59
  • An unordered list only has the semantic meaning you give it beyond it being a list with no intrinsic order. If you say the list has an item saying there are no items, you have given that one item the semantics of "not an item"", and therefore it is true. – Heretic Monkey Dec 18 '19 at 19:23
  • In any case, asking for recommendations and opinions is off-topic on Stack Overflow. Do what you think is right. – Heretic Monkey Dec 18 '19 at 19:25
  • 2
    If there are no items to list, then simply remove the list. You are keeping the list in place, but keeping it empty. You either remove the list, therefor implying that an empty list is no list, or you leave the empty list, and outside if it you explicitly say that the list is empty. – omoshiroiii Dec 18 '19 at 19:27
  • Just replace the `
      ` with a `` or something saying "your list is empty".
     – TylerH Dec 18 '19 at 20:13

1 Answers1

4

Can use css after when it is empty

ul:empty::after {
  content: "No results";
}
<h3>Empty</h3>
<ul></ul>
<h3>Not Empty</h3>
<ul>
  <li>X</li>
</ul>
epascarello
  • 204,599
  • 20
  • 195
  • 236