Issue #13 - ol vs. ul vs. div

The difference between using ol, ul, and div for a list of items.

<!-- An ordered list -->
<ol>
<li>Clerks (1994)</li>
<li>Mallrats (1995)</li>
<li>Jay and Silent Bob Strike Back (2001)</li>
</ol>

<!-- Just text -->
<div>
<div>Clerks (1994)</div>
<div>Mallrats (1995)</div>
<div>Jay and Silent Bob Strike Back (2001)</div>
</div>

Recently someone on Twitter asked Is semantic HTML really that useful?. That's a great question because most people know how to write HTML but not why. In a series of posts, I'll try to explain why semantic HTML is useful. I want to begin with the ol and ul elements.

Why is the <ul> / <ol> element useful?

  • Screen readers might announce it as a list of items
  • Screen readers might announce the number of items in the list
  • Screen readers might announce the bullet or number of each item
  • Screen reader users can use shortcuts to jump from list to list on a page
  • It groups related content visually
  • It provides a selector for styling (un)ordered lists in CSS

Unordered lists

We use the <ul> element for identifying an element as a group of n items that thematically belong together, listed in no particular order.

<h3>Some of my favorite movies directed by Kevin Smith</h3>
<ul>
<li>Jay and Silent Bob Strike Back</li>
<li>Mallrats</li>
<li>Clerks</li>
</ul>

Here's what you get when you use NVDA with Firefox:

NVDA announces “List with 3 items, Bullet Jay and Silent Bob Strike Back, Bullet Mallrats, Bullet Clerks, Out of list”

Ordered lists

We use the <ol> element for identifying an element as a group of n items that thematically belong together, listed in a particular order.

<h3>Movies directed by Kevin Smith sorted by release date</h3>
<ol>
<li>Clerks (1994)</li>
<li>Mallrats (1995)</li>
<li>Jay and Silent Bob Strike Back (2001)</li>
</ol>

Here's what you get when you use NVDA with Firefox:

NVDA announces “List with 3 items, 1 Clerks, 2 Mallrats, 3 Jay and Silent Bob Strike Back, Out of list”

Divs

If we don't use semantic elements, screen readers just announce a bunch of unrelated strings. This might work, too, but sometimes it's better to provide structure and convey more information.

<h3>Movies directed by Kevin Smith sorted by release date</h3>
<div>
<div>Clerks (1994)</div>
<div>Mallrats (1995)</div>
<div>Jay and Silent Bob Strike Back (2001)</div>
</div>

NVDA announces “Jay and Silent Bob Strike Back, Mallrats, Clerks”

Styling lists

Things get a little complicated as soon as we style our lists, but that’s something I’ll cover in another issue. In the meantime, check out "Fixing" Lists by Scott O'Hara.

Did you enjoy this tip?

Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.