HTML lists

In this article, we’ll learn about HTML Lists, it’s types with examples.

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.

The three list types in HTML

There are three list types in HTML:

• unordered list — used to group a set of related items in no particular order
• ordered list — used to group a set of related items in a specific order
• description list — used to display name/value pairs such as terms and definitions

Each list type has a specific purpose and meaning in a web page.

Unordered lists

Unordered (bulleted) lists are used when a set of items can be placed in any order. An example is a programming language list:

• python
• java
• Cpp
• Scala
• MySql

Unordered list markup

Unordered lists use one set of <ul></ul> tags wrapped around one or more sets of <li></li> tags:

<ul>
  <li>python</li>
  <li>java</li>
  <li>Cpp</li>
  <li>Scala</li>
  <li>MySql</li>
</ul>

Ordered lists

Ordered (numbered) lists are used to display a list of items that should be in a specific order. An example , how to run a code in C programming:

1. Creating a Source Code.
2. Compile Source Code.
3. Executing / Running Executable File
4. Check Result

Ordered lists can be displayed with several sequencing options. The default in most browsers is decimal numbers, but there are others available:

• Letters
  • Lowercase ascii letters (a, b, c…)
  • Uppercase ascii letters (A, B, C…).
  • Lowercase classical Greek: (έ, ή, ί…)
• Numbers
  • Decimal numbers (1, 2, 3…)
  • Decimal numbers with leading zeros (01, 02, 03…)
  • Lowercase Roman numerals (i, ii, iii…)
  • Uppercase Roman numerals (I, II, III…)

Ordered list markup

Ordered lists use one set of <ol></ol> tags wrapped around one or more sets of <li></li> tags:

<ol>
  <li>Creating a Source Code. </li>
  <li>Compile Source Code.</li>
  <li>Executing / Running Executable File</li>
  <li>Check Result</li>  
</ol>

Beginning ordered lists with numbers other than 1

A common requirement in ordered list usage is to get them to start with a number other than 1 (or i, or I, etc.). This is done using the start attribute, which takes a numeric value.

For example,

<ol>
  <li>Gather ingredients</li>
  <li>Mix ingredients together</li>
  <li>Place ingredients in a baking dish</li>
</ol>

<p>Before you place the ingredients in the baking dish, preheat the oven to
180 degrees centigrade/350 degrees fahrenheit in readiness for the next step.</p>

<ol start="4">
  <li>Bake in oven for an hour</li>
  <li>Remove from oven</li>
  <li>Allow to stand for ten minutes</li>
  <li>Serve</li>
</ol>

Description lists

Description lists (previously called definition lists, but renamed in HTML5) associate specific names and values within a list.

Description lists are flexible: you can associate more than one value with a single name, or vice versa. For example, the term “coffee” can have several meanings, and you could show them one after the other:

coffee

  a beverage made from roasted, ground coffee beans
  a cup of coffee
  a social gathering at which coffee is consumed
  a medium to dark brown colour

Or, you can associate more than one name with the same value. This is useful to show variations of a term, all of which have the same meaning:

soda
pop
fizzy drink
cola

  a sweet, carbonated beverage

Description list markup

Description lists use one set of <dl></dl> tags wrapped around one or more groups of <dt></dt> (name) and <dd></dd> (value) tags. You must pair at least one <dt></dt> with at least one <dd></dd>, and the <dt></dt> should always come first in the source order.

A simple description list of single names with single values would look like this:

<dl>
  <dt>Name</dt>
  <dd>Value</dd>
  <dt>Name</dt>
  <dd>Value</dd>
  <dt>Name</dt>
  <dd>Value</dd>
</dl>

This is rendered as follows:

Name
  Value
Name
  Value
Name
  Value

In the following example, we associate more than one value with a name, and vice versa:

<dl>
  <dt>Name1</dt>
  <dd>Value that applies to Name1</dd>
  <dt>Name2</dt>
  <dt>Name3</dt>
  <dd>Value that applies to both Name2 and Name3</dd>
  <dt>Name4</dt>
  <dd>One value that applies to Name4</dd>
  <dd>Another value that applies to Name4</dd>
</dl>

That code would render like this:

Name1
  Value that applies to Name1
Name2
Name3
  Value that applies to both Name2 and Name3
Name4
  One value that applies to Name4
  Another value that applies to Name4