FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Data

Intermediate

Ordered Lists

Learn Ordered Lists with practical examples for tables, lists, structured data relationships, accessibility, SEO and live practice.

HTML data structures

Ordered lists are for steps, ranking and sequence.

Use ol when the order matters. Instructions, recipes, onboarding flows, rankings and procedures are normal ordered list use cases.

The browser numbers items automatically. That means you can insert, remove or reorder li elements without manually renumbering everything.

Ordered lists can start at a different number, count down or use different marker styles, but the semantic idea remains sequence.

ol

The ordered list wrapper.

li

One step or ranked item.

start

Starts numbering at a chosen value.

reversed

Counts down instead of up.

Syntax and structure

Use ol when moving an item changes the meaning.

If step three only makes sense after step two, the content belongs in an ordered list.

Step-by-step workflow

<ol>
  <li>Create index.html.</li>
  <li>Add the document skeleton.</li>
  <li>Open the file in a browser.</li>
</ol>

Manual numbering in paragraphs

<p>1. Create index.html.</p>
<p>2. Add the document skeleton.</p>
<p>3. Open the file in a browser.</p>

HTML quick reference

Reusable examples for quick reference.

Use these patterns when you need the syntax quickly. Each example has its own anchor, so search engines and readers can land directly on the exact pattern instead of only at the top of the lesson.

Semantic pattern

HTML pattern 1

A clean version of the markup from this lesson. Use it when you need the correct HTML shape quickly.

<ol>
  <li>Create index.html.</li>
  <li>Add the document skeleton.</li>
  <li>Open the file in a browser.</li>
</ol>
What this gives you

Meaningful markup that stays understandable before CSS and JavaScript are added.

Editable lab starter

HTML pattern 2

The starting point from the practice lab. Change the HTML first, then use CSS only for presentation.

<main class="demo-card">
  <h1>Publish a lesson</h1>
  <ol>
    <li>Write the HTML content.</li>
    <li>Run the local preview.</li>
    <li>Deploy the page.</li>
  </ol>
</main>

<style>
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(820px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: #f7f7f4;
}

caption {
  caption-side: top;
  margin-bottom: 12px;
  color: #8cffc1;
  font-weight: 900;
  text-align: left;
}

th, td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
}

th {
  color: #8cffc1;
  font-weight: 900;
}

ul, ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
  color: #cfd8e6;
}

li::marker {
  color: #8cffc1;
  font-weight: 900;
}

dl {
  margin: 0;
}
</style>
What this gives you

A complete practice snippet that shows how the HTML behaves in context.

Pattern to avoid

HTML pattern 3

A weak pattern from the lesson. Use it as a warning sign when reviewing real pages.

<p>1. Create index.html.</p>
<p>2. Add the document skeleton.</p>
<p>3. Open the file in a browser.</p>
What this gives you

A recognizable mistake you can search for and refactor.

Rules that matter

Data HTML should preserve relationships, not only appearance.

Tables and lists are small elements with big structural value. They help users scan, compare, follow steps and understand how pieces of information belong together.

Use for sequence

Order should matter to the meaning, not only to the look.

Let the browser number

Manual numbers are fragile when content changes.

Keep steps actionable

Each li should usually describe one clear step.

Use start for continuation

start is useful when a list continues after an interruption.

Use reversed deliberately

Countdowns and rankings can make sense with reversed.

Do not use ol for decoration

If you only want numbers as a design pattern, think carefully about meaning.

Production thinking

Structured data markup affects accessibility, SEO and maintainability.

Why does this matter?

This matters because sequence is information. Ordered lists preserve that information in a way browsers can understand.

Accessibility

A real ol communicates sequence and item count. That is important for instructions and process content.

Production note

Documentation, onboarding and checkout instructions should use ordered lists when users must follow steps correctly.

SEO note

Step-by-step content is easier to understand when sequence is explicit. Clean ordered lists support instructional pages.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Add a fourth step between step two and three.
  • Set start="4" and observe the numbering.
  • Add reversed and explain when it would make sense.

Practice assignment

Do this before moving to the next lesson.

  1. Write an ordered setup guide.
  2. Add one extra step and check the numbering.
  3. Explain why order matters for your content.

Try it yourself

Write a three-step workflow

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?