HTML Lists

HTML Lists: Lists are used to specify a list of information. And the lists may contain one (or) more elements. Now in HTML, we are having three different types of HTML lists. They are as follows:

  1. Ordered list (or) Numbered List (ol)
  2. Unordered list (or) Bulleted List (ul)
  3. Description list (or) definition List ( dl)

1)HTML Ordered List (or) Numbered List

In the ordered list of HTML, the items are marked with numbers by default. And it is also known as a Numbered list. The ordered list starts with <ol> tag and the list item starts with <li> tag.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Ordered List</title>
   </head>
   <body>
      <ol>
         <li>Green</li>
         <li>Lavender</li>
         <li>Orange</li>
         <li>Pink</li>
      </ol>
   </body>
</html>

Output: 

  1. Green
  2. Lavender
  3. Orange
  4. Pink

2)HTML Unordered List (or) Bulleted List

In HTML all the items are displayed in a mixed format. And bullets are used to represent. And it was represented using <ul> tag.

Example: 

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Ordered List</title>
   </head>
   <body>
      <ol>
         <li>Green</li>
         <li>Lavender</li>
         <li>Orange</li>
         <li>Pink</li>
      </ol>
   </body>
</html>

Output:

  • Green
  • Lavender
  • Orange
  • Pink

3)HTML Description List (or) Definition List

HTML description is another list style, which was supported by HTML and XHTML. And it was also known as a definition list where entries are listed like a dictionary (or) encyclopedia. And this HTML definition list contains three tags.

  1. <dl> : Defines the start of the list
  2. <dt>: Defines a term
  3. <dd>: Defines the term definition

Example:

<dl>  
  <dt>Aries</dt>  
  <dd>-One of the 12 horoscope sign.</dd>  
  <dt>Bingo</dt>  
  <dd>-One of my evening snacks</dd>  
 <dt>Leo</dt>  
 <dd>-It is also an one of the 12 horoscope sign.</dd>  
  <dt>Oracle</dt>  
  <dd>-It is a multinational technology corporation.</dd>   
</dl>

HTML Nested List

A list within another list is termed as a nested list. In case if you want a bullet list inside a numbered list then such type of list will be called as Nested List.

Example:

<!DOCTYPE html>  
<html>  
<head>  
    <title>Nested list</title>  
</head>  
<body>  
    <p>List of Indian States with thier capital</p>  
<ol>  
    <li>Bihar  
        <ul>  
            <li>Patna</li>  
        </ul>  
    </li>  
    <li>Haryana  
        <ul>  
            <li>Chandigarh</li>  
        </ul>  
    </li>  
    <li>Gujarat  
        <ul>  
            <li>Gandhinagar</li>  
        </ul>  
    </li>  
    <li>Rajasthan   
        <ul>  
            <li>Jaipur</li>  
        </ul>  
    </li>  
    <li>Hyderabad  
        <ul>  
            <li>Telangana</li>  
        </ul>  
    </li>  
    <li>Andhrapradesh  
        <ul>  
       <li>Amaravathi</li></ul>  
    </li>  
</ol>  
</body>  
</html>