Making Lists

June 22, 2017

In this lesson, you’ll learn:

How to create bullet-point lists
How to create numbered lists
How to style lists
How to create a navigation menu using lists

Making lists in HTML is easy if you know how to use the <ol> and <ul> elements. These are two basic types of lists called ordered lists and unordered lists. Ordered lists are numbered lists, while unordered lists are bullet-point lists that don’t follow a certain order (hence the names).

Making Unordered Lists

This is the most common type of list used on the web. This is used for bullet-point lists, lists of links, navigation menus, and much more.

To make an unordered list, you will use the list element <ul> and the list-item element <li>.

By nesting <li> elements inside of a <ul> element, you can make a simple list.

<ul>
 <li>This is my first point.</li>
 <li>This is the second point.</li>
</ul>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>This is my first point.</li>
    <li>This is the second point.</li>
  </ul>
</body>
</html>

Result:

Please note that only <li> elements can be placed directly inside of a <ul> element. Please do not place a <p> or <a> or any other element directly inside a <ul>, or you will break the internet. (Just kidding, but don’t do it.) However, you can place any content you’d like (<a>, <p>, <div>, etc.) inside an <li> element.

Making Ordered Lists

An ordered list is structured just like an unordered list, except you will use the <ol> element instead of the <ul> element. These are used for lists that have a specific order to them, such as a list of steps in a recipe.

<ol>
 <li>This is the first step.</li>
 <li>This is the second step.</li>
</ol>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ol>
    <li>This is the first step.</li>
    <li>This is the second step.</li>
  </ol>
</body>
</html>

Result:

You can use attributes to manipulate your ordered lists in many ways.

To start your list from a number other than one, use the start attribute.

<ol start="5">
 <li>This is step number 5.</li>
 <li>This is step number 6.</li>
</ol>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ol start="5">
    <li>This is step number 5.</li>
    <li>This is step number 6.</li>
  </ol>
</body>
</html>

Result:

To reverse the numbering on a list, use the reversed attribute. This one doesn’t need a value.

<ol reversed>
 <li>My #3 favorite color.</li>
 <li>My #2 favorite color.</li>
 <li>My #1 favorite color.</li>
</ol>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ol reversed>
    <li>My #3 favorite color.</li>
    <li>My #2 favorite color.</li>
    <li>My #1 favorite color.</li>
  </ol>
</body>
</html>

Result:

To skip numbers, you can add the value attribute to any of the list-items to skip to that number. All of the list-items after that will go in order from the new number.

<ol>
 <li>The first item.</li>
 <li value="6">Skipped to the 6th item.</li> 
 <li>The seventh item.</li>
 <li>The eighth item.</li>
</ol>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ol>
    <li>The first item.</li>
    <li value="6">Skipped to the 6th item.</li> 
    <li>The seventh item.</li>
    <li>The eighth item.</li>
  </ol>
</body>
</html>

Result:

Making Description Lists

Another type of list found in HTML is called a description list. This element makes a list of terms and their definitions, much like a dictionary or glossary. This list follows a specific structure: the outer layer is a <dl> (description list), and inside is placed a <dt> (description title) and a <dd> (description data).

<dl>
 <dt>adumbrate</dt>
 <dd>describe roughly or give the main points or summary of</dd>
 <dt>diaphanous</dt>
 <dd>so thin as to transmit light</dd>
</dl>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <dl>
    <dt>adumbrate</dt>
    <dd>describe roughly or give the main points or summary of</dd>
    <dt>diaphanous</dt>
    <dd>so thin as to transmit light</dd>
  </dl>
</body>
</html>

Result:

As you see above, you can list <dt> and <dd> elements in order inside the <dl> tag. You cannot place anything but <dt> and <dd> directly inside <dl>, but you can place other elements inside of <dt> and <dd>.

Lists Inside Lists

So far, you have learned that you can place other elements inside list items, or description list titles or data. This means that you can nest lists inside of other lists.

For example, to add a secondary bullet-point list inside of an existing unordered list, you can write the following code:

<ul>
 <li>The first point</li>
 <li>The second point</li>
 <li>
  The third point
  <ul>
   <li>An inner list point</li>
   <li>An inner list point</li>
   <li>An inner list point</li>
  </ul>
 </li>
</ul>

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>The first point</li>
    <li>The second point</li>
    <li>
      The third point
      <ul>
        <li>An inner list point</li>
        <li>An inner list point</li>
        <li>An inner list point</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Output:

Notice how the entire <ul> fits inside of the <li> tag, after the text.

You can nest ordered lists, unordered lists and description lists inside of each other.

Styling Lists

You can change the bullet point or numbering style of ordered and unordered lists, using the list-style-type property in CSS.

The default list-style-type for an ordered list is decimal, but you can change it to other numbering styles like upper-roman (uppercase roman numerals) or lower-roman (lowercase roman numerals).

ol {
 list-style-type: lower-roman;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    ol {
      list-style-type: lower-roman;
    }
  </style>
</head>
<body>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</body>
</html>

Result:

The default list-style-type for an unordered list is disc, but you can change it to circle or square.

ul {
 list-style-type: square;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    ul {
      list-style-type: square;
    }
  </style>
</head>
<body>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</body>
</html>

Result:

For a full list of accepted values for list-style-type, visit the W3C Wiki.

If these default styles are not enough, you can use an image in place of the bullet point in an unordered list. This is specified with the list-style-image property.

ul {
 list-style-image: url(images/checkmark.png);
}

Make sure the image path is an absolute path or a relative path from the CSS document.

Another way to style an unordered list is to remove the bullet points completely and list them horizontally across the page. You can do this by removing the list-style-type, removing margins and padding, and making the list-item elements inline-block.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 5px;
      padding: 0;
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <a href="facebook.com">Facebook</a>
    </li>
    <li>
      <a href="twitter.com">Twitter</a>
    </li>
    <li>
      <a href="instagram.com">Instagram</a>
    </li>
    <li>
      <a href="youtube.com">YouTube</a>
    </li>
  </ul>
</body>
</html>

Result:

This comes in handy for navigation menus at the top and bottom of web pages.

Finally, let’s look at an example of a fully-styled navigation menu. If you look at the HTML and CSS, you’ll see that it’s a combination of things you’ve already learned! Why not try making your own with your own colors, margins, or gradients?

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .nav {
      border-left: 1px solid #ccc;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    .nav li {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    .nav a {
      background-color: #efefef;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      display: block;
      color: #000;
      font-family: Helvetica;
      font-weight: bold;
      font-size: 14px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      padding: 20px;
      width: 75px;
    }
  </style>
</head>
<body>
  <ul class="nav">
    <li>
      <a href="/">Home</a>
    </li><!--
    --><li>
      <a href="/blog">Blog</a>
    </li><!--
    --><li>
      <a href="/about">About</a>
    </li><!--
    --><li>
      <a href="/contact">Contact</a>
    </li>
  </ul>
</body>
</html>

Result:

Now you know how to make lists in HTML! To recap, in this lesson, you learned:

How to create bullet-point lists
How to create numbered lists
How to style lists
How to create a navigation menu using lists

Go to the next lesson to add images, video, and audio in HTML.