MakeW3web

Ordered Lists

Ordered lists in HTML are used for displaying a collection of items in a specific order, where the sequence of items is important. Ordered lists are created using the `<ol>` element, which stands for "ordered list". Each item within the list is represented by a `<li>` element, which stands for "list item".

By default, ordered lists display items with numbers, starting from 1. However, you can change the numbering style using the `type` attribute, or set a custom starting number with the `start` attribute.

  1. Basic ordered list:
<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Take a shower</li>
</ol>

Output:

  1. Wake up

  2. Brush teeth

  3. Take a shower

  4. Ordered list with a different numbering style:

<ol type="A">
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol>

Output:

A. Step one
B. Step two
C. Step three

  1. Ordered list with a custom starting number:
<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>

Output:

  1. Item 5
  2. Item 6
  3. Item 7

Here's a combined example demonstrating the use of ordered lists with various numbering styles and starting numbers:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ordered Lists Example</title>
</head>
<body>
    <h1>Ordered Lists</h1>
    
    <h2>Basic Ordered List</h2>
    <ol>
        <li>Wake up</li>
        <li>Brush teeth</li>
        <li>Take a shower</li>
    </ol>
    
    <h2>Ordered List with Different Numbering Style</h2>
    <ol type="A">
        <li>Step one</li>
        <li>Step two</li>
        <li>Step three</li>
    </ol>
    
    <h2>Ordered List with Custom Starting Number</h2>
    <ol start="5">
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
    </ol>
</body>
</html>

Ordered lists are useful for structuring content such as step-by-step instructions, rankings, or lists where the order of items carries significance. Using ordered lists improves the readability and accessibility of your content.

Was this page helpful?