HTML Lists

Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read. In modern web development, lists are workhorse elements, frequently used for navigation as well as general content.

Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. They are also useful because they provide specialized elements to which you can attach CSS styles. Finally, semantically correct lists help visitors read your web site, and they simplify maintenance when your pages need to be updated.

In HTML, there are three different types of list in HTML and each one has a specific purpose and meaning.

• Unordered list — Used to create a list of related items, in no particular order.
• Ordered list — Used to create a list of related items, in a specific order.
• Description list — Used to create a list of terms and their descriptions.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag, and each list item starts with the <li> element. The list items in unordered lists are marked with bullets. Here's an example:

Example

<ul>

  <li>Chocolate Cake</li>

  <li>Black Forest Cake</li>

  <li>Pineapple Cake</li>

</ul>

You can also change the bullet type in your unordered list using the CSS list-style-type property. The following style rule changes the type of bullet from the default disc to square:

ul {

    list-style-type: square;
}

Types of Bullet Points

Disc (default)
Code:  <ul style='list-style-type:disc'>

Circle
Code:  <ul style='list-style-type:circle'>

Square
Code:  <ul style='list-style-type:square'>

No Bullets
Code:   <ul style='list-style-type:none'>

HTML Ordered Lists

An ordered list created using the <ol> element, and each list item starts with the <li> element. Ordered lists are used when the order of the list's items is important.

The list items in an ordered list are marked with numbers. Here's an example:

Example

<ol>

  <li>Fasten your seatbelt</li>

  <li>Starts the car's engine</li>

  <li>Look around and go</li>

</ol>

Output

The numbering of items in an ordered list typically starts with 1. However, if you want to change that you can use the start attribute, as shown in the following example:

Example

<ol start="10">
  <li>Mix ingredients</li>
  <li>Bake in oven for an hour</li>
  <li>Allow to stand for ten minutes</li>
</ol>

Output

Like unordered list, you can also use the CSS list-style-type property to change the numbering type in an ordered list. The following style rule changes the marker type to roman numbers.

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

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Following are the possible options

<ol type = "1"> - Default-Case Numerals.

  <ol type = "I"> - Upper-Case Numerals.

  <ol type = "i"> - Lower-Case Numerals.

  <ol type = "A"> - Upper-Case Letters.

  <ol type = "a"> - Lower-Case Letters.

HTML Description Lists

A description list is a list of items with a description or definition of each item.

The description list is created using <dl> element. The <dl> element is used in conjunction with the <dt> element which specify a term, and the <dd> element which specify the term's definition.

Browsers usually render the definition lists by placing the terms and definitions in separate lines, where the term's definitions are slightly indented. Here's an example:

Example

<dl>

  <dt>Bread</dt>

  <dd>A baked food made of flour.</dd>

  <dt>Coffee</dt>

  <dd>A drink made from roasted coffee beans.</dd>

</dl>

Output

Styling Lists with CSS

CSS provides the several properties for styling and formatting the most commonly used unordered and ordered lists. These CSS list properties typically allow you to:

• Control the shape or appearance of the marker.
• Specify an image for the marker rather than a bullet point or number.
• Set the distance between a marker and the text in the list.
• Specify whether the marker would appear inside or outside of the box containing the list items.

In the following section, we will discuss the properties that can be used to style HTML lists.

Changing the Position of List Markers

By default, markers of each list items are positioned outside of their display boxes.

However, you can also position these markers or bullet points inside of the list item's display boxes using the list-style-position property along with the value inside. In this case the lines will wrap under the marker instead of being indented. Here's an example:

Example

ol.in li {

    list-style-position: inside;

}

ol.out li {

    list-style-position: outside;

}

Let's take a look at the following illustration to understand how markers or bullets are positioned.

Using Images as List Markers

You can also set an image as a list marker using the list-style-image property.

The style rule in the following example assigns a transparent PNG image "arrow.png" as the list marker for all the items in the unordered list. Let's try it out and see how it works:

Example

ul li {

    list-style-image: url("images/bullet.png");

}

Values for list-style-type

The following demo includes a group of unordered lists to demonstrate each keyword value:

See the Pen list-style-type examples by PANKAJ (@pankkap) on CodePen.

IMPORTANT TRICKS

Remove Indentation

To disappear the indentation in HTML Lists padding-left to 0px, notice all the indentation disappears.

ul {

  list-style: none;

padding-left: 0px;

}

<ul>

    <li>section a

      <ul>

        <li>one</li>

        <li>two</li>

        <li>three</li>

      </ul>

    </li>

  </ul>

  <ul>

    <li>section b

      <ul>

        <li>one</li>

        <li>two</li>

        <li>three</li>

      </ul>

    </li>

  </ul>

COLORED BULLETS in HTML using CSS

ul {list-style: none}

li::before {content: "•"; color: red}

That inserts a red bullet, but not in the same place as the original bullet. We need to move it to the left, but without moving the text of the list item after it. One way to do that is to make our bullet into an 'inline-block' of a given size, say 1em, and then move it to the left by its own size: 

li::before {

  content: '•';

  color: red;

  display: inline-block;

  width: 1em;

  margin-left: -1em;

}

That's it.

If you have trouble typing those bullets into your style sheets, you can also use their Unicode numbers: • = "\2022", ◦ = \25E6" and ▪ = "\25AA"

Reference: Some Unique Unicode Characters

COLORED LIST NUMBERS

ol {

  list-style: none;

  counter-reset: li;

}

And then we use it like we did the bullet above:

li::before {

  content: counter(li);

  color: red;

  display: inline-block;

  width: 1em;

  margin-left: -1.5em;

  margin-right: 0.5em;

  text-align: right;

  direction: rtl;

}

One more thing is missing: As it is our own counter, we're responsible for augmenting it as well:

li {counter-increment: li}