When to Use Lists and Why They Matter

Using list structure in HTML may be more beneficial than you think.

More


This content originally appeared on Scott Vinkle - Blog and was authored by Scott Vinkle

There's a reason why most JavaScript frameworks and libraries use a "Todo" app to showcase their demonstration apps: people love lists! Well, most do. Lists are great in that they help give content meaningful structure and help readers stay focused in providing a nod in how many points are remaining out of the total number of possible items.

For this same reason, using HTML list elements, in proper context, helps all users to consume content. Screen reader users have extra benefits as when encountering a list, the total amount of items is announced. WIth this, the user can choose to continue exploring the list items or skip past the list entirely.

Types of list content

Which types of content might be considered a list? Typically, a list would consist of a grouping of related content items, usually concise in nature. That said, here are a few examples of valid list content:

  • Site navigation
  • Breadcrumb navigation
  • Social media links
  • Blog listing page
  • Blog post comments
  • Collection list
  • Error list
  • Product list
  • Related checkbox controls

There are more examples which could be included in this list, but the idea to keep in mind is when content consists of a grouping of related items, chances are it should be a list. The question remains, which list element should be in use?

List elements

There are three different types of list elements in HTML. Each have their own semantic meaning and using them appropriately will go a long way with providing meaning to your content.

Here's a brief overview of each:

  1. Unordered list, ul; A listing of related content with no specific order. Use to add structure and meaning with navigation, blog listing page, carousel arrow controls, ect.
  2. Ordered list, ol; A listing of related content which depends on a specific order. Use to add meaning to check lists, carousel items and bullet controls, etc.
  3. Description list, dl; A listing of related pairs of content. Use to add meaning when defining terminology, an FAQ list, outputting regular/sale pricing, etc.

WCAG success criteria

This comes back to 1.3.1 Info and Relationships which states:

"Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text."

Resources:


This content originally appeared on Scott Vinkle - Blog and was authored by Scott Vinkle


Print Share Comment Cite Upload Translate Updates
APA

Scott Vinkle | Sciencx (2018-12-17T14:06:00+00:00) When to Use Lists and Why They Matter. Retrieved from https://www.scien.cx/2018/12/17/when-to-use-lists-and-why-they-matter/

MLA
" » When to Use Lists and Why They Matter." Scott Vinkle | Sciencx - Monday December 17, 2018, https://www.scien.cx/2018/12/17/when-to-use-lists-and-why-they-matter/
HARVARD
Scott Vinkle | Sciencx Monday December 17, 2018 » When to Use Lists and Why They Matter., viewed ,<https://www.scien.cx/2018/12/17/when-to-use-lists-and-why-they-matter/>
VANCOUVER
Scott Vinkle | Sciencx - » When to Use Lists and Why They Matter. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2018/12/17/when-to-use-lists-and-why-they-matter/
CHICAGO
" » When to Use Lists and Why They Matter." Scott Vinkle | Sciencx - Accessed . https://www.scien.cx/2018/12/17/when-to-use-lists-and-why-they-matter/
IEEE
" » When to Use Lists and Why They Matter." Scott Vinkle | Sciencx [Online]. Available: https://www.scien.cx/2018/12/17/when-to-use-lists-and-why-they-matter/. [Accessed: ]
rf:citation
» When to Use Lists and Why They Matter | Scott Vinkle | Sciencx | https://www.scien.cx/2018/12/17/when-to-use-lists-and-why-they-matter/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.