HTML Lists

HTML lists are used to provide well-formatted lists of information. There are three ways to specify list information: unordered lists, ordered and definition lists.

Unordered Lists

We use unordered lists for listing items with no special order or sequence. 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 item in the unordered list starts with opening <li> tag and ends with </li> closing tag. The items in unordered lists are marked with bullets (small black circles) by default.

This tag comes in pairs. And for each list item in unordered lists we us the <li> tag. This tag also comes in pairs.

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

Ordered 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. The items in ordered lists are marked with numbers by default.

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


If you want to create ordered list with alphabet or Roman numbers you just need to add type="a" or type="I" to <ol> tag.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h3>Numbered list:</h3>
    <ol>
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>Letters list:</h3>
    <ol type="A">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>Lowercase letters list:</h3>
    <ol type="a">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>Roman numbers list:</h3>
    <ol type="I">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>Lowercase Roman numbers list:</h3>
    <ol type="i">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
  </body>
</html>

Result

Description Lists

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