HTML Lists Tutorial | Learn Web Development

HTML list are used to group together information. It helps to create well-structured and easily maintainable document.

In this tutorial, we will learn how to create an HTML list in a website.


Understanding HTML Lists

HTML list is very useful in modern websites to create navigation menus, product list, item list etc.

There are 3 types of HTML lists you can use in your website.

  • Unordered list – Used to group together related items, in no specific order. This list is defined using <ul> tag.
  • Ordered list – Used to group together related items, in specific order. This list is defined using <ol> tag.
  • Description list – Used to display a list of items and their descriptions. This list is defined using <dl> tag.

Unordered HTML List

An unordered HTML list is a collection of items that have no special order.

This HTML list is created by using <ul> tag. All the items will go inside <ul>…</ul>.

This tag also contains another HTML tag that is <li> tag. Each item of a list is defined by <li> tag.

A list may contain many <li> tag according to the number of items present in that list.

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

The output shows in a web browser:

  • Item A
  • Item B
  • Item C

Unordered HTML List – The Type Attribute

There are four ways you can display an unordered list.

Browser display each type of list with different markers.

Value Description
disc Defines the list item marker to a bullet (default)
square Defines the list item marker to a circle
circle Defines the list item marker to a square
none The list items will have no marker.

You have to declare this list type in <ul> tag using a CSS property list-style-type.

Above list values specified in the table will go as the value of this CSS property.

Example for Disc type unordered list:

<ul style="list-style-type:disc;">
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
</ul>

The output shows in a web browser:

  • Bread
  • Eggs
  • Milk

Example for Square type unordered list:

<ul style="list-style-type:square;">
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
</ul>

The output shows in a web browser:

  • Bread
  • Eggs
  • Milk

Example for Circle type unordered list:

<ul style="list-style-type: circle;">
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
</ul>

The output shows in a web browser:

  • Bread
  • Eggs
  • Milk

Example for unordered list without marker:

<ul style="list-style-type:none;">
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
</ul>

The output shows in a web browser:

  • Bread
  • Eggs
  • Milk

OUTPUT


Ordered HTML List

An unordered HTML list is a collection of items that have special order.

The syntax for an ordered HTML list is the same as for an unordered list.

The ordered list is created by using <ol> tag. All the items will go inside <ol>…</ol>.

You have to use <li> tag to declare list item within an ordered list.

<ol>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol>

The output shows in a web browser:

  1. Item A
  2. Item B
  3. Item C

Ordered HTML List – The Type Attribute

There are 5 ways to display an ordered list.

You have to use type attribute in the <ol> tag to set the order list type.

An ordered list displays items in numeric order.

Type Description
type=”1″ The list items will be marked with numbers (default).
type=”A” The list items will be marked with uppercase letters.
type=”a” The list items will be marked with lowercase letters.
type=”I” The list items will be marked with uppercase roman numbers.
type=”i” The list items will be marked with lowercase roman numbers.

Example for type = “1” ordered list:

<ol type = "1">
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
</ol>

The output shows in a web browser:

  1. Bread
  2. Eggs
  3. Milk

Example for type = “A” ordered list:

<ol type = "A">
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
</ol>

The output shows in a web browser:

  1. Bread
  2. Eggs
  3. Milk

Example for type = “a” ordered list:

<ol type = "a">
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
</ol>

The output shows in a web browser:

  1. Bread
  2. Eggs
  3. Milk

Example for type = “I” ordered list:

<ol type = "I">
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
</ol>

The output shows in a web browser:

  1. Bread
  2. Eggs
  3. Milk

Example for type = “i” ordered list:

<ol type = "i">
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
</ol>

The output shows in a web browser:

  1. Bread
  2. Eggs
  3. Milk

OUTPUT


Description HTML List

The description list is used to add a list of items with their description.

This list is created using <dl> tag. All other items go inside <dl>…</dl>.

The <dt> tag is used to define the item name and the <dd> tag is used to define description of that item.

<dl>
 <dt>HTML</dt>
 <dd> - This stands for Hyper Text Markup Language</dd>
 <dt>CSS</dt>
 <dd> - This stands for Cascading Style Sheets</dd>
</dl>

The output shows in a web browser:

HTML
– This stands for Hyper Text Markup Language
CSS
– This stands for Cascading Style Sheets

Nested HTML List

If you add a list inside of another list then it becomes a nested HTML list.

You can easily add one list in another list. In this case, the list you add inside will act as an item of the parent list.

Therefore, you have to define this child list inside of <li> tag.

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

The output shows in a web browser:

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

Control HTML List Counting

You can only control the list counting in case of ordered list.

By default, an ordered list starts counting from 1. However, you can start counting from a specific number if you want.

For that, you have to use start attribute. This attribute is only used inside of <ol> tag.

The list will start counting from the number; you give in this attribute as the value.

<ol start = "10">
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
</ol>

The output shows in a web browser:

  1. Bread
  2. Eggs
  3. Milk

HTML List for Menu

You already know HTML list is used to create navigation menu in websites.

A list can be styled in many different ways using CSS.

This is an HTML course, here we will only learn about HTML.

You will have complete CSS course later on.

Now all you have to know is what you can do with HTML list.

Just add the following code in your document and see the result.

OUTPUT

Learn about styling an HTML document, our tutorial – HTML Style Guide