HTML Lists

HTML lists are used to present a list of information in a well-formed and systematic way.

The list is nothing but a record of information.

HTML list has 3 different types:

• Ordered List or Numbered List
• Unordered List or Bulleted List
• Description List or Definition List

HTML Ordered List or Numbered List:

If you want to put all your items in a numbered list then you can use the HTML ordered list.

The ordered list is created by using <ol> tag. The list items start with <li> tag. In the ordered list, the numbering starts from one and is incremented by one for each successive list element.

Example:

<ol>

<li> India </li>

<li> USA </li>

<li> Australia </li>

</ol>

Try it

The type Attribute for Ordered List:

You can use type attribute for <ol> tag to define the type of numbering you like. By default, it is a number. 

Following are the type attributes for ordered list:

<ol type = “1”>

<ol type = “I”>

<ol type = “i”>

<ol type = “A”>

<ol type = “a”>

Numbers:

The list items will be numbered with numbers i.e default.

Example:

<ol type=”1″>

<li> India </li>

<li> USA </li>

<li> Australia </li>

<li> Canada </li>

</ol>

Try it

Uppercase Roman Numbers:

The list items will be numbered with uppercase roman numbers.

Example:

<ol type=”I”>

<li> India </li>

<li> USA </li>

<li> Australia </li>

<li> Canada </li>

</ol>

Try it

Lowercase Roman Numbers:

The list items will be numbered with lowercase roman numbers.

Example:

<ol type=”i”>

<li> India </li>

<li> USA </li>

<li> Australia </li>

<li> Canada </li>

</ol>

Try it

Uppercase Letters:

The list items will be numbered with uppercase alphabets.

Example:

<ol type=”A”>

<li> India </li>

<li> USA </li>

<li> Australia </li>

<li> Canada </li>

</ol>

Try it

Lowercase Letters:

The list items will be numbered with lowercase alphabets.

Example:

<ol type=”a”>

<li> India </li>

<li> USA </li>

<li> Australia </li>

<li> Canada </li>

</ol>

Try it

Unordered HTML List:

In HTML, unordered lists are the lists that do not have any form of numbering and it is also known as a bulleted list.

The unordered list is created by using <ul> tag and each item in the list is marked with a bullet.

You can use the CSS list-style-type property to specify the list item marker.

Example:

<ul>

<li> India </li>

<li> USA </li>

<li> Australia </li>

</ul>

Try it

The type Attribute for Unordered List:

To represent different unordered lists, there are 4 types of attributes.

Following are the type attributes for unordered list:

<ul style=”list-style-type:disc;”>

<ul style=”list-style-type:circle;”>

<ul style=”list-style-type:square;”>

<ul style=”list-style-type:none;”>

Disc:

This is the default style. The list items will be displayed with bullets.

Example:

<ul style=”list-style-type:disc;”>

<li> India </li>

<li> USA </li>

<li> Australia </li>

<li> Canada </li>

</ul>

Try it

Circle:

The list items will be displayed with the circles.

Example:

<ul style=”list-style-type:circle;”>

<li> India </li>

<li> USA </li>

<li> Australia </li>

<li> Canada </li>

</ul>

Try it

Square:

The list items will be displayed with the squares.

Example:

<ul style=”list-style-type:square;”>

<li> India </li>

<li> USA </li>

<li> Australia </li>

<li> Canada </li>

</ul>

Try it

None:

In this style, the list items are not marked only items will be displayed.

Example:

<ul style=”list-style-type:none;”>

<li> India </li>

<li> USA </li>

<li> Australia </li>

<li> Canada </li>

</ul>

Try it

Description list:

In HTML the description list or definition list is a list of items with a description of each item.

The <dl>, <dt> and <dd> tags are used to create description list. In description list <dl> tag defines the description list, <dt> tag defines data term and <dd> tag defines data definition or description.

Example:

<dl>

<dt> HTML </dt>

<dd> is a markup language </dd>

<dt>CSS</dt>

<dd> is used to define styles of web pages </dd>

<dt> Boostrap </dt>

<dd> is a CSS framework </dd>

<dt> JavaScript </dt>

<dd> is a scripting language </dd>

</dl>

Try it

Nested HTML List:

A list inside another list is known as a nested list.

If you want a number list inside bullet list then you can use this type of list and is is called as nested lists.

Example:

<ol>

<li> India </li>

<ul>

<li> New Delhi </li>

</ul>

<li> USA <ul>

<li> Washington, D.C. </li>

</ul>

</li>

<li> Australia </li>

<ul>

<li> Canberra </li>

</ul>

<li> Canada </li>

<ul>

<li> Ottawa </li>

</ul>

</ol>

Try it

The start Attribute:

The ordered list will start counting from 1 by default, if you want to start counting from a specific number, you can use the start attribute.

Example:

<ol start=”10″>

<li> India </li>

<li> USA </li>

<li> Australia </li>

<li> Canada </li>

</ol>

Try it

Creating Horizontal HTML List with CSS:

You can create a horizontal list in HTML, you just have to add display: inline property to make it horizontal.

Display: inline will display them horizontally and list-style-type: none will remove all bullets and numbers.

Most of the time horizontal lists are used to create a navigation menu.

Example:

<!DOCTYPE html >

<html>

<head>

<style>

ul#menus li {

display:inline;

}

</style>

</head>

<body>

<p> In this example, we use CSS to style the list horizontally. </p>

<ul id="menus">

<li> HTML </li>

<li> CSS </li>

<li> Javascript </li>

<li> Bootstrap </li>

</ul>

</body>

</HTML>

Try it

Note: You will learn more about the styling of lists in our CSS List Style topic.​