HTML lists

by anupmaurya

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

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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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
Code language: JavaScript (javascript)

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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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

You may also like