Newer Things to Know About Good Ol’ HTML Lists
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:
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
<menu> element, which you may be surprised to learn… is actually a type of list, too!
Browsers automatically apply their own User Agent styles to help with the visual structure of lists right out of the box. That can be great! But if we want to start with a blank slate free of styling opinions, then we have to reset those styles first.
For example, we can remove the markers next to list items pretty easily. Nothing new here:
:where() instead of
:is()? The specificity of
:where() is always zero, whereas
:is() takes the specificity of the most specific element in its list of selectors. So, using
:where() is a less forceful way of overriding things and can be easily overridden itself.
UA styles also apply padding to space a list item’s content from its marker. Again, that’s a pretty nice affordance right out of the box in some cases, but if we’re already removing the list markers like we did above, then we may as well wipe out that padding too. This is another case for
OK, that’s going to prevent marker-less list items from appearing to float in space. But we sort of tossed out the baby with the bathwater and removed the padding in all instances, including the ones we previously isolated in an
<article>. So, now those lists with markers sorta hang off the edge of the content box.
Notice that UA styles apply an extra
40px to the
Or not… maybe it comes down to stylistic preference?
Unfortunately, there are a couple of accessibility concerns when it comes to lists — even in these more modern times. One concern is a result of applying
list-style: none; as we did when resetting UA styles.
You absolutely don’t have to use either method. Using a heading or an ARIA label is just added context, not a requirement — be sure to test your websites with screen readers and do what offers the best user experience for the situation.
OK, so, you’re likely wondering about all of the
<menu> elements that I’ve been slipping into the code examples. It’s actually super simple; menus are unordered lists except that they’re meant for interactive items. They’re even exposed to the accessibility tree as unordered lists.
Today, however, this is the semantic way to use menus:
Personally, I think there are some good use-cases for
<menu>. That last example shows a list of social sharing buttons wrapped up in a labeled
<menu> element, the notable aspect being that the “Share article” label contributes a significant amount of context that helps describe what the buttons do.
But let’s not end things on a negative note. Here’s a list of super cool things you can do with lists:
If you need help creating a digital marketing strategy for your business, don’t hesitate to contact one of Digidude’s consultants.