Online Certificate Courses

HTML provides web developers with three different ways of displaying lists holding data. All HTML lists must contain one or more list elements. Lists can contain: 

1. <ul> : An unordered list. This will display items in lists using plain bullets.

2. <ol> :  An ordered list. This uses various types of numbers to display your list data.

3. <dl> : A definition list. This arranges your list items in the same way they are all in a dictionary

HTML Unordered Lists

An unordered list is a collection of items that are related and do not have any special arrangement or sequence. This kind of list can be created just by making use of the HTML <ul> tag. Every single item in the unordered list is displayed with a bullet.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
   
</html>

The above code will be displayed as:

The type attribute

This is an HTML attribute for <ul> tag to used to specify the style of bullet you like your list items to be displayed with. The default list type is a disc. The following are the available style of bullets:

<ul type = "square">
<ul type = "disc"> <ul type = "circle">

Example

Here is an example where the Unordered list type is square:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

The above code will be displayed as:

Example Two

Here is an example where the Unordered list type is disc:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

The above code will be displayed as:

Example Three

Here is an example where the Unordered list type is a circle:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
	
</html>

The above code will be displayed as:

 

HTML Ordered Lists

If you eventually have to display your list in a numbered or order arrangement and not unordered or bulleted, then you can use the HTML ordered list tag. This list is generated by using <ol> HTML tag. The numbering of the list begins at one and it increases by one for each successive ordered list element that has the <li> tag

Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

The above code will be displayed as:

 

 

 


90% Scholarship Offer!!

The Scholarship offer is a discount program to take our Course Programs and Certification valued at $70 USD for a reduced fee of $7 USD. - Offer Closes Soon!!

Copyrights © 2021. SIIT - Scholars International Institute of Technology is a subsidiary of Scholars Global Tech. All Rights Reserved.