Learn about Semantically Correct Lists

What does semantically correct mean?

Semantically correct refers to using HTML elements in a way that convey meaning about the content and structure of a webpage. These elements describe their purpose to both browsers and developers, improving readability, accessibility, and SEO (search engine optimization).

Good, semantic HTML:

<header>Website Header</header>

<nav>Navigation</nav>

<section>Content Section</section>

<article>Blog Article</article>

<footer>Website Footer</footer>

Bad HTML. The HTML tags associated with the content give no clues as to the content they hold.

<div>Header</div>

<div>Navigation</div>

<div>Content Section</div>

<div>Blog Article</div>

<div> Footer</div>

What are lists in HTML?

In HTML, lists are used to group related items together in a structured way. They help organize content, making it easier to read and navigate. HTML provides for three types of lists: ordered, unordered, and description.

Ordered Lists

An ordered list, <ol>, is used when the list needs to be numbered, for example:

Step one
Step two
Step three

<ol>
   <li>Step one </li>
   <li>Step two </li>
   <li>Step three </li>
</ol>

Unordered Lists

An unordered list, <ul>, is used to make a simple list of items where numbering isn't needed, for example:

Apples
Oranges
Grapes

<ul>
   <li>Apples</li>
   <li>Oranges</li>
   <li>Grapes</li>
</ul>

Description Lists

The third type of list, a description list, <dl>,is used to list a set of items and their associated descriptions, as you would see for a dictionary.

term one. text is then indented and reads term one really means this. term two. text is then indented and reads term two really means this.

 <dl>
  <dt>term one</dt>
  <dd>
    term one really means this
  </dd>
  <dt>term two</dt>
  <dd>
    term two really means this
  </dd>
</dl>

Why Correct Structure Matters

Screen readers assist users by announcing when they encounter a list and indicating how many items it contains. This feature helps listeners understand the context of what they are hearing and anticipate the remaining content as they navigate the list.

Failing to use proper semantic markup and hierarchy for lists can prevent list items from effectively conveying their structure and context. Correct structure benefits screen reader users by allowing them to navigate from the first item to the last or skip entire lists of links as needed, helping them bypass groups of links when desired.

By using proper semantic markup, you enable screen readers to recognize and interact with lists effectively. Style sheets can be applied to customize the visual presentation of lists without compromising their structural integrity.

Learn about Fixing List Issues.

Resources

Basic HTML Lesson on Creating Lists from mdn web docs
Learn about Semantics in HTML from mdn web docs

Learn More with WCAG

DubBot Flags:

Ensures that lists are structured correctly, <ul> and <ol> must only contain <li>, <script>, or <template elements>
Ensures <li> elements are used semantically, <li> elements must be contained in a <ul> or <ol>.

If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!

In this article