Ordered Lists in HTML

Why should we standardize ordered lists?

  • Standardize the way lists are displayed across your OER
  • Necessary for screenreaders to effectively navigate content that is presented in lists

Video Demonstration

Watch Ordered Lists on Screencast-o-Matic (4 mins)


Video source: “Ordered Lists” by Jen Booth, is licensed under CC BY-NC 4.0 , except where otherwise noted.

Process for Adding/Correcting Ordered Lists

Steps, timestamp in video explanation, Pressbooks editor required and related code snippet/sample
Step
 Description Time stamp
 Editor Code snippet
1 Review your page and identify lists that are not tagged as lists 0:41 Visual/Browser
2 Use the Numbered List & Increase indent tools to set the structure of your list 1:05 Visual 
<ol>
<li>
3 Highlight the list item you need to change and switch to text/HTML view 2:19 HTML
4 Add ordered list tagging as needed 2:49 HTML 
<ol type="a">

<ol start="5">
5 Save & preview to check. 4:04 Browser

Ordered List Tags:

  • a, A, i, I – use tagging: <ol type=”a”> and substitute in the style of letters/numbers you’d like
  • start at a different number – use tagging: <ol start=”4″> and substitute the number you want to start at.
  • Make the list display in columns (eg: to make better use of space in footnote), use <ol class=”threecolumn”>

The Finished Product

The foods I like

  1. Fruit
    1. apples
    2. oranges
    3. peaches
    4. strawberries
  2. Baked Foods
    1. bagels
    2. poppyseed
    3. everything
    4. cookies
    5. granola bars

Resources

Attribution & References

Except where otherwise noted, “Ordered Lists” by Jen Booth is licensed under CC BY-NC 4.0.

License

Icon for the Creative Commons Attribution-NonCommercial 4.0 International License

GC Library OER Design Studio - Training - Work-in-Progress Copyright © by Jen Booth is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License, except where otherwise noted.

Share This Book