The <ol> tag creates an ordered (numbered) list. It contains one or more <li> (list item) elements. Ordered lists are used when the order of items matters, like steps in a process or rankings.

<ol

Step 2

The <ol> tag automatically numbers its list items. By default, items are numbered 1, 2, 3, etc. You can customize numbering with the type attribute (1, A, a, I, i) and start with the start attribute. Each <li> represents one item in the list.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Step 3

Common use cases: step-by-step instructions, rankings, numbered sequences, and any content where order matters. Ordered lists provide semantic meaning and help screen readers understand the sequence. They're essential for accessibility.

<ol type="A">
  <li>Step A</li>
  <li>Step B</li>
</ol>

Step 4

In the browser, ordered lists display with numbers (1, 2, 3...) by default. The numbers are automatically generated and help users understand the sequence. Screen readers announce the list structure and item numbers.

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Step 5

Checkpoint: Which element creates a numbered list?

<ol>
  <li>Item</li>
</ol>

Step 6

Correct! The <ol> tag creates an ordered (numbered) list. It's different from <ul> which creates an unordered (bulleted) list. Use <ol> when the order of items matters.

<ol>
  <li>Item</li>
</ol>

Step 7

Now it's your turn. Ordered lists provide structure and meaning for numbered sequences. Complete the challenges below to master the <ol> tag!

ol.html

1 / 7

🔢

Tutor:The <ol> tag creates an ordered (numbered) list. It contains one or more <li> (list item) elements. Ordered lists are used when the order of items matters, like steps in a process or rankings.

⭐ 0 EXP

OL Mastery

Unlock nodes by learning ordered lists and list items.

Concept 1: The OL Tag

The <ol> tag creates an ordered (numbered) list. It contains one or more <li> (list item) elements. Ordered lists are used when the order of items matters, like steps in a process or rankings.

System Check

Which element creates a numbered list?

Community Holo-Net

Share Ordered List Designs

Created effective ordered lists? Share your code and numbering strategies.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <ol> Tag

Pascual Vila

Frontend Instructor.

The <ol> tag creates an ordered (numbered) list. It contains one or more <li> (list item) elements. Ordered lists are used when the order of items matters, like steps in a process or rankings.

Automatic Numbering

The <ol> tag automatically numbers its list items. By default, items are numbered 1, 2, 3, etc. You can customize numbering with the type attribute (1, A, a, I, i) and start with the start attribute. Each <li> represents one item in the list.

Common Use Cases

Common use cases include: step-by-step instructions, rankings, numbered sequences, and any content where order matters. Ordered lists provide semantic meaning and help screen readers understand the sequence. They're essential for accessibility.

Best Practices

Use <ol> when the order of items matters. Use <ul> for unordered (bulleted) lists. Always include list items (<li>) inside the list. Ensure proper semantic structure for accessibility. Consider using CSS to style the list appearance.

OL Tag Glossary

<ol>: HTML element that creates an ordered (numbered) list. Contains one or more <li> elements. Automatically numbers items 1, 2, 3, etc. Use when order matters.
<li>: List item element that represents one item in an ordered or unordered list. Must be a direct child of <ol> or <ul>.
type Attribute: Optional attribute on <ol> that customizes numbering style. Values: 1 (numbers), A (uppercase letters), a (lowercase letters), I (uppercase Roman), i (lowercase Roman).
start Attribute: Optional attribute on <ol> that sets the starting number for the list. Value is a number (e.g., start="5" begins numbering at 5).
Ordered vs Unordered: <ol> creates numbered lists (order matters), <ul> creates bulleted lists (order doesn't matter). Use <ol> for steps, rankings, sequences. Use <ul> for general lists.

📖 INDEX