Issue #13 - ol vs. ul vs. div

I believe many sites aren’t accessible just because devs don’t know how to write semantic HTML, but why. If I don’t know which consequences my choices have on users, why would I bother using anything else but the div? This week’s issue tries to answer “Why?” and not just “How?”.

Have a great weekend,
Manuel

View this issue in the browser.

HTMHell Newsletter 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>

NVDA with Firefox announces “List with 3 items, Bullet Jay and Silent Bob Strike Back, Bullet Mallrats, Bullet Clerks, Out of list”. Watch a video demo in the browser.

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>

NVDA with Firefox announces “List with 3 items, 1 Clerks, 2 Mallrats, 3 Jay and Silent Bob Strike Back, Out of list”. Watch a video demo in the browser.

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 with Firefox announces “Jay and Silent Bob Strike Back, Mallrats, Clerks”. Watch a video demo in the browser.

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.

Read this issue in your browser or share it with others: www.htmhell.dev/tips/ol-vs-ul-vs-div