HTML | Lists - Tutorialspoint.dev

What is a list?
A list is a record of short pieces of information, such as people’s names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find.

For example:

A shopping list
To-do list

Lists in HTML
HTML offers three ways for specifying lists of information. All lists must contain one or more list
elements.

The types of lists that can be used in HTML are :

ul : An unordered list. This will list items using plain bullets.
ol : An ordered list. This will use different schemes of numbers to list your items.
dl : A definition list. This arranges your items in the same way as they are arranged in a dictionary.

The Unordered HTML List
An unordered list starts with the “ul” tag. Each list item starts with the “li” tag.The list items are marked with bullets i.e small black circles by default.

Example:

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>Grocery list</h2> 
  
<ul> 
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
  <li>Coffee</li> 
</ul>   
  
</body> 
</html> 

Output :

The HTML Unordered List has various List Item Markers:-

Disc : Sets the list item marker to a bullet i.e default.

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>Unordered List with Disc Bullets</h2> 
<h2>Grocery List</h2> 
  
<ul style="list-style-type:disc"> 
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
  <li>Coffee</li> 
</ul>   
  
</body> 
</html> 

Output :

Circle : Sets the list item marker to a circle.

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>Unordered List with Circle Bullets</h2> 
  
<h2>Grocery list</h2> 
  
<ul style="list-style-type:circle"> 
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
  <li>Coffee</li> 
</ul>   
</body> 
</html> 

Output :

Square : Sets the list item marker to a square.

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>Unordered List with Square Bullets</h2> 
  
<h2>Grocery list</h2> 
  
<ul style="list-style-type:square"> 
 <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
  <li>Coffee</li> 
</ul> 
  
</body> 
</html> 

Output :

The HTML Ordered List
An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are marked with numbers by default.
Example:

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>Grocery List</h2> 
  
<ol> 
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
  <li>Coffee</li> 
</ol>   
  
</body> 
</html> 

Output :

The HTML Ordered List has various List Item Markers:

The type attribute of the <ol> tag, defines the type of the list item marker.

Type=”1″ : The list items will be numbered with numbers i.e default.

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>Ordered List with Numbers</h2> 
  
<ol type="1"> 
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
  <li>Coffee</li> 
</ol>   
  
</body> 
</html> 

Output :

Type=”A” : The list items will be numbered with uppercase letters.

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>Ordered List with Letters</h2> 
  
<ol type="A"> 
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
  <li>Coffee</li> 
</ol>   
  
</body> 
</html> 

Output :

Type=”a” : The list items will be numbered with lowercase letters.

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>Ordered List with Lowercase Letters</h2> 
  
<ol type="a"> 
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
  <li>Coffee</li> 
</ol>    
  
</body> 
</html> 

Output :

Type=”I” : The list items will be numbered with uppercase roman numbers.

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>Ordered List with Roman Numbers</h2> 
  
<ol type="I"> 
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
  <li>Coffee</li> 
</ol>   
  
</body> 
</html> 

Output :

Type=”i” : The list items will be numbered with lowercase roman numbers.

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>Ordered List with Lowercase Roman Numbers</h2> 
  
<ol type="i"> 
  <li>Bread</li> 
  <li>Eggs</li> 
  <li>Milk</li> 
  <li>Coffee</li> 
</ol>   
  
</body> 
</html> 

Output :

The HTML Description List
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term.
Example:

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>A Description List</h2> 
  
<dl> 
  <dt>Coffee</dt> 
  <dd>- 500 gms</dd> 
  <dt>Milk</dt> 
  <dd>- 1 ltr Tetra Pack</dd> 
</dl> 
  
</body> 
</html> 

Output :

Nested List in HTML:

A nested list is a list which has a list inside a list.

<!DOCTYPE html> 
<html> 
<body> 
  
<h2>A Nested List</h2> 
  
<ul> 
  <li>Coffee</li> 
  <li>Tea 
    <ul> 
    <li>Black tea</li> 
    <li>Green tea</li> 
    </ul> 
  </li> 
  <li>Milk</li> 
</ul> 
  
</body> 
</html> 

Output :

HTML | Lists

Nested List in HTML:

tags:

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books