w3docs logo

HTML Lists

In HTML, there are three types of lists: unordered, ordered and description lists. Each of them is defined using different tags. Let’s have a look.

HTML Unordered Lists

We use unordered lists to group items having no numerical order. When changing the order of list items, the meaning will not change. To create an unordered list, we use the <ul> tag. This tag comes in pairs, the content is written between opening <ul> and closing </ul> tags.

Each element of an unordered list is declared inside the <li> tag.

Example of the HTML <ul> tag for creating an unordered list:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>An unordered list:</h1>
    <ul>
      <li>This is a list item</li>
      <li>This is another list item</li>
      <li>This is one more list item</li>
    </ul>
  </body>
</html>

The items in unordered lists are marked with bullets (small black circles) by default. However, the default bullet style for the list items can be changed using a type attribute.

The type attribute is used to change the default bullet style for the list items.

Example of the HTML <ul> tag for creating an unordered list, where the items are marked with bullets:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ul type="circle">
      <li>List item </li>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <ul type="square">
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </body>
</html>

Result

unordered-list-style

You can also use the CSS list-style-type or list-style-image property to specify the type of a list item element.

Example of the HTML <ul> tag used with the CSS list-style-type property for creating an unordered list:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Examples of unordered lists:</h2>
    <ul style="list-style-type: square;">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
    <ul style="list-style-type: disc;">
      <li>Coca-Cola</li>
      <li>Fanta</li>
      <li>Ice Tea</li>
    </ul>
    <ul style="list-style-type: circle;">
      <li>Coca-Cola</li>
      <li>Fanta</li>
      <li>Ice Tea</li>
    </ul>
  </body>
</html>

HTML Ordered Lists

HTML ordered list is used for listing items that are marked with numbers. It starts with the <ol> tag. This tag comes in pairs, the content is written between opening <ol> and closing </ol> tags.

Each item in the ordered list starts with opening <li> tag and ends with </li> closing tag.

Example of the HTML <ol> tag for creating an ordered list:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>An ordered list:</h1>
    <ol>
      <li>This is List item number 1</li>
      <li>This is List item number 2</li>
      <li>This is List item number 3</li>
    </ol>
  </body>
</html>

The items in the ordered list are marked with numbers by default. If you want to create ordered list with alphabet or Roman numbers, you just need to add type="a" or type="I" to the <ol> tag.

Example of the HTML <ol> tag for creating an ordered list with alphabet and Roman numbers:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h3>A numbered list:</h3>
    <ol>
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>An alphabetized list:</h3>
    <ol type="A">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>An alphabetized list (lowercase letters):</h3>
    <ol type="a">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>A numbered list (Roman numerals):</h3>
    <ol type="I">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>A numbered list (lowercase Roman numerals):</h3>
    <ol type="i">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
  </body>
</html>

HTML Description Lists

HTML description list is used to arrange terms or names with a description the same way as they are arranged in a dictionary.

To create a description list, we use the <dl> tag. This tag comes in pairs.

In <dl>, we use <dt> tags for a term/name in a description list and <dd> for a description of a term/name in a description list.

Example of the HTML <dl> tag for creating a description list:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Description Lists:</h1>
    <dl>
      <dt>Tea</dt>
      <dd>- hot drink</dd>
      <dt>Juice</dt>
      <dd>- cold drink</dd>
    </dl>
  </body>
</html>

Result

description-list

HTML Nested Lists:

A nested list contains a list inside a list.

Example of an HTML nested list:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>A nested HTML list</h2>
    <p>A nested list contains a list inside a list.</p>
    <ul>
      <li>Copybooks</li>
      <li>
        Books
        <ul>
          <li>Detective books</li>
          <li>Roman books</li>
          <li>Fairy tale books</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

List Counting Control

By default, the enumeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.

Example of an HTML list for counting from a specified number:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>List counting control</h2>
    <p>By default, the numeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.</p>
    <ol start="40">
      <li>Pen</li>
      <li>Pencil</li>
      <li>Copybook</li>
    </ol>
    <ol type="I" start="40">
      <li>Pen</li>
      <li>Pencil</li>
      <li>Copybook</li>
    </ol>
  </body>
</html>

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.

Example of a horizontal list with CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #F44336;
      }
      li {
        float: left;
      }
      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 16px;
        text-decoration: none;
      }
      li a:hover {
        background-color: #981816;
      }
    </style>
  </head>
  <body>
    <h2>Navigation Menu Example</h2>
    <p>
      You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
    </p>
    <ul>
      <li>
        <a href="#home">Home</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/tool/">Tools</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/snippets">Snippets</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/quiz/">Quizzes</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/string-functions/">String Functions</a>
      </li>
    </ul>
  </body>
</html>

Practice Your Knowledge

What are the different types of HTML lists as stated in the provided article?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?