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 (bulleted) lists are used when a set of items can be placed in any order. An example is a programming language list:
Unordered list markup
Unordered lists use one set of
<ul></ul> tags wrapped around one or more sets of
<ul> <li>python</li> <li>java</li> <li>Cpp</li> <li>Scala</li> <li>MySql</li> </ul>
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:
- Creating a Source Code.
- Compile Source Code.
- Executing / Running Executable File
- Check Result
Ordered lists can be displayed with several sequencing options. The default in most browsers is decimal numbers, but there are others available:
- Lowercase ascii letters (a, b, c…)
- Uppercase ascii letters (A, B, C…).
- Lowercase classical Greek: (έ, ή, ί…)
- 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
<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.
<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 (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