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.

Unordered HTML 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 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

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

Result

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

You can use type attribute to change the default bullet style for the list items.

Example

<!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 CSS list-style-type or list-style-image property to define the type of a list item element.

Example

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

Result

Ordered HTML Lists

Ordered HTML list is used for listing items 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

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

Result

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

Example

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

Result

Description Lists

A description, or definition, 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 <dl> tag. This tag comes in pairs.

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

Example

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