HTML Lists

The HTML <ul> element to define an unordered list. Use the CSS list-style-type property to define the list item marker. Use the HTML <ol> element to define an ordered list. Use the HTML type attribute to define the numbering type. Use the HTML <li> element to define a list item.
Tag Description
<ul> unordered list
<ol> ordered list
<li> list item
<dl> description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Unordered list
An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.
Example :
<html>
    <head>
    <title>HTML Unordered List</title>
    </head>
    <body>
        <ul>
            <li>Sample</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
        </ul>
    </body>
</html>
Output :
  • Sample
  • Sample 2
  • Sample 3
  • Sample 4
Example 2 :
<html>
    <head>
    <title>HTML Unordered List</title>
    </head>
    <body>
        
         <ul type="square">
            <li>Sample</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
         </ul>
         
         
         <ul type="circle">
            <li>Sample</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
         </ul>
         
         
         <ul type="disc">
            <li>Sample</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
         </ul>
 
    </body>
</html>
Output :
  • Sample
  • Sample 2
  • Sample 3
  • Sample 4


  • Sample
  • Sample 2
  • Sample 3
  • Sample 4


  • Sample
  • Sample 2
  • Sample 3
  • Sample 4
HTML Ordered Lists
This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.
Example :
<html>
    <head>
    <title>HTML Ordered List</title>
    </head>
    <body>
        <ol>
            <li>Sample</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
        </ol>
    </body>
</html>
Output :
  1. Sample
  2. Sample 2
  3. Sample 3
  4. Sample 4
Example 2 :
<html>
    <head>
    <title>HTML Ordered List</title>
    </head>
    <body>
        
         <ol type="1">
            <li>Sample</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
         </ol>
         
         
         <ol type="I">
            <li>Sample</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
         </ol>
         
         
         <ol type="i">
            <li>Sample</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
         </ol>
         
         <ol type="A">
            <li>Sample</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
         </ol>
 
         <ol type="a">
            <li>Sample</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
         </ol>
         
         <ol type="I" start="5">
            <li>Sample</li>
            <li>Sample 2</li>
            <li>Sample 3</li>
            <li>Sample 4</li>
         </ol>
         
    </body>
</html>
Output :
  1. Sample
  2. Sample 2
  3. Sample 3
  4. Sample 4


  1. Sample
  2. Sample 2
  3. Sample 3
  4. Sample 4


  1. Sample
  2. Sample 2
  3. Sample 3
  4. Sample 4


  1. Sample
  2. Sample 2
  3. Sample 3
  4. Sample 4


  1. Sample
  2. Sample 2
  3. Sample 3
  4. Sample 4


  1. Sample
  2. Sample 2
  3. Sample 3
  4. Sample 4
HTML Definition Lists
HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Definition List tags.

<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the end of the list
Example :
<html>
    <head>
    <title>HTML Definition List</title>
    </head>
    <body>
        <dl>
            <dt><b>HTML</b></dt>
            <dd>This stands for Hyper Text Markup Language</dd>
            <dt><b>HTTP</b></dt>
            <dd>This stands for Hyper Text Transfer Protocol</dd>
        </dl>
    </body>
</html>
Output :
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol