HTML Lists (Ordered, Unordered and more)

HTML lists are used to show a similar group of options, items etc. We can style Lists using CSS, for various purposes, like in a horizontal menu, or many more.

Example

An unordered HTML list:

• Item

• Item

• Item

• Item

An ordered HTML list:

1. First item

2. Second item

3. Third item

4. Fourth item

Unordered HTML List

The Unordered List is used to show a set of similar items, in an unorganised manner i.e. without any proper order. In this type of List, The Order of Items is not important.

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default. We can customize it easily with CSS.

Example

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Ordered HTML List

The Ordered List is used to show a set of similar items in a organized manner i.e. in proper order. These lists are used where order or series of items is important.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default. We can customize it easily with CSS.

Example

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

HTML Description Lists

HTML also supports description lists. The Description Lists is a list of terms, with description for each term, which tells us more about that term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example

<dl>

  <dt>Coffee</dt>

  <dd>- black hot drink</dd>

  <dt>Milk</dt>

  <dd>- white cold drink</dd>

</dl>

HTML List Tags

Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list