HTML lists are boring. They don’t do much, so we don’t really think about them despite how widely used they are. And we’re still able to do the same things we’ve always done to customize them, like removing markers, reversing order, and making custom counters.
There are, however, a few “newer” things — including dangers — to know when using lists. The dangers are mostly minor, but way more common than you might think. We’ll get to those, plus some new stuff we can do with lists, and even new ways to approach old solutions.
To clarify, these are the HTML elements we’re talking about:
Ordered lists
Unordered lists
Description lists
Interactive lists
Ordered lists, unordered lists, and interactive lists contain list items (
) which are displayed according to what kind of list we’re dealing with. An ordered list () displays numbers next to list items. Unordered lists (
) and menu elements () displays bullet points next to list items. We call these “list markers” and they can even be styled using the ::marker pseudo-element. Description lists use description terms () and description details () instead of and don’t have list markers. They‘re supposed to be used to display metadata and glossaries, but I can’t say I’ve ever seen them in the wild.
Let’s start off with the easy stuff — how to correctly (at least in my opinion) reset list styles. After that, we’ll take a look at a couple of accessibility issues before shining a light on the elusive