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

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.