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 for grouping a collection of items having no numerical order. If you change 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

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

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>



Do you find this helpful?

Related articles