The <ol> element creates an ordered list: a vertical collection of items whose sequence matters. Browsers usually place a number before each item, making it a good fit for instructions, rankings, and other content that readers should follow in order. The name ol is short for “ordered list.” section 9.3 section 9.7
Put each entry inside an <li> element, short for “list item.” A basic ordered list starts numbering at 1 automatically. The HTML tags provide the structure; the text between each opening and closing <li> tag is the visible item. section 9.3
A simple ordered list
Use this structure for a sequence of steps or ranked items: <ol> <li>Inflatable Dartboard</li> <li>Water-Resistant Sponge</li> <li>Helium-Filled Paperweight</li> </ol> The browser displays the three items as 1, 2, and 3. When asking ChatGPT to generate the list, provide the items clearly; dash-prefixed lines, plus signs, asterisks, or numbered Markdown lines can identify them as list entries. section 9.3
Choose an ordered list when changing the item order would change the meaning. Recipe directions should begin with the first step and continue to the last; a top-10 ranking commonly counts down from 10 to 1. Use a bulleted list instead when the order is not essential. section 9.3 section 9.7
Ordered lists can be customized for sequences that do not begin at 1. A reversed list suits a countdown ranking. A list can also begin at a chosen number, which helps when showing part of a larger numbered document or continuing steps after intervening text. section 9.3.1 section 9.3.2
A list inside another list is nested. Nested numbered lists are useful when a main recipe step needs its own smaller sequence. CSS can change a nested ol element’s list-style-type; for example, lower-alpha uses lowercase letters rather than the default numeric markers. section 9.4 section 9.6
<ol>
<li>Inflatable Dartboard</li>
<li>Water-Resistant Sponge</li>
<li>Helium-Filled Paperweight</li>
<li>Teflon Bath Mat</li>
<li>Flame-Retardant Firewood</li>
</ol>
Inspect the generated HTML to see how one <ol> wrapper contains several <li> items. section 9.3
In a recipe page, use bulleted lists for ingredient groups and an ordered list for the preparation steps. Keep the <li> and </li> tags around each item when editing its wording, so the browser continues to recognize it as part of the list. section 9.1 section 9.6
