Home » Learn » HTML Tutorial » HTML Lists

HTML Lists

HTML List Tags are used to specify information in the form of 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 type of lists. Following Table will give you brief description about them.

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

Unordered lists

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

Undordered list is created using HTML <ul> tag. Each item in the list start 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 list.

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

Unordered List Style Type Attribute

HTML offers three type of lists. Following Table will give you brief description about them.

HTML Unordered List Types

List Style TypeDescriptionExample & Syntax
discStarts a list using discs type bullets (default)<ul type="disc">
circleStarts a list using circle type bullets<ul type="circle">
squareStarts a list using square type bullets<ul type="square">
noneStarts 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

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.

Ordered list is created using HTML <ol> tag. Each item in the list start with the <li> tag

Example of Ordered List

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

Above example will list colors items with numbers by default. There are different list style available for ordered list such as numbers, letters etc.

Ordered List Style Type Attribute

HTML offers three type of lists. Following Table will give you brief description about them.

HTML Ordered List Style Type Attribute

List Style TypeDescriptionExample and Syntax
NumbersStarts a list using numbers (default)<ol type="1">
Uppercase lettersStarts a list using uppercase letters<ol type="A">
Lowercase lettersStarts a list using lowercase letters<ol type="a">
Uppercase roman numbersStarts a list using uppercase roman numbers<ol type="I">
Lowercase roman numbersStarts 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

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

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 list inside list, it is called Nested List. We will see a example which will have different lists including Nested list as well.

Example of 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>

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.