List tags in HTML

HTML Lists

To specify lists of information, an HTML List is used, which can be any of the three different types.

  • Ordered List or Numbered List (ol)
  • Unordered List or Bulleted List (ul)
  • Description List or Definition List (dl)

 

HTML Ordered List or Numbered List: 

As the name itself suggests, all the list items are marked with numbers by default in a Numbered List. It is popularly known as HTML Ordered List and hence starts with the <ol> tag. The list items in an HTML Ordered List starts with the <li> tag.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Ordered List or Numbered List</h2>
<ol>
  <li>Name</li>
  <li>Age</li>
  <li>Address</li>
</ol>  
</body>
</html>

Output:




HTML Ordered List or Numbered List

  1. Name
  2. Age
  3. Address

Explanation: 

In the above example, we created an ordered or numbered list in HTML containing three items.

HTML Unordered List or Bulleted List: 

As the name itself suggests, all the list items are marked with bullets by default in a Bulleted List. It is popularly known as HTML Unordered List and hence starts with the <ul> tag. The list items in an HTML Unordered List starts with the <li> tag.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Unordered List or Bulleted List</h2>
<ul>
  <li>Name</li>
  <li>Age</li>
  <li>Address</li>
</ul>  
</body>
</html>

Output:




HTML Unordered List or Bulleted List

  • Name
  • Age
  • Address

Explanation:
In the above example, we created an unordered or bulleted list in HTML containing three items.

HTML Description List or Definition List:
In HTML Description list, entries are listed like a dictionary or encyclopedia, and hence it is also called as a Definition List. To display a glossary, a list of terms or other name-value lists, the HTML Description list can be the best choice.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Description List or Definition List</h2>
<dl>
  <dt><b>Name</b></dt>
  <dd>- Write your Full name in Capital letters.</dd>
  <dt><b>Age</b></dt>
  <dd>- Write your actual age.</dd>
  <dt><b>Address</b></dt>
  <dd>- Write your permanent address details.</dd>
</dl>
</body>
</html>

Output:




HTML Description List or Definition List

Name
- Write your Full name in Capital letters.
Age
- Write your actual age.
Address
- Write your permanent address details.

Explanation:
In the above example, we created a description or definition list in HTML containing three items along with their definitions.

HTML Nested List:
A nested list can be simply understood as a list within another list. The lists within a nested list need not be of the same type.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Nested List</h2>
<ul>
  <li>Name</li>
  <li>Age</li>
  <li>Address
  <ol>
      <li>Local Address</li>
      <li>Permanent Address</li>
    </ol>
    </li>
</ul>
</body>
</html>

Output:




HTML Nested List

  • Name
  • Age
  • Address
    1. Local Address
    2. Permanent Address

Explanation:
In the above example, we created a nested list in HTML. It includes an unordered list of three items. One of the items of this list contains an ordered list of two items.

Please Share