HTML 5

Overview Of HTML Lists

Overview of HTML Lists
 
In HTML, there are the following types of lists:

  • Unordered Lists (<ul>) - The list items are marked with bullets.
  • Ordered Lists (<ol>) - The list items are marked with numbers or letters.
  • Definition Lists(<dl>)- This arranges your items in the same way as they are arranged in a dictionary.

All lists must contain one or more list elements.

Unordered HTML Lists

An unordered list is a collection of related items that have no special order or sequence. An unordered list starts with the <ul> element. Each list item starts with the <li> element.

The list items will be marked with bullets (black circles):
  1. <!DOCTYPE html>  
  2. <html>   
  3. <head>  
  4.     <title>HTML Unordered List</title>  
  5. </head>    
  6. <body>  
  7.     <ul>  
  8.         <li>JavaScript</li>  
  9.         <li>ASP.NET</li>  
  10.         <li>CSS</li>  
  11.         <li>HTML</li>  
  12.     </ul>  
  13. </body>    
  14. </html>  
This will produce the following result:

1

Note: If you not giving  any type attribute to the <ul> tag, then this take the default value (In small black Circles).

The type Attribute:

ou can use type attribute for <ul> tag to specify the type of bullet you like to use. The fFollowing are the possible options:
  1. <ul type="square">  
  2. <ul type="disc">  
  3. <ul type="circle">  
  4. <ul type="none">  
Unordered List with Square Bullets:

The following is an example where we used <ul type="square"> :
  1. <!DOCTYPE html>  
  2. <html>    
  3. <head>  
  4.     <title>Square Bullets</title>  
  5. </head>  
  6. <body>  
  7.     <ul type="square">  
  8.         <li>Amit</li>  
  9.         <li>Gagan</li>  
  10.         <li>Vikram</li>  
  11.         <li>Mudit</li>  
  12.     </ul>  
  13. </body>    
  14. </html>  
This will produce the following result:

2

Unordered List with Disc Bullets:

The following is an example where we used <ul type="disc"> : 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Disc Bullets</title>  
  5. </head>  
  6. <body>  
  7.     <ul type="disc">  
  8.         <li>New Delhi</li>  
  9.         <li>Nagpur</li>  
  10.         <li>Bareilly</li>  
  11.         <li>Noida</li>  
  12.     </ul>  
  13. </body>  
  14. </html>  
This will produce the following result:

3

Unordered List with Circle Bullets:

The following is an example where we used <ul type="circle"> :
  1. <!DOCTYPE html>  
  2. <html>    
  3. <head>  
  4.     <title>Circle Bullets</title>  
  5. </head>    
  6. <body>  
  7.     <ul type="circle">  
  8.         <li>Mango</li>  
  9.         <li>Banana</li>  
  10.         <li>Apple</li>  
  11.         <li>PineApple</li>  
  12.     </ul>  
  13. </body>    
  14. </html>  
This will produce the following result:

4

Unordered List without Bullets:

The following is an example where we used <ul type="none"> : With the use of none the list items will not be marked.
  1. <!DOCTYPE html>  
  2. <html>   
  3. <head>  
  4.     <title>without Bullets</title>  
  5. </head>   
  6. <body>  
  7.     <ul type="none">  
  8.         <li>MongoDB</li>  
  9.         <li>SQLServer</li>  
  10.         <li>MySql</li>  
  11.         <li>Oracle</li>  
  12.     </ul>  
  13. </body>    
  14. </html>  
This will produce the following result:

5

Ordered HTML Lists 

If you are required to put your items in a numbered list instead of bullet, then HTML ordered list will be used. This list is created  using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element starting with the <li> tag.

Example :
  1. <!DOCTYPE html>  
  2. <html>    
  3. <head>  
  4.     <title>HTML Ordered List</title>  
  5. </head>    
  6. <body>  
  7.     <ol>  
  8.         <li>Beetroot</li>  
  9.         <li>Ginger</li>  
  10.         <li>Potato</li>  
  11.         <li>Radish</li>  
  12.     </ol>  
  13. </body>    
  14. </html>  
This will produce the following result:

6

Note: If you not giving  any type attribute to the <ol> tag, then by default it takes a number.

The type Attribute:

You can use type attribute for <ol> tag to specify the type of numbering. By default it is a number. The following are the options:

Type Description
type="1"The list items will be numbered with numbers (default)
type="A"The list items will be numbered with uppercase letters
type="a"The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Ordered List with Numbers:

The following is an example where we used <ol type="1"> :
  1. <!DOCTYPE html>  
  2. <html>    
  3. <head>  
  4.     <title>Ordered List with Numbers</title>  
  5. </head>    
  6. <body>  
  7.     <ol type="1">  
  8.         <li>MCA</li>  
  9.         <li>BCA</li>  
  10.         <li>B.Tech</li>  
  11.         <li>BSC</li>  
  12.     </ol>  
  13. </body>    
  14. </html>  
This will produce the following result:

7 
 
Ordered List with Uppercase Roman Numbers :

The following is an example where we used <ol type="I"> : 
  1. <!DOCTYPE html>  
  2. <html>    
  3. <head>  
  4.     <title>Uppercase Roman Numbers</title>  
  5. </head>    
  6. <body>  
  7.     <ol type="I">  
  8.         <li>Cricket</li>  
  9.         <li>Hockey</li>  
  10.         <li>Footwall</li>  
  11.         <li>Tennis</li>  
  12.     </ol>  
  13. </body>    
  14. </html>  
This will produce the following result:

8
 
Ordered List with Lowercase Roman Numbers:

The following is an example where we used <ol type="i"> :
  1. <!DOCTYPE html>  
  2. <html>    
  3. <head>  
  4.     <title>Lowercase Roman Numbers</title>  
  5. </head>    
  6. <body>  
  7.     <ol type="i">  
  8.         <li>India</li>  
  9.         <li>Nepal</li>  
  10.         <li>England</li>  
  11.         <li>Rusia</li>  
  12.     </ol>  
  13. </body>    
  14. </html>  
This will produce the following result:

9
 
Ordered List with Uppercase Letters:

The following is an example where we used <ol type="A"> :
  1. <!DOCTYPE html>  
  2. <html>    
  3. <head>  
  4.     <title>Uppercase Letters </title>  
  5. </head>    
  6. <body>  
  7.     <ol type="A">  
  8.         <li>Tomato</li>  
  9.         <li>Ginger</li>  
  10.         <li>Potato</li>  
  11.         <li>Radish</li>  
  12.     </ol>  
  13. </body>    
  14. </html>  
This will produce the following result:

10
 
Ordered List with Lowercase Letters:

The following is an example where we used <ol type="a"> :
  1. <!DOCTYPE html>  
  2. <html>    
  3. <head>  
  4.     <title>Lowercase Letters</title>  
  5. </head>    
  6. <body>  
  7.     <ol type="a">  
  8.         <li>HTML is very easy language.</li>  
  9.         <li>HTML is a Markup Language.</li>  
  10.         <li> HTML documents are described by HTML tags.</li>  
  11.         <li> Each HTML tag describes different document content.</li>  
  12.     </ol>  
  13. </body>    
  14. </html>  
This will produce the following result:

11
 
The start Attribute:

You can use start attribute for <ol> tag to specify the starting point of numbering you need. The following are the possible options:

Type Description
<ol type="1" start="2">Number starts with 2.
<ol type="I" start="4">Number starts with IV.
<ol type="i" start="5">Number starts with v.
<ol type="a" start="3"> Letters starts with c.
<ol type="A" start="6">Letters starts with F.

The following is an example where we can use all styles:

  1. <!DOCTYPE html>  
  2. <html>    
  3. <head>  
  4.     <title>start attribute</title>  
  5. </head>    
  6. <body>  
  7.     <ol type="1" start="2">  
  8.         <li>Beetroot</li>  
  9.         <li>Ginger</li>  
  10.     </ol>  
  11.     <ol type="I" start="4">  
  12.         <li>Sagar</li>  
  13.         <li>Meera</li>  
  14.     </ol>  
  15.     <ol type="i" start="5">  
  16.         <li>Microsoft</li>  
  17.         <li>Facebook</li>  
  18.     </ol>  
  19.     <ol type="a" start="3">  
  20.         <li>Good Boy</li>  
  21.         <li>Bad Boy</li>  
  22.     </ol>  
  23.     <ol type="A" start="6">  
  24.         <li>Google is a popular search engine.</li>  
  25.         <li>DuckDuckgo is also a search engine.</li>  
  26. </body>    
  27. </html>  
This will produce the following result:
 
12
 
HTML Definition Lists

HTML supports a list style which is called definition lists where entries are listed like in a dictionary. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Definition List makes use of the following three tags:
  • <dl> - Defines the start of the list
  • <dt> - A term
  • <dd> - Term definition
  • </dl> - Defines the end of the list
Example:
  1. <!DOCTYPE html>  
  2. <html>    
  3. <head>  
  4.     <title>HTML Definition Lists</title>  
  5. </head>    
  6. <body>  
  7.     <dl>  
  8.         <dt><b>ASP.NET</b></dt>  
  9.         <dd>ASP.NET is easy to Learn</dd>  
  10.         <dt><b>FTP</b></dt>  
  11.         <dd>This stands for File Transfer Protocol</dd>  
  12.     </dl>  
  13. </body>    
  14. </html>  
This will produce the following result:
 
13  

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs