HTML List

    Lists are used to grouping the relatable data items, and in HTML have certain elements to represent a list. In HTML we have three major List elements to represent listing:

    • Unordered List <ul>
    • Ordered list <ol>
    • Definition List <dl>

    Unordered HTML List

    To represent an Unordered list, we use the <ul> element. And every item of the unordered list can be specified using <li> tag.

    Example 

    <strong>Best Programming Languages</strong>
<ul>
  <li>Python</li>
  <li>Java</li>
  <li>C++</li>
  <li>Ruby</li>
  <li>JavaScript</li>
  <li>R</li>
</ul>

    Output Best Programming Languages

    • Python
    • Java
    • C++
    • Ruby
    • JavaScript
    • R

    It is called unordered list because there is no proper numbering before the list items. The browser displays the unordered list items as bullet points.

    type attribute for unordered list

    Using the type attribute we can change the format and shape of unordered list bullets.

    Example 

    <strong>Best Programming Languages</strong> 
<ul type ="square">   
   <li>Python</li>   
   <li>Java</li>   
   <li>C++</li>
</ul>

    Output Best Programming Languages

    • Python
    • Java
    • C++

    Apart from square there other values for type attributes such as "disc" and "circle"

    Ordered List

    To represent an Ordered List we use the <ol> element, and like unordered list, its list items also defined using <li> element.

    Example 

    <strong>Best Programming Languages</strong> 
<ol>   
   <li>Python</li>   
   <li>Java</li>   
   <li>C++</li>   
   <li>Ruby</li>   
   <li>JavaScript</li>   
   <li>R</li> 
</ol>

    Output Best Programming Languages

    1. Python
    2. Java
    3. C++
    4. Ruby
    5. JavaScript
    6. R

    In the ordered list, the list items represented using numbering. The browser starts it from 1 up to the last list item number.

    Type attribute for Ordered list

    There are many types of formats we can use to represent the ordered list elements. 

    <ol type = "I"> - Roman Numbering Upper-Case.
<ol type = "i"> - Roman Numbering Lower-Case.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Lettrs.

    Example 

    <strong>Best Programming Languages</strong> 
<ol type ="A">   
   <li>Python</li>   
   <li>Java</li>   
   <li>C++</li>   
</ol>

    Output Best Programming Languages

    1. Python
    2. Java
    3. C++

    <ol> start Attribute

    By default, the numbering of ordered list start from 1 but using the start attribute we can change the starting number.

    Example 

    <strong>Best Programming Languages</strong> 

<ol type ="A" start= "4">
  <li>Ruby</li>    
  <li>JavaScript</li>    
  <li>R</li> 
</ol>

    Output Best Programming Languages

    1. Ruby
    2. JavaScript
    3. R

    HTML Definition List

    We use definition list <dl> when we simultaneously want to define the list item with a line break indented syntax. The definition list comprises of 3 tags.

    • <dl> It is the starting tag of definition list like <ul> and <ol>
    • <dt> It defines the list item or terms it could be treated as a replacement of <li> tag.
    • <dd> It defines the definition of the list item or term.

    Example 

    <dl>
    <dt><b>HTML</b></dt>
       <dd>Hyper Text Markup Language</dd>

    <dt><b>CSS</b></dt>
       <dd>Cascading Style Sheet</dd>
    
    <dt><b>JS</b></dt>
       <dd>JavaScript</dd>
</dl>

    Output

    HTML

    Hyper Text Markup Language

    CSS

    Cascading Style Sheet

    JS

    JavaScript

    Summary

    • Lists are used to group relatable data items.
    • In HTML we have 3 main tags for listing elements, "<ul>", "<ol>" and "<dl>".
    • <ul> stands for an unordered list and it displays its list elements in dotted format.
    • The type of bullets can be changed using type attribute.
    • <ol> use numbering to list its items.
    • <dl> is used when we want to provide the definition for the list items.
    Previous Tutorial Next Tutorial