HTML Lists

Written By:

Updated on

HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 189 reviews
  1. Home
  2. Frontend
  3. Html
  4. Html Lists
  1. Type of Lists
  2. Unordered List
  3. Ordered List
  4. Description List

HTML Lists include three types of lists to show single or multiple list items. These three lists are the Unordered List, Ordered List, and Description List (formerly known as the Definition List).

For example, you can list the names of fruits, cities, or top engineering colleges in a sequence. Lists are styled with bullets or numbers based on the type of list, i.e., an Unordered List or an Ordered List. We can also create Nested Lists in HTML.

HTML List Example

HTML List examples

Unordered List

  • List Item
  • List Item
  • List Item
  • List Item
<ul>
 <li>List Item</li>
 <li>List Item</li>
 <li>List Item</li>
 <li>List Item</li>
</ul>

Ordered List

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

Description List

Term
data
Term
data
<dl>
 <dt>Term</dt>
 <dd>data</dd>
 <dt>Term</dt>
 <dd>data</dd> 
</dl>

Type of Lists

There are three types of lists in HTML: unordered lists, ordered lists, and description lists.

Unordered lists and ordered lists work the same way, except that the Unordered List is used for non-sequential lists with list items usually preceded by bullets, and numbers are for the Ordered List, which are normally represented by incrementing numbers.

The ul tag is used to define unordered list and the ol tag is used to define ordered list. Inside the list, the li tag is used to define each list item.

Type of list in HTML

  1. Unordered List
  2. Ordered List
  3. Description List

Unordered List

Unordered Lists are lists with bullets and without a sequence. By default, unordered lists are styled with a disk (•). In HTML4/XHTML, the type attribute was used to change the list style, but in HTML5, the type attribute of an unordered list is deprecated. However, we can remove or change the list style using the CSS list-style property.

Use an Unordered List where a sequence is not required, for example, a list of fruits, vegetables, etc.

Unordered List example

  • List 1
  • List 2
  • List 3
  • List 4

<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
</ul>

Unordered List with type none

Note: type attribute for ul is deprecated in HTML5. Use CSS to change type of unordered list.

  • List 1
  • List 2
  • List 3
  • List 4

<ul type="none">

	<li>List 1</li>

	<li>List 2</li>

	<li>List 3</li>

	<li>List 4</li>

</ul>

Unordered List with type square

Note: type attribute for ul is deprecated in HTML5. Use CSS to change type of unordered list.

  • List 1
  • List 2
  • List 3
  • List 4

<ul type="square">

	<li>List 1</li>

	<li>List 2</li>

	<li>List 3</li>

	<li>List 4</li>

</ul>

Unordered List with type circle

Note: type attribute for ul is deprecated in HTML5. Use CSS to change type of unordered list.

  • List 1
  • List 2
  • List 3
  • List 4

<ul type="circle">

	<li>List 1</li>

	<li>List 2</li>

	<li>List 3</li>

	<li>List 4</li>

</ul>

Nested Unordered List

An unordered list can have another descendant unordered list, but only inside a list item.
A <ul> cannot have another <ul> element as a direct child. Only <li> is allowed as a child element of ul or ol.

  • List 1
  • List 2
  • List 3
    • List 31
    • List 32
  • List 4

<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3
        <ul>
            <li>List 31</li>
            <li>List 32</li>
        </ul>
    </li>	
    <li>List 4</li>
</ul>

In HTML5, the type attribute of an unordered list (ul) is deprecated. Use CSS list style instead.

Ordered List

Ordered lists are sequential lists. The ol tag uses numbers, alphabets, and Roman characters as list styles. Ordered lists are countable. By default, ordered lists are styled with numbers. We can change the list style using the type attribute or List Style.

Attributes of OL

Attribute Type Use
type optional to change the type of list
start optional to start the list from a particular number
reversed optional to reversed numbering

Type of Ordered List

  1. Number
  2. Roman
  3. Alphabet

Ol type number

The default type of an ol is "1", which means numbers.

  1. List 1
  2. List 2
  3. List 3
  4. List 4

<ol>

	<li>List 1</li>

	<li>List 2</li>

	<li>List 3</li>

	<li>List 4</li>

</ol>

OL type Roman

To start an ordered list with Roman characters, use type "I" or "i".

Ordered list with uppercase roman

  1. List 1
  2. List 2
  3. List 3
  4. List 4

<ol type="I">

	<li>List 1</li>

	<li>List 2</li>

	<li>List 3</li>

	<li>List 4</li>

</ol>

Ordered list with lowercase roman

  1. List 1
  2. List 2
  3. List 3
  4. List 4

<ol type="i">

	<li>List 5</li>

	<li>List 6</li>

	<li>List 7</li>

	<li>List 8</li>

</ol>

OL type Alphabet

Ordered List can have alphabets, both uppercase and lowercase.

Ordered list with uppercase

  1. List 1
  2. List 2
  3. List 3
  4. List 4

<ol type="A">

	<li>List 1</li>

	<li>List 2</li>

	<li>List 3</li>

	<li>List 4</li>

</ol>

Ordered list with lowercase

  1. List 1
  2. List 2
  3. List 3
  4. List 4

<ol type="a">

	<li>List 1</li>

	<li>List 2</li>

	<li>List 3</li>

	<li>List 4</li>

</ol>

Start Attribute

The start attribute in an ordered list can start the list from a specific number, instead of 1, A, a, I, or i. The value of the start attribute is always a number.


Ordered List starting from 10

  1. List 1
  2. List 2
  3. List 3
  4. List 4

<ol type="1" start="10">

	<li>List 1</li>

	<li>List 2</li>

	<li>List 3</li>

	<li>List 4</li>

</ol>

Ordered List starting from X

  1. List 5
  2. List 6
  3. List 7

<ol type="A" start="24">

	<li>List 5</li>

	<li>List 6</li>

	<li>List 7</li>

</ol>

Reversed Attribute

An Ordered List can also have the optional reversed attribute. The reversed attribute can reverse the sequence or order of an ordered list.

  1. List 1
  2. List 2
  3. List 3
  4. List 4
<ol start="10" reversed>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
</ol>

In HTML5, the type attribute of an Ordered list (ol) is not deprecated. We can use either CSS or the HTML type attribute.

Description List

Description List, formerly known as Definition List is a list with description term and description data.

How to use description list

Web Designing
To Design front end of a web application or website.
DATABASE
ORACLE, My SQL, and SQL Server

<dl>
	<dt>WEB DESIGNING</dt>

	<dd>To Design front end of a website.</dd>

</dl>

<dl>
	<dt>DATABASE</dt>

	<dd>ORACLE, My SQL, and  SQL Server</dd>

</dl>