What is the HTML tag for numbered list?

What is the HTML Tag for a Numbered List?

The HTML tag for a numbered list is <ol>.

Understanding the <ol> Tag for Ordered Lists

The <ol> HTML element, short for "ordered list," is precisely what you use to create a numbered list on a webpage. It is designed to represent a sequence of items where the order is significant, and browsers typically render these as a list with numerical or alphabetical markers. Each individual item within this ordered list must be defined using the <li> (list item) tag.

Using <ol> semantically indicates that the order of the list items matters, such as a set of instructions, a ranking, or a chronological sequence.

For more detailed information, you can refer to the MDN Web Docs for <ol>.

Basic Structure and Example

To create a numbered list, you wrap your list items in an <ol> tag, with each item individually enclosed within <li> tags.

<ol>
  <li>Open your browser.</li>
  <li>Navigate to your favorite website.</li>
  <li>Enjoy browsing the content.</li>
</ol>

Expected Output:

1. Open your browser.
2. Navigate to your favorite website.
3. Enjoy browsing the content.

Customizing Numbered Lists with Attributes

The <ol> tag comes with several useful attributes that allow you to customize the numbering style and sequence.

The type Attribute

The type attribute lets you specify the kind of numbering style you want to use for the list markers.

• 1 (default): Numbers (1, 2, 3, ...)
• a: Lowercase letters (a, b, c, ...)
• A: Uppercase letters (A, B, C, ...)
• i: Lowercase Roman numerals (i, ii, iii, ...)
• I: Uppercase Roman numerals (I, II, III, ...)

Example using type="a":

<ol type="a">
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Expected Output:

a. First step
b. Second step
c. Third step

The start Attribute

The start attribute allows you to specify the starting value of the list. This is particularly useful when you need a list to continue numbering from a previous section or to begin from a non-standard number.

Example starting from 5:

<ol start="5">
  <li>Continue from five</li>
  <li>Six</li>
  <li>Seven</li>
</ol>

Expected Output:

5. Continue from five
6. Six
7. Seven

The reversed Attribute

The reversed boolean attribute, when present, specifies that the list items should be numbered in descending order.

Example with reversed:

<ol reversed>
  <li>Finish line</li>
  <li>Mid-point</li>
  <li>Starting block</li>
</ol>

Expected Output:

3. Finish line
4. Mid-point
5. Starting block

When to Use an Ordered List

Using an ordered list semantically informs search engines and assistive technologies that the sequence of items is important. Consider using <ol> for:

• Step-by-step instructions or tutorials: E.g., a recipe, assembly guide.
• Rankings or top lists: E.g., Top 10 movies, best-selling products.
• Sequential processes or timelines: E.g., historical events, project phases.
• Legal or academic outlines: E.g., numbered sections or paragraphs.

Styling Numbered Lists with CSS

While HTML provides the structure and basic numbering, Cascading Style Sheets (CSS) offers extensive capabilities to customize the appearance of your numbered lists. You can change the marker type, color, position, and much more using CSS properties like list-style-type, list-style-position, and list-style-image. This allows for greater design flexibility beyond the basic HTML attributes.

Quick Reference Table for Ordered List Tags

HTML Tag	Description	Example
<ol>	Defines an ordered (numbered) list.	<ol> ... </ol>
<li>	Defines an individual list item.	<li>List item content</li>
type	Attribute for numbering style (1, a, A, i, I).	<ol type="A">
start	Attribute to set the starting number.	<ol start="10">
reversed	Attribute to number items in descending order.	<ol reversed>