The `<ol>` tag is used in HTML to create an ordered list of items. The items are automatically numbered in ascending order, starting from 1. In this tutorial, we will cover the following topics:
1. Syntax of the `<ol>` tag
2. Types of numbering
3. Nested lists
4. Styling the list
Syntax of the `<ol>` tag
The basic syntax of the `<ol>` tag is as follows:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
The `<ol>` tag is used to define the ordered list. Each item in the list is defined using the `<li>` tag. The text of each item goes between the opening and closing `<li>` tags.
Types of numbering
By default, the numbering of the items in an ordered list starts at 1 and goes up by 1 for each item. However, you can customize the numbering using the `type` attribute of the `<ol>` tag. The following values are supported:
– `type=”1″` (default): The numbering starts at 1 and goes up by 1 for each item.
– `type=”a”`: The numbering starts at “a” and goes up by 1 for each item. After “z”, the letters start again at “a”.
– `type=”A”`: The numbering starts at “A” and goes up by 1 for each item. After “Z”, the letters start again at “A”.
– `type=”i”`: The numbering starts at “i” and goes up by 1 for each item. After “x”, the numbers start again at “i”.
– `type=”I”`: The numbering starts at “I” and goes up by 1 for each item. After “X”, the numbers start again at “I”.
Here’s an example of using the `type` attribute:
<ol type=”a”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
This will create an ordered list with lowercase letters for numbering.
Nested lists
You can also create nested lists by placing an `<ol>` or `<ul>` tag inside an `<li>` tag. Here’s an example:
<ol>
<li>Item 1</li>
<li>Item 2
<ol>
<li>Nested item 1</li>
<li>Nested item 2</li>
</ol>
</li>
<li>Item 3</li>
</ol>
This will create an ordered list with a nested unordered list inside the second item.
Styling the list
You can style the list using CSS. Here’s an example of styling the list to remove the default numbering:
<style>
ol {
list-style: none;
}
</style>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
This will remove the default numbering from the list. You can also add your own numbering using CSS.
In conclusion, the `<ol>` tag is used to create an ordered list of items in HTML. You can customize the numbering, create nested lists, and style the list using CSS.
