Ordered Lists
Ordered lists are used to display a list of items in a sequential order. The items in an ordered list are numbered, either with numbers or letters.
The <ol>
element is used to define an ordered list. The <li>
element is used to define each item in the list.
Here is an example of an ordered list:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Task
Add an ordered list ol with 3 items il: Portfolio Website, E-commerce App, Blog Website after Projects heading within the section element. Run the code to see the results and experiment with the code to get used to it.
The type
attribute of the <ol>
element can be used to specify the type of numbering for the list. The possible values for the type
attribute are:
1
: Numbers (default)A
: Uppercase lettersa
: Lowercase lettersI
: Uppercase Roman numeralsi
: Lowercase Roman numerals
For example, the following code will create an ordered list with the items numbered with lowercase Roman numerals:
<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Ordered lists can be nested. This means that you can have an ordered list inside another ordered list.
Here is an example of a nested ordered list:
<ol>
<li>Item 1
<ol>
<li>Item 1.1</li>
<li>Item 1.2</li>
</ol>
</li>
<li>Item 2</li>
</ol>
This code will create an ordered list with two items. The first item is a nested ordered list with two items. The second item is a single item.
Here are some additional tips for using ordered lists in HTML:
- Use ordered lists to display a list of items in a sequential order.
- Use the
type
attribute to specify the type of numbering for the list. - Nest ordered lists to create a hierarchical list.
- Use CSS to style the ordered lists.