HTML HTML Tutorial HTML Forms HTML Graphics HTML Media HTML APIs HTML Tags



HTML Tag: ol

The HTML tag ol stands for ordered list. It is used to create a list of items that are ordered in a specific sequence. The items in the list are numbered by default, but the numbering can be customized using CSS.

The ol tag is a container tag, which means that it contains one or more li tags. The li tags represent the individual items in the list. The ol tag can also contain other HTML tags, such as headings, paragraphs, and images.

The ol tag is commonly used to create lists of steps in a process, lists of ingredients in a recipe, or lists of items in an inventory.

Code Examples

Here are some examples of how to use the ol tag:

Example 1: Basic Ordered List

This example shows a basic ordered list with three items:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3

Example 2: Ordered List with Custom Numbering

This example shows an ordered list with custom numbering using CSS:

<style>
  ol {
    counter-reset: my-counter;
  }
  li:before {
    counter-increment: my-counter;
    content: counter(my-counter) ". ";
  }
</style>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3

Example 3: Ordered List with Nested Lists

This example shows an ordered list with nested lists:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ol>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
      <li>Sub-item 3</li>
    </ol>
  </li>
  <li>Item 4</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
    1. Sub-item 1
    2. Sub-item 2
    3. Sub-item 3
  4. Item 4

Conclusion

The ol tag is a useful HTML tag for creating ordered lists of items. It can be customized using CSS to change the numbering or add other styles to the list. By using the ol tag, you can create clear and organized lists of information for your website or application.

References

Activity