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

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:

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

You can also create horizontal lists by using CSS:

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:

<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:

<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:

<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:

<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:

<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:

<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:

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

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

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

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

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

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

GET 25% OFF

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

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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

<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:

<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.