Chapter 7: Lists in HTML

The type and start Attributes for ol

Numbering schemes, Roman numerals, alphabetic progressions, arbitrary `start` offsets, and manual index overrides with `value`.

LEARNING OBJECTIVES ⌵

Master the 5 valid values of the type attribute on <ol> (1, a, A, i, I).
Use the start attribute to begin list numbering from arbitrary positive, zero, or negative integer offsets.
Understand how start interacts with alphabetic and Roman numeral type systems.
Implement manual numbering overrides using the value attribute on individual <li> elements.
Differentiate between semantic numbering requirements (HTML attributes) and purely visual styling (CSS).

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine drafting an enterprise software contract or a multi-part university examination.

In a legal agreement, Article I covers Definitions, Article II covers Intellectual Property, and Article III covers Termination. Within Section III, specific sub-clauses are referenced as (a), (b), and (c), while fine-print statutory references are labeled (i), (ii), and (iii).

       +-------------------------------------------------------------+
       |                  LEGAL CONTRACT TAXONOMY                    |
       +-------------------------------------------------------------+
              |
              +--> Section I: Definitions (Uppercase Roman)
              |      +--> Clause a: Terms (Lowercase Alpha)
              |      +--> Clause b: Jurisdiction
              |             +--> (i) Federal Court (Lowercase Roman)
              |             +--> (ii) Arbitration
              |
              +--> Section II: Intellectual Property

Furthermore, imagine a long procedure split across two printed pages or interrupted by a full-width diagram. The first page contains steps 1 through 5. The second page must resume seamlessly at Step 6, not restart at Step 1.

The HTML <ol> element provides built-in semantic attributes—type, start, and the list-item-specific value—to handle complex numbering schemes and discontinuous sequences directly in the markup.

Technical Deep Dive & Specifications

The `type` Attribute Values

The type attribute on <ol> defines the numbering format. Under WHATWG specifications, it accepts exactly 5 single-character values:

`type` Value	Numbering Style	Sequence Example	Common Use Case
`1`	Decimal numerals (default)	1, 2, 3, 4, 5...	Standard procedures, step-by-step guides
`a`	Lowercase Latin alphabet	a, b, c, d, e...	Multiple choice options, sub-clauses
`A`	Uppercase Latin alphabet	A, B, C, D, E...	Major document sections, appendices
`i`	Lowercase Roman numerals	i, ii, iii, iv, v...	Preface pagination, statutory footnotes
`I`	Uppercase Roman numerals	I, II, III, IV, V...	Legal articles, legislative acts, movie acts

[!NOTE] While CSS list-style-type can also change visual markers, the HTML type attribute retains semantic meaning when CSS fails to load, in plain-text web scrapers, and in syndicated RSS/Atom feeds.

The `start` Attribute: Integer Offsets

The start attribute defines the ordinal value for the first <li> in the list.

Critical Rule: The start attribute MUST ALWAYS be specified as an integer in decimal format, regardless of the type attribute being used.

<!-- ✅ CORRECT: Starts at 'e' (5th letter) because start is decimal 5 -->
<ol type="a" start="5">
  <li>Item 'e'</li>
  <li>Item 'f'</li>
</ol>

<!-- ✅ CORRECT: Starts at 'V' (5th Roman numeral) -->
<ol type="I" start="5">
  <li>Section V</li>
  <li>Section VI</li>
</ol>

<!-- ❌ INVALID: Browsers will ignore non-integer strings -->
<ol type="a" start="e"> ... </ol>

The `value` Attribute on `<li>`

While start configures the entire <ol>, the value attribute allows an individual <li> to override its own ordinal number and reset the counter progression for all subsequent siblings.

<ol start="1">
  <li>Item 1</li>             --> Ordinal: 1
  <li>Item 2</li>             --> Ordinal: 2
  <li value="10">Item 10</li> --> Overrides counter to 10
  <li>Item 11</li>            --> Automatically increments from 10 to 11
  <li>Item 12</li>            --> Automatically increments to 12
</ol>

[ol start="1"]
  ├── <li> (1)
  ├── <li> (2)
  ├── <li> value="10" (10)  <-- JUMP OVERRIDE
  ├── <li> (11)             <-- Automatic continuation
  └── <li> (12)

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 40: <ol type="I" start="4"> configures uppercase Roman numerals starting at IV (decimal 4).
Lines 41–46: Items render automatically as IV. and V.
Lines 48–50: An <aside> box interrupts the list structure with editorial commentary.
Line 54: <ol type="I" start="6"> creates a second list that cleanly resumes numbering at VI. (decimal 6).
Line 65: <ol type="a"> creates a lowercase alphabetic sub-list rendering as a., b., and c.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Service Level Agreement (SLA) Document</title>
  <style>
    body {
      font-family: Georgia, Cambria, "Times New Roman", Times, serif;
      line-height: 1.7;
      color: #1a1a1a;
      max-width: 680px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    h1 {
      font-size: 1.75rem;
      border-bottom: 2px solid #333;
      padding-bottom: 0.5rem;
    }
    .interruption-box {
      background: #eff6ff;
      border-left: 4px solid #3b82f6;
      padding: 1rem;
      margin: 1.5rem 0;
      font-style: italic;
    }
    ol {
      padding-inline-start: 2rem;
    }
    li {
      margin-bottom: 0.5rem;
    }
  </style>
</head>
<body>

<h1>Master Infrastructure Agreement</h1>

<h2>Article IV: Uptime Commitments</h2>
  
  <ol type="I" start="4">
    <li>
      <strong>Core Service Availability</strong>: Provider guarantees 99.99% monthly availability.
    </li>
    <li>
      <strong>Scheduled Maintenance Windows</strong>: Routine patching restricted to 02:00–04:00 UTC.
    </li>
  </ol>

<aside class="interruption-box">
    <strong>Notice:</strong> Maintenance windows exceeding 120 minutes require 7 days advance written notice.
  </aside>

<h2>Article IV (Continued): Financial Remedies</h2>
  
  <ol type="I" start="6">
    <li>
      <strong>Service Credits</strong>: Downtime exceeding 0.01% generates a 10% credit.
    </li>
    <li>
      <strong>Chronic Outage Termination</strong>: Outages exceeding 4 hours permit immediate termination.
    </li>
  </ol>

<h3>Section 7.1 Multi-Choice Penalty Schedule</h3>
  
  <ol type="a">
    <li>Tier 1 breach: 5% monthly fee credit.</li>
    <li>Tier 2 breach: 15% monthly fee credit.</li>
    <li>Tier 3 breach: 50% monthly fee credit.</li>
  </ol>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

================================================================
Master Infrastructure Agreement
================================================================

Article IV: Uptime Commitments
  IV. Core Service Availability: Provider guarantees 99.99%...
  V.  Scheduled Maintenance Windows: Routine patching...

  [ Notice: Maintenance windows exceeding 120 minutes... ]

Article IV (Continued): Financial Remedies
  VI.  Service Credits: Downtime exceeding 0.01% generates...
  VII. Chronic Outage Termination: Outages exceeding 4 hours...

Section 7.1 Multi-Choice Penalty Schedule
  a. Tier 1 breach: 5% monthly fee credit.
  b. Tier 2 breach: 15% monthly fee credit.
  c. Tier 3 breach: 50% monthly fee credit.

🏋️ Hands-On Exercise

🎯 The Challenge: Split Examination Paper

You are building the online examination interface for a certification test. The exam is divided into two sections by an informational banner.

Section 1: Contains Questions 1 through 3.
An informational banner sits between the sections.
Section 2: Must resume starting at Question 4.
Inside Question 4, there are 3 multiple-choice options labeled (a), (b), and (c).
Question 5 has a jump in grading reference: its sub-clauses must use lowercase Roman numerals (i), (ii), (iii) starting at index (iv) (decimal offset 4).

Instructions:

Structure Section 1 as an <ol>.
Insert the informational banner.
Structure Section 2 as an <ol> with the appropriate start attribute so it begins at Question 4.
Nest the multiple-choice options inside Question 4 using <ol type="a">.
Nest the Roman sub-clauses inside Question 5 using <ol type="i" start="4">.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<main class="exam-paper">
  <h2>Cybersecurity Certification Exam</h2>

  <!-- Part 1: Questions 1 to 3 -->
  <ol>
    <li>Define Public Key Infrastructure (PKI).</li>
    <li>Explain the difference between symmetric and asymmetric encryption.</li>
    <li>What is a replay attack?</li>
  </ol>

  <div class="banner" role="note">
    ⚠️ <strong>SECTION BREAK:</strong> Advanced Cryptanalysis Follows
  </div>

  <!-- Part 2: Resuming at Question 4 -->
  <ol start="4">
    <li>
      Which cipher is vulnerable to length extension attacks?
      <ol type="a">
        <li>SHA-256</li>
        <li>AES-GCM</li>
        <li>ChaCha20</li>
      </ol>
    </li>
    <li>
      Supplementary forensic steps (Refer to Appendix D):
      <ol type="i" start="4">
        <li>Dump volatile memory cache</li>
        <li>Calculate SHA-512 forensic hash</li>
      </ol>
    </li>
  </ol>
</main>

Why this works:

The second <ol start="4"> guarantees seamless numbering continuity across the section banner.
The nested <ol type="a"> automatically outputs a., b., c. without hardcoded letter prefixes.
The nested <ol type="i" start="4"> converts decimal offset 4 into lowercase Roman numeral iv. and automatically increments the next to v..

⚠️ Common Pitfalls

Using Non-Numeric Strings in start: Writing <ol type="a" start="c"> is invalid HTML. The parser ignores "c" and defaults start to 1 (which renders a). Always pass decimal integers: <ol type="a" start="3">.
Using the Obsolete compact or clear Attributes: These HTML4 presentational attributes were deprecated in HTML5. Use CSS for layout spacing.
Using value with Non-Integer Strings: Writing <li value="x"> is invalid. Always supply integers: <li value="24">.

💡 Pro Tips

Negative Start Offsets: The start attribute fully supports zero and negative integers! <ol start="-2"> produces markers: -2., -1., 0., 1., 2.. This is extremely useful in mathematical countdowns, temperature indices, or relative benchmark rankings.
Print Stylesheet Resilience: For generated PDF invoices and paginated print stylesheets (@media print), using <ol start="..."> allows backend reporting tools to split a 1,000-item invoice across 20 distinct printed pages while maintaining exact line-item numbering continuity.

📌 Key Takeaways

The type attribute on <ol> accepts five valid values: '1', 'a', 'A', 'i', and 'I'.
The start attribute MUST always be a decimal integer, even when using alphabetic or Roman numeral types (e.g., start="3" with type="I" yields III).
<ol start="N"> allows ordered lists to resume numbering across intermediate layout breaks, banners, or page splits.
The <li value="N"> attribute can override the counter at any specific item, and subsequent siblings will automatically increment from that new value.
Negative integers and zero are valid values for start and value.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

If you write `<ol type="A" start="4"><li>Alpha</li><li>Beta</li></ol>`, what marker will appear next to "Alpha"?

Topic: HTML Fundamentals

? Question 2 / 3

What will happen if a developer writes `<ol type="i" start="v">` in an HTML5 document?

Topic: HTML Fundamentals

? Question 3 / 3

In the snippet `<ol start="5"><li>A</li><li value="20">B</li><li>C</li></ol>`, what are the rendered numbers for items A, B, and C?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The type Attribute Values

The start Attribute: Integer Offsets

The value Attribute on <li>

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Split Examination Paper

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

If you write <ol type="A" start="4"><li>Alpha</li><li>Beta</li></ol>, what marker will appear next to "Alpha"?

What will happen if a developer writes <ol type="i" start="v"> in an HTML5 document?

In the snippet <ol start="5"><li>A</li><li value="20">B</li><li>C</li></ol>, what are the rendered numbers for items A, B, and C?

The `type` Attribute Values

The `start` Attribute: Integer Offsets

The `value` Attribute on `<li>`

If you write `<ol type="A" start="4"><li>Alpha</li><li>Beta</li></ol>`, what marker will appear next to "Alpha"?

What will happen if a developer writes `<ol type="i" start="v">` in an HTML5 document?

In the snippet `<ol start="5"><li>A</li><li value="20">B</li><li>C</li></ol>`, what are the rendered numbers for items A, B, and C?