HTML List

HTML list is used to express a group of related data within the list. It is categorized into three parts.

  1. Unordered list
  2. Ordered List
  3. Description list

An unordered list starts with the <ul> tag and end with closing with </ul> tag while as each list item exit within <li> tag.

Unordered list - It is used to create or express a group of related data without order.

An unordered list starts with the <ul> tag and end with closing with </ul> tag while as each list item exit within <li> tag.Unordered List item displays on the screen with a bullet by default.

General Syntax

    <ul>
  <li>Cricket</li>
  <li>Footbal</li>
  <li>Hockey</li>
</ul>    
   

Source Code

      
        <ul>
  <li>Cricket</li>
  <li>Footbal</li>
  <li>Hockey</li>
</ul>      
    

Source Code: Output

  • Cricket
  • Footbal
  • Hockey

Code Explanation

Unordered list - It is used to create or express a group of related data without order.

An unordered list starts with the <ul> tag and end with closing with </ul> tag while as each list item exit within <li> tag.Unordered List item displays on the screen with a bullet by default.

Ordered List - An ordered list displays group of related data in a specific order.

Ordered list starts with starting <ol> tag while as end with closing </ol> tag while as list item starts with starting <li> tag and close with </li>tag. Ordered list item displays on the screen with a numeric order by default.

General Syntax

    <ol>
     <li>Cricket</li>
    <li>Footbal</li>
    <li>Hockey</li>
  </ol>    
   

Source Code

      
        <ol>
     <li>Cricket</li>
    <li>Footbal</li>
    <li>Hockey</li>
  </ol>      
    

Source Code: Output

  1. Cricket
  2. Footbal
  3. Hockey

Code Explanation

Note - Please keep in mind that the unordered list container is denoted by <ul> while the ordered list container is denoted by <ol>.

HTML Description List

HTML description list mainly consists of three tag namely <dl> tag that defines the description list,the <dt> tag shows the term while <dd> tag shows each term.

General Syntax

    <dl>
    <dt>Biscuit</dt>
    <dd>A  food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>    
   

Source Code

      
        <dl>
    <dt>Biscuit</dt>
    <dd>A  food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>      
    

Source Code: Output

Biscuit
A food made of flour.
Coffee
A drink made from roasted coffee beans.
Online Test / Quiz

Our Tutorials

HTML List
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS