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:

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:

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>

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.