HTML LISTS

HTML lists are used to present list of information in well formed and semantic way. 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 created using the <ul> element, and each list item starts with the <li> element.

The list items in unordered lists are marked with bullets. Here’s an example:

<ul>
    <li>CHOCOLATE CAKE</li>
    <li>BLACK FOREST CAKE</li>
    <li>PINEAPPLE CAKE</li>
</ul>
Result

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;
}
HTML ordered list
Result

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:

<ol>
    <li>FASTEN YOUR SEATBELT</li>
    <li>STARTS THE CAR'S ENGINE</li>
    <li>LOOK AROUND AND GO</li>
</ol>
Result

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:

<ol start="10">
    <li>MIX INGREDIENTS</li>
    <li>BAKE IN OVEN FOR AN HOUR</li>
    <li>ALLOW TO STAND FOR TEN MINUTES</li>
</ol>
Result

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;
}
Result

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:

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