HTML Lists

HTML Lists are used to define lists of information using Ordered List , Unordered List , Description List. All the lists may contain the one or more list elements. Here are 3 type of lists example is given below.

  1. Ordered List (ol)
  2. Unordered List (ul)
  3. Description List (dl)

 Points to Known : 

  • Ordered List is also known as Numbered List
  • Unordered List is also known as Bulleted List
  • Description List is also known as Definition List 

HTML Ordered List

The ordered list start with <ol> tag and list items start with <li> tag.

All the lists in HTML are marked with numbers by default.

HTML Ordered List is also known as Numbered List.

<!DOCTYPE html>
<html>  
 <body> 
<ol>  
 <li>Ram</li>  
 <li>Shyam</li>  
 <li>Ravi</li>  
 <li>Ramesh</li>  
</ol>
  </body>
</html>
  Try it Yourself

HTML Unordered List

The ordered list start with <ul> tag and list items start with <li> tag.

All the lists in HTML are marked with bullets by default.

HTML Unordered List is also known as Bulleted List.

<!DOCTYPE html>
<html>
  <body>
    <ul> 
      <li>Ram</li> 
      <li>Shyam</li> 
      <li>Ravi</li> 
      <li>Ramesh</li> 
    </ul> 
  </body> 
</html>
  Try it Yourself

HTML Description List

HTML Description list is also a type of list style which is supported by HTML and XHTML and it is also known as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to existing glossary, list of terms or other name-value list.

The HTML definition list contains with the three tags which is given below :

  • <dl> tag defines the start of the list.
  • <dt> tag defines a term.
  • <dd> tag defines the term definition (description). 
<!DOCTYPE html> 
<html> 
  <body> 
    <dl>  
      <dt>Coffee</dt>  
      <dd>- black hot drink</dd>  
      <dt>Oracle</dt>  
      <dd>-It is a multinational technology corporation.</dd>   
    </dl>  
  </body> 
</html>
  Try it Yourself

HTML Nested List

Where a list within another list is known as nested list. If we want a bullet list inside a numbered list then we can use the nested list.

Example :

<!DOCTYPE html>  
<html>  
<head>  
    <title>Nested list Example</title>  
</head>  
<body>  
    <p>List of Indian States with thier capital</p>  
<ol>  
  <li>Haryana  
        <ul>  
            <li>Chandigarh</li>  
        </ul>  
    </li>
    <li>Delhi  
        <ul>  
            <li>NewDelhi</li>  
        </ul>  
    </li>  
    <li>Gujarat  
        <ul>  
            <li>Gandhinagar</li>  
        </ul>  
    </li>  
    <li>Rajasthan   
        <ul>  
            <li>Jaipur</li>  
        </ul>  
    </li>  
    <li>Maharashtra  
        <ul>  
            <li>Mumbai</li>  
        </ul>  
    </li>  
    <li>Uttarpradesh  
        <ul>  
            <li>Lucknow</li></ul>  
    </li>  
</ol>  
</body>  
</html>
  Try it Yourself
Element Chrome Browser Chrome ie browser IE firefox Firefox opera Opera safari Safari
<ol><ul><dl> Yes Yes Yes Yes Yes

 

Prev

HTML Table

Next

HTML Ordered List