Lists

How Can We Help?
< All Topics

Lists

HTML List Tags are used to specify information in the form of a list.

HTML Lists are very useful to group related information together. Often List items looks well-structured and they are easy to read for users. A list can contain one or more list elements.

HTML Lists Type

HTML offers three types of lists. Following Table will give you a brief description of them.

List Type Description Tags used
Unordered List used to group a set of items without any order. <ul>,<li>
Ordered List used to group a set of items, in a specific order. <ol>,<li>
Definition List used to display some definition term (dt) & definition’s description (dd) <dl>,<dt>,<dd>

Unordered lists

Unordered lists are used to list a set of items when they have no special order or sequence. It is also called a bulleted list.

An unordered list is created using HTML <ul> tag. Each item in the list starts with the <li> tag

Example of Unordered List

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

List Tags

<li> tag is used to display list elements and it is used in ordered and unordered lists.

The above example will list items with bullets (small black circles) by default. There are different list styles available such as a bullet, circle, etc.

Unordered List Style Type Attribute

HTML offers three types of lists. Following Table will give you a brief description of them.

HTML Unordered List Types

List Style Type Description Example & Syntax
disc Starts a list using discs type bullets (default) <ul type=”disc”>
circle Starts a list using circle-type bullets <ul type=”circle”>
square Starts a list using square-type bullets <ul type=”square”>
none Starts a list without bullets <ul type=”type:none”>

Example of Unordered List with Different List Styles

<html>
<title> Unordered List Example Test - Tutorials Class </title>
<body>

<h2>Unordered List of Fruits with Disc Bullets</h2>
<ul type="disc">
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

<h2>Unordered List of Colors with Circle Bullets</h2>
<ul type="circle">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

<h2>Unordered List of Fruits with Square Bullets</h2>
<ul type="square">
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

<h2>Unordered List of Colors without bullets</h2>
<ul type="none">
  <li>Black</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

</body>
</html>

List style type can be set using CSS as well, for example: <ul type="square">. You can read about them in CSS List Style Tutorial.

Ordered lists

An ordered list is used to list related items in a numbered or other specific order. This is useful when you want to show counts of items in some way.

The ordered list is created using HTML <ol> tag. Each item in the list starts with the <li> tag

Example of Ordered List

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

The above example will list colored items with numbers by default. There are different list styles available for an ordered list such as numbers, letters, etc.

Ordered List Style Type Attribute

HTML offers three types of lists. Following Table will give you a brief description of them.

HTML Ordered List Style Type Attribute

List Style Type Description Example and Syntax
Numbers Starts a list using numbers (default) <ol type=”1″>
Uppercase letters Starts a list using uppercase letters <ol type=”A”>
Lowercase letters Starts a list using lowercase letters <ol type=”a”>
Uppercase roman numbers Starts a list using uppercase Roman numbers <ol type=”I”>
Lowercase roman numbers Starts a list using lowercase Roman numbers <ol type=”i”>

Example of Ordered List with Different List Styles

<html>
<title> Ordered List Example - Tutorials Class </title>
<body>

<h2>Ordered List of Fruits with Numbers </h2>
<ol type="1">
  <li>Banana</li>
  <li>Apple</li>
  <li>Grapes</li>
</ol>

<h2>Ordered List of Fruits with Uppercase letters</h2>
<ol type="A">
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ol>

<h2>Ordered List of Colors with Lowercase letters</h2>
<ol type="a">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ol>

<h2>Ordered List of Colors with Uppercase Roman numbers</h2>
<ol type="I">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ol>

<h2>Ordered List of Colors with Lowercase Roman numbers</h2>
<ol type="i">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ol>

</body>
</html>

Definition Lists

A definition list is used to list items along with a description of each item.

An ordered list is created using HTML <dl> tag. Between <dl> tag, we use <dt> to define the terms and <dd> to describe that term.

Example of Definition Lists

<dl>
    <dt>Computer</dt>
    <dd>Computer is an electronic device that is designed to work with Information.</dd>
    <dt>HTML</dt>
    <dd>HyperText Markup Language (HTML) is the standard markup language for creating web pages and web applications.</dd>
</dl>

Nested HTML Lists

When we used a list inside the list, it is called Nested List. We will see an example that will have different lists including the Nested list as well.

Example of a Complete HTML program using different Lists:

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<ul>
  <li>Red</li>
  <li>Black
    <ul>
    <li>Light Black</li>
    <li>Dark Black</li>
    </ul>
  </li>
  <li>Blue</li>
  <li>Green</li>
</ul>

<h2>Unordered List</h2>
<ul type="circle">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

<h2>Numbered Ordered List </h2>
<ol type="1">
  <li>Bannana</li>
  <li>Apple</li>
  <li>Grapes</li>
</ol>

<h2>Uppercase Ordered List</h2>
<ol type="A">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ol>

<h2>Definition List</h2>
<dl>
    <dt>Computer</dt>
    <dd>Computer is an electronic device that is designed to work with Information.</dd>
    <dt>HTML</dt>
    <dd>HyperText Markup Language (HTML) is the standard markup language for creating web pages and web applications.</dd>
</dl>

</body>
</html>

Table of Contents