HTML - <ol> and <ul> tag

What is <ol> in HTML?

The <ol> tag stands for "ordered list". It is used to create a list where the items are automatically numbered.

Common Attributes of <ol>:

  1. type

    • Purpose: Defines the type of numbering.

    • Values:

      • "1" – Numbers (default)

      • "A" – Uppercase letters

      • "a" – Lowercase letters

      • "I" – Uppercase Roman numerals

      • "i" – Lowercase Roman numerals

    • Example: <ol type="A">

  2. start

    • Purpose: Specifies the starting number.

    • Values: Any number

    • Example: <ol start="5"> (List starts at 5)

  3. reversed

    • Purpose: Displays the list in descending order.

    • Values: Boolean (just write reversed)

    • Example: <ol reversed>

What is <ul> in HTML?

The <ul> tag stands for "unordered list". It creates a list where the items are marked with bullets rather than numbers.

Common Attributes of <ul>:

  1. type (Not supported in HTML5, but still works in some browsers)

    • Purpose: Sets the type of bullet.

    • Values:

      • "disc" – Solid circle (default)

      • "circle" – Hollow circle

      • "square" – Solid square

    • Example: <ul type="square">

  2. compact (Obsolete attribute)

    • Purpose: Suggests a more compact list layout.

    • Note: Not supported in modern HTML; use CSS instead.

Common Element for Both: <li>

  • Used to define each list item inside <ol> or <ul>.

  • Example:

    <ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Key Difference

  • <ol> = Ordered list (numbered)

  • <ul> = Unordered list (bulleted)