Learn to use Lists in HTML

Reading time: 20 minutes

We have taken a deep look into using list elements in HTML and the different designs we can achieve.

In this article, we will learn to use:

• Unordered lists
• Ordered lists
• Nested HTML lists
• Description lists

Lists are used commonly to create a set of data/information having common features using bullets/numbers.
In HTML, we have following three types of Lists:

1. Unordered Lists
   
2. Ordered Lists
   
3. Description Lists
   

1) Unordered Lists

Unordered lists are lists with items preceded by list markers.
Default list marker is a bullet/disc symbol.
Syntax:

<ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    ...
</ul>

Here,

• <ul> element defines block for Unorderded list.
• <li> tag defines individual list items.

Example:

<h2> Operating Systems Examples </h2>
<ul>
    <li> Microsoft Windows </li>
    <li> Linux </li>
    <li> Mac OS </li>
</ul>

Output:

Here, the unordered list contains three items each preceded by a disc symbol.

1.1) Using different list markers for Unordered lists

As seen in example above, default list marker is a disc.
We can override it and use following for list markers:

1. circle
2. square
3. none (List items will not be preceded by a marker)
4. disc (Default)

To explicitly specify the list marker, we have to use CSS property list-style-type.

Syntax:

<ul style="list-style-type:{list-marker}">

Here, list-marker can be any of the four keywords.

I) Unordered list with Circle list marker

<h2> Operating Systems Examples </h2>
<ul style="list-style-type:circle">
    <li> Microsoft Windows </li>
    <li> Linux </li>
    <li> Mac OS </li>
</ul>

Output:

II) Unordered list with Square list marker

<h2> Operating Systems Examples </h2>
<ul style="list-style-type:square">
    <li> Microsoft Windows </li>
    <li> Linux </li>
    <li> Mac OS </li>
</ul>

Output:

III) Unordered list without markers

<h2> Operating Systems Examples </h2>
<ul style="list-style-type:none">
    <li> Microsoft Windows </li>
    <li> Linux </li>
    <li> Mac OS </li>
</ul>

Output:

2) Ordered Lists

Ordered lists are lists with numbers/alphabets/roman-numerics as list markers.
Default list marker is Natural number series 1,2,...

Syntax:

<ol>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    ...
</ol>

Here,

• <ol> tag defines the block for Ordered list.
• <li> is used to define individual list items.

Example:

<h2> Generic Ordered list </h2>
<ol>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output:

Here,
The list contains three items preceded by natural numbers for list markers.

2.1) Using list markers other than numbers

HTML5 programming allows the use of following different list markers for Ordered lists:

1. Numbers: 1,2,3, ...
2. Lowercase alphabets: a,b,c,...
3. Uppercase alphabets: A,B,C,...
4. Lowercase Roman Numbers: i,ii,iii,...
5. Uppercase Roman Numbers: I,II,III,...

type attribute is used to define the list marker for the Ordered lists.

<ol type={list-marker}>

I) Using lowercase alphabets for list markers

Example:

<h2> Generic Ordered list </h2>
<ol type="a">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output:

II) Using uppercase alphabets for list markers

Example:

<h2> Generic Ordered list </h2>
<ol type="A">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output:

III) Using uppercase roman numerics for list markers

Example:

<h2> Generic Ordered list </h2>
<ol type="I">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output:

IV) Using lowercase roman numerics for list markers

Example:

<h2> Generic Ordered list </h2>
<ol type="i">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output:

3) Nested HTML Lists

Nested lists are lists within a list.
They are used to create a sub-list of an item of a list.

3.1) Unordered List within Ordered list

Syntax:

<ol>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <ul>
        <li> Item 2.1 </li>
        <li> Item 2.2 </li>
        ...
    </ul>
    <li> Item 3 </li>
    ...
</ol>

Example:

<h2> Nested List: Unordered List within an Ordered List </h2>
<h2> Courses </h2>
<ol>
    <li> Android Development </li>
    <li> Web Development </li>
    <ul>
        <li> HTML </li>
        <li> CSS </li>
	<li> JavaScript </li>
    </ul>
    <li> Full Stack Development </li>
</ol>

Output:

Here,

• The main list is ordered list of courses
• The main list item Web Development has an unordered sub-list.

3.2) Ordered list within unordered list

Syntax:

<ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <ol> 
        <li> Item 2.1 </li>
        <li> Item 2.2 </li>
        ...
    </ol>
    <li> Item 3 </li>
    <li> Item 4 </li>
    ...

Example:

<h2> Nested List: Ordered List within an unordered List </h2>
<h2> Awards Nominations </h2>
<ol>
    <li> Best Film </li>
    <ul>
        <li> Film xyz </li>
        <li> Film abc </li>
	<li> Film pqr </li>
    </ul>
    <li> Best Actor </li>
    <ul>
        <li> Mr. A1B1C1 </li>
        <li> Mr. Q1W1R1 </li>
	<li> Mr. P1L1G1 </li>
    </ul>
</ol>

Output:

4) Description Lists

In general, lists only allow for items and has no scope for description or metadata of list items.
Description lists are lists that can be created in HTML5 which are used to create lists of items along with their description.

Syntax:

<dl>
    <dt> Item 1 </dt>
    <dd> Description for Item 1 </dd>
    <dt> Item 2 </dt>
    <dd> Description for Item 2 </dd>
</dl>

Here,

• dl: Description list element
• dt: Description Term for items in list
• dd: Descriptions/metadata for items in list

Example:

<h2> My favorite beverage</h2>
<dl>
    <dt> Tea</dt>
    <dd> I love Tea for drinks. </dd>
    <dt> Coffee </dt>
    <dd> I drink coffee when I feel sleepy. </dd>
</dl>

Output:

Here, the list contains two elements:

1. Tea
2. Coffee
   and they have their respective descriptions with pre-defined HTML indentation.