HTML List

By | October 20, 2020

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:

Vamware
  • 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.

Leave a Reply

Your email address will not be published. Required fields are marked *