🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

Three Types of HTML Lists: When and How to Use Them All

Reading time 3 min
Published Jun 23, 2017
Updated Oct 2, 2019

TL;DR – HTML lists help group item lists. They come in three types: ordered (numbered), unordered (bulleted) and description lists.

HTML List Explained

Without lists, creating well-structured and easy-to-follow content on a website could be difficult. HTML lists are used for grouping related items on a web page. HTML supports three types of HTML lists:

  • Unordered lists
  • Ordered lists
  • Description lists

Defining Ordered HTML Lists

An ordered list in HTML is an indexed list of items where the order is really important. To create an ordered list, use <ol> tags and wrap every item in <li> tags. By default, ordered lists are numbered.

Ordered HTML lists are important when you need to point out the most important information in the beginning or when the number of items in a list is essential. It can also come in handy when you need to define a sequence:

Example
<ol>
  <li>Action</li>
  <li>Adventure</li>
  <li>Thriller</li>
  <li>Comedy</li>
</ol>

You can also create horizontal lists by using CSS:

Example
ul {
    list-style-type: none;
    margin: 10;
    padding: 10;
    overflow: hidden;
    background-color: cornsilk;
}

li {
    float: right;
}

li a {
    display: block;
    text-align: center;
    padding: 15px;
    color: sienna;
}

By default, an ordered list begins from 1. However, by using the start attribute in a numbered list, you can set a custom beginning point for the numbering:

Example
<ol type="i" start="10">
  <li>Sugar</li>
  <li>Salt</li>
  <li>Bread</li>
  <li>Milk</li>
</ol>

Note: this attribute can only contain whole numbers (no decimals).

Unordered Lists

Unordered lists are usually used when a specific order or sequence is not important. To form such a list in HTML, you should use <ul> tags for the list itself and <li> tags for the items:

Example
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

By default, HTML bullet points are round and black. To change that, you can use the CSS list-style-type property or the type attribute.

CSS list-style-type

The CSS list-style-type property can take four values. The default one is disc, making HTML bullet points black and round:

Example
<ul style="list-style-type: disc;">
  <li>Sugar</li>
  <li>Salt</li>
  <li>Bread</li>
  <li>Milk</li>
</ul>

With circle, the markers will stay round but turn white with a black outline:

Example
<ul style="list-style-type: circle;">
  <li>Sugar</li>
  <li>Salt</li>
  <li>Bread</li>
  <li>Milk</li>
</ul>

square turns the HTML bullet points into squares:

Example
<ul type="square">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

To remove the marker completely, define the value as none:

Example
<ul style="list-style-type: none;">
  <li>Sugar</li>
  <li>Salt</li>
  <li>Bread</li>
  <li>Milk</li>
</ul>

The type Attribute

The same result can be achieved using the type attribute. See its possible values in a table below:

Type Description
1 Numbered (the default value)
A Uppercase letters
a Lowercase letters
I Uppercase Roman numbers
i Lowercase Roman numbers
Example
<ol type="1">
  <li>Sugar</li>
  <li>Salt</li>
  <li>Bread</li>
  <li>Milk</li>
</ol>

Example
<ol type="A">
  <li>Sugar</li>
  <li>Salt</li>
  <li>Bread</li>
  <li>Milk</li>
</ol>

Example
<ol type="a">
  <li>Sugar</li>
  <li>Salt</li>
  <li>Bread</li>
  <li>Milk</li>
</ol>

Example
<ol type="I">
  <li>Sugar</li>
  <li>Salt</li>
  <li>Bread</li>
  <li>Milk</li>
</ol>

Example
<ol type="i">
  <li>Sugar</li>
  <li>Salt</li>
  <li>Bread</li>
  <li>Milk</li>
</ol>

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Forming Description Lists

HTML description lists can be used to list entries and their descriptions nearby. Browsers normally indent the provided description.

To generate a description list in HTML, you will need to use three tags:

  • <dl> to define a description list
  • <dt> to name the entries
  • <dd> to provide descriptions
Example
<dl>
  <dt>Car</dt>
  <dd>A vehicle used for boring transportation.</dd>
  <dt>Hot air balloon</dt>
  <dd>A vehicle used for fun transportation.</dd>
</dl>

Nesting Lists in HTML

In HTML, you are able to nest HTML lists within one another. This means one list can have several other sublists inside:

Example
<ol>
  <li>Breakfast
    <ul>
      <li>Milk</li>
      <li>Eggs </li>
    </ul>
  </li>
  <li>Lunch
    <ul>
      <li>Meat</li>
      <li>Bananas </li>
    </ul>
  </li>
  <li>Supper
  	<ul>
      <li>Chicken</li>
      <li>Rice</li>
    </ul>
  </li>
</ol>

Note: the output of a nested list is quite similar to a description list but the intended description will also contain a marker.

HTML List: Useful Tips

  • HTML lists can be used to create simple navigation menus for a website – just include links to various sections as the items.
  • If you must have really unique HTML bullet points, the CSS list-style-image property will allow you to include an image to be used as the marker.