To create an ordered list in HTML, you use the <ol>
and <li>
tags. The <ol>
tag defines the ordered list itself, and the <li>
tag defines each list item within the ordered list. By default, list items are numbered.
Understanding Ordered Lists in HTML
HTML ordered lists are used to display a list of items where the order is important. Unlike unordered lists that use bullets, ordered lists use numbers (by default) to indicate the sequence of items.
How to Create an Ordered List
Here's a breakdown of the elements required to create an ordered list:
<ol>
tag: This tag signifies the beginning and end of the ordered list. The HTML ordered list starts with the<ol>
tag and ends with the</ol>
tag, according to reference material from 13-Oct-2024.<li>
tag: This tag represents each list item within the ordered list. The list items start with the<li>
tag and end with</li>
tag, according to reference material from 13-Oct-2024.
Example of an Ordered List
Here's an example of how to create a simple ordered list in HTML:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
This code will render the following output in a web browser:
- First item
- Second item
- Third item
Customizing Ordered Lists
While ordered lists default to using numbers, you can customize the numbering style using CSS or the type
attribute in older HTML versions (though CSS is the preferred method for styling).
Practical Applications of Ordered Lists
Ordered lists are useful in various scenarios, including:
- Step-by-step instructions: When providing instructions, an ordered list can clearly define the sequence of steps.
- Ranked lists: Displaying top 10 lists or other ranked information.
- Table of contents: Presenting a table of contents with numbered sections.
Summary Table
Tag | Description |
---|---|
<ol> |
Defines the ordered list. |
<li> |
Defines each list item within the ordered list. |