What are HTML lists? How to use , and tags

With HTML lists, you can present in­form­a­tion in a struc­tured and clear format. Depending on your needs, you can create an ordered list with numbering, an unordered list or a defin­i­tion list. The HTML tags you’ll need for these types of lists are <li>, <ol>, <ul>, and <dl>.

What are lists in HTML?

HTML lists are used in HTML to present in­form­a­tion and elements in a struc­tured and easy-to-read list format. You can format content as an ordered list with numbers or an unordered list without numbers. With the in­tro­duc­tion of HTML5, a third option for lists became available: defin­i­tion lists. This latest addition is perfect for creating lists where you need to describe or define items.

HTML lists are an essential element for creating clearly struc­tured websites that are visually appealing. They help ensure in­form­a­tion is com­mu­nic­ated in a clear and quick manner. Whether you’re simply listing items, providing a step-by-step tutorial or present­ing detailed defin­i­tions, lists can help you to organise your content.

What types of lists does HTML have?

Lists can be displayed in various forms in HTML. While ordered and unordered lists are commonly used, defin­i­tion lists (also known as de­scrip­tion lists) are much less common. In the sections below, we’ll take a closer look at the different types of HTML lists and their syntax.

Ordered lists

An ordered HTML list is a list made up of items that you can arrange in a se­quen­tial order using number or letters. To create an ordered list, use the HTML tags <ol> and </ol>. Between the opening and closing tags, you can use multiple <li>…</li> tags for the different list items. Ordered lists are great for dis­play­ing rankings, step-by-step in­struc­tions and lists of questions.

The syntax for ordered lists looks like this:

<ol>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
<li>…</li>
</ol>

Here’s what the output looks like:

Close

Unordered lists

In an unordered HTML list, list items aren’t assigned numbers or letters. Instead, bullet points or symbols like dashes, arrows or ticks are used to separate list items. This allows you to present in­form­a­tion in a struc­tured way without having to arrange it hier­arch­ic­ally.

Recipe in­gredi­ents and lists of cities and countries are two common examples where an unordered list works great. To create an unordered list, use the opening HTML tag <ul>, the closing tag </ul>, and multiple <li>…</li> tags.

The syntax for unordered lists is as follows:

<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
<li>…</li>
</ul>

Here’s the output:

Close

De­scrip­tion lists

With a de­scrip­tion list, you can organise selected terms and their defin­i­tions/de­scrip­tions in a struc­tured format. This type of HTML list is es­pe­cially useful for gloss­ar­ies, product lists and FAQs. To create a defin­i­tion list, you’ll need the following three com­pon­ents:

• <dl>…</dl>: This stands for defin­i­tion list and marks the beginning and end of the list.
• <dt>…</dt>: This stands for defin­i­tion term and marks the term that is going to be defined.
• <dd>…</dd>: This stands for defin­i­tion de­scrip­tion and marks the defin­i­tion or de­scrip­tion of the term between the <dt> tags. This comes directly after the <dt> tags.

You can create HTML defin­i­tion lists using the following syntax:

<dl>
<dt>Term 1</dt>
<dd>Description or definition of Term 1</dd>
<dt>Term 2</dt>
<dd>Description or definition of Term 2</dd>
<dt>Term 3</dt>
<dd>Description or definition of Term 3</dd>
<dt>…</dt>
<dd>…</dd>
</dl>

Close

Overview of different ways to use HTML lists

Below is a quick summary of the various ways you can use the different types of HTML lists:

Why you should use HTML lists

Using HTML lists helps improve ef­fi­ciency and or­gan­isa­tion when present­ing content and in­form­a­tion on your website. Some of the benefits of using lists include:

• Enhanced structure, clarity and or­gan­isa­tion of in­form­a­tion
• More variety and improved search engine ranking due to diverse page elements
• Optimised ac­cess­ib­il­ity and better read­ab­il­ity through clear semantic struc­tur­ing of pages
• Cus­tom­ised visual present­a­tion of content, par­tic­u­larly when combined with CSS styling