What is HTML List?

The List is the way to present information in the form of a listing. This is quite useful for presenting information like product features, services, job requirements, shopping list items etc. in the list format to your web pages.

The lists are also used for navigation/menu purpose.

Different types of HTML lists are available:

  1. Unordered lists made with the <ul> tag.
  2. Ordered lists are created by using the <ol> tag.
  3. Description list with the <dl> tag.

All these list types are explained below with examples. You can also apply CSS styles to the lists.

A few examples of lists are

Example of an Unordered list – ul

A numbered list example

Numbered list example starting other than 1

Description List example

List styles with CSS example

HTML ul list type

The unordered lists in HTML are created by using the <ul> tag. The following example creates an unordered list:

Experience this online

HTML ol list type

The ordered lists are created by using the <ol> tag of HTML. The <ol> tag also uses <li> tag to create the list items just like the <ul> tag. You can order lists numerically or alphabetically.

By default, the ordered lists are ordered numerically, however, you can use type attribute of the <ol> tag to specify how to order list items.

Following examples shows how to use the <ol> tag with the type attribute.

A basic HTML ordered list example

The example creates a list alphabetically.

Experience this online

HTML numbered list example

You can create a numbered list by using the type = 1. Although, the default list style is also numeric. So, if you do not specify any list style type it will create a numbered list. The following example creates a numbered list by using the <ol> tag as follows:

Experience this online

Numbered list example starting other than 1

The following example starts the numbered list from digit 5 by using the start attribute of the <ol> tag.

Experience this online

HTML li

The <li> tag is used to create the list items. Whether you are creating the ordered or unordered lists, you have to use the <li>List value</li> tag series inside the <ol> or <ul> tags to create the complete lists.

A demo of li tag inside <ol>

Following example shows using the <li> tag inside the ordered list.

Experience this online

HTML li inside the <ul> example

Following example creates list by using the <li> tag inside <ul> tag.

Experience this online

HTML dl list type

The third type of list supported in HTML is the description list. The description list uses the <dl> tag. The description list is the paired list of name and description. The basic structure of a description list is as follows:

<dl>

 <dt>term/name</dt>

 <dd>defines description or value of term</dd>

<dt>term/name</dt>

 <dd>defines description or value of term</dd>

</dl>

Where:

  • <dl> tag creates description list
  • <dt> defines term or name
  • <dd> defines term’s description

Example of using dl list type

The following example shows how to use the <dl> tag to create a description list with <dt> and <dd> tags.

Experience this online

Also see HTML div tag