HTML Ordered List

HTML ordered list are used to create lists where each item is sequentially numbered. The ordered list tag is <ol>. Each list item is enclosed in the <li> tag, and the numbering is automatically done by the browser. Ordered lists are useful for creating lists that have a specific order or hierarchy.

Creating an HTML Ordered List

To create an HTML ordered list, you need to use the <ol> tag. Inside this tag, you can add multiple <li> tags to define the individual list items. Here's an example:

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

This will produce the following output:

  1. First item
  2. Second item
  3. Third item

Nesting Ordered Lists

HTML ordered lists can be nested inside each other to create sub-levels of hierarchy. You can do this by placing an <ol> tag inside an <li> tag of another <ol> tag. Here's an example:

1<ol>
2  <li>First item</li>
3  <li>Second item
4    <ol>
5      <li>Sub-item 1</li>
6      <li>Sub-item 2</li>
7    </ol>
8  </li>
9  <li>Third item</li>
10</ol>

This will produce the following output:

  1. First item
  2. Second item
    1. Sub-item 1
    2. Sub-item 2
  3. Third item

Nesting Unordered Lists

You can also nest an unordered list inside an ordered list. This is done in the same way as nesting an ordered list, but using the <ul> tag instead of the <ol> tag. Here's an example:

1<ol>
2  <li>First item</li>
3  <li>Second item
4    <ul>
5      <li>Sub-item 1</li>
6      <li>Sub-item 2</li>
7    </ul>
8  </li>
9  <li>Third item</li>
10</ol>

This will produce the following output:

  1. First item
  2. Second item
    • Sub-item 1
    • Sub-item 2
  3. Third item

Multi-level Nesting of Ordered Lists

You can create multiple levels of hierarchy by nesting ordered lists inside each other. Here's an example:

1<ol>
2  <li>First item</li>
3  <li>Second item
4    <ol>
5      <li>Sub-item 1</li>
6      <li>Sub-item 2
7        <ol>
8          <li>Sub-sub-item 1</li>
9          <li>Sub-sub-item 2</li>
10        </ol>
11      </li>
12    </ol>
13  </li>
14  <li>Third item</li>
15</ol>

This will produce the following output:

  1. First item
  2. Second item
    1. Sub-item 1
    2. Sub-item 2
      1. Sub-sub-item 1
      2. Sub-sub-item 2
  3. Third item

HTML ordered lists are a great way to organize information in a specific order or hierarchy. By nesting ordered lists inside each other, you can create multiple levels of hierarchy, making it easier to display complex information in a structured way.