Lists can significantly improve web content when used properly. Readers want short, succinct content, and lists provide streamlined information. However, lists must use appropriate HTML in order to be accessible. When lists use simple text formatting, some visitors may not realize that they’re reading a list.
HTML solves this problem by explaining the semantic structure of the content — in other words, software that accesses the page will understand that the page contains a list, which allows the software to take appropriate actions. This can be enormously beneficial for people who use assistive technologies.
Poor list implementation creates accessibility issues.
To understand why, consider how real-world users interact with your site. Many people with vision disabilities use screen readers to access content. Without semantic structure, these programs might read all of the information on a page in the order that it appears. If the content contains a plaintext list, the screen reader will often read that content as a single paragraph, which can be frustrating and confusing.
Other users may use hotkeys to jump from one section of a site to the next. If the list is in plaintext, they might mistakenly believe that they can move from one list item to the next — and instead, the hotkey might send them to the next section of the page.
Optimal HTML prevents these types of negative experiences. If a user with vision disabilities uses a screen reader, for instance, the program might inform them that they’re beginning a list or simply pause after reading each list item. In either case, the user won’t hear a confusing jumble of sentences. Proper semantics can also improve navigation for people who don’t use a keyboard and mouse to browse your site.
With that said, you’ll need to consider several factors in order to use HTML effectively.
Decide whether the list is the best format for the content.
Some lists don’t actually need to be lists, and you might improve your site’s readability by using other techniques. Before adding a list to a page, consider whether the content would work better as a series of paragraphs with headings.
Ideally, each item in a list will be brief. If you’re writing long paragraphs after each item — like we’re doing in this article — you might consider changing the list items into heading tags like <h2> and <h3>. These tags are intended to break up longer subsections of a topic.
Users will still be able to scan the content to find the information they need, since assistive technologies recognize heading and subheading tags as structural elements. Our article on subsection headings provides more guidance for using <h2>, <h3>, and other heading tags properly.
Use the right type of HTML list.
If you’ve decided to use a list, make sure to use the appropriate HTML. Your options include:
- Unordered Lists - Identified by the <ul> tag, these lists group items without a particular order. The list you’re reading right now is an example of an unordered list.
- Ordered Lists - Identified by the <ol> tag, ordered lists display related items in order. If you want list items to be sequenced with numeric or alphabetical identifiers (for instance, 1. Go to store, 2. Buy eggs., etc.), you’ll want to use an ordered list.
- Description Lists - Identified by the <dl> tag, description lists provide descriptions or definitions for grouped items. Description lists are frequently used for glossaries and recipes.
Each item in an unordered or ordered list should be identified with <li> and </li> tags. This allows software (and search engines) to distinguish between different list items.
Description lists work slightly differently. The <dt> tag indicates the name of each item, while the <dd> tag indicates the item’s description (or other value). For example:
<dl>
<dt>Chicken<dt>
<dd>A small bird that lays eggs.</dd>
<dt>Fish</dt>
<dd>An invertebrate animal that swims in water.</dd>
</dl>
Regardless of which list you choose, make sure to properly tag each item. Depending on your content management system, a list may display properly without proper semantic HTML — but if that HTML is missing, the user experience will suffer.
Use Nested Lists Where Appropriate
An HTML list can also include nested items. A nested list is essentially a list within a list. To create them, you’ll use the same tags as with the earlier examples, but within the primary (or parent) list. Web browsers, screen readers, and other technologies will recognize the nested list as a subdivision of the primary list. For example, you might write:
<li>Oranges</li>
<li>Apples
<li>Gala Apples</li>
<li>Granny Smith Apples</li>
</ul>
<li>Bananas</li>
</ul>
That HTML would be displayed as:
- Oranges
- Apples
- Gala Apples
- Granny Smith Apples
- Bananas
Nested lists aren’t always appropriate, but if you decide to use them, make sure to use proper HTML. Don’t rely on visual cues alone.
Lists are excellent tools for improving longform content, as they help your users perceive and understand information. Proper semantic markup makes lists more useful to all of your users — not just people with disabilities — and makes website maintenance much easier over time.
