HTML Ordered, Unordered List :<ol> & <ul>

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

Download
<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

Download
<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

Download
<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.

Code Explanation

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 as <dd> tag shows each term.

Online Test / Quiz

Our Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
2021-22 © shapeyourpath.com