An ordered HTML list

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
<ol>
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
   <li>Fourth item</li>
<ol>

The list items will be marked with numbers by default

Defines an ordered list <ol>

Defines a list item <li>

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

  1. first
  2. second
  1. first
  2. second
  1. first
  2. second
  1. first
  2. second
  1. first
  2. second
    <ol>
        <li>first<li>
        <li>second<li>
    </ol>

    <ol type ="1">
        <li>first<li>
        <li>second<li>
    </ol>

    <ol type ="A">
        <li>first<li>
        <li>second<li>
    </ol>

    <ol type ="a">
        <li>first<li>
        <li>second<li>
    </ol>

    <ol type ="I">
        <li>first<li>
        <li>second<li>
    </ol>

    <ol type ="i">
        <li>first<li>
        <li>second<li>
    </ol>

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

  1. first
  2. second
  1. first
  2. second
        <ol start ="50">
            <li>first<li>
            <li>second<li>
        </ol>
    
        <ol type ="I"start ="10">
            <li>first<li>
            <li>second<li>
        </ol>

An unordered HTML list

<ul>
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
   <li>Fourth item</li>
<ul>

The list items will be marked with bullets (small black circles) by default

Defines an unordered list <ul>

Unordered HTML List marker

<ul style="list-style-type: disc;">
   <li>disc</li>
<ul>
<ul style="list-style-type: circle;">
   <li>circle</li>
<ul>
<ul style="list-style-type: square;">
   <li>square</li>
<ul>
<ul style="list-style-type: none;">
   <li>none</li>
<ul>

Nested HTML Lists

<ul>
   <li>Ashik</li>
   <li>hobby
      <ul>
         <li>watching movie</li>
         <li>Gaming</li>
      </ul>
   </li>
   <li>Like food
      <ol>
         <li>Bangladeshi food</li>
         <li>Chinese food</li>
      </ol>
   </li>
</ul>

A Description List

First item
-Second item
Third item
-Fourth item
<dl>
   <dt>First item</dt>
   <dd>Second item</dd>
   <dt>Third item</dt>
   <dd>Fourth item</dd>
<dl>

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Defines a description List <dl>

Defines a term in a description list <dt>

Describes the term in a description list <dd>


Back to