MY CARTOrdered Lists in HTML – Tutorial
Ordered Lists in HTML: Video Lesson
This video lesson, titled “Numbered (Ordered) Lists,” shows you how to create ordered lists in HTML. This video lesson is from our introductory HTML5 and CSS3 course, titled “Mastering HTML5 and CSS3 Made Easy v.1.0.”
Ordered Lists in HTML: Overview
You can insert ordered lists in HTML documents to display organized lists of items that start with a number or letter and continue in sequence. Ordered lists in HTML are generally used to list items by their priority or their sequence in a process. For example, you might use ordered lists in HTML to show instructions about completing a specific task.
When you create ordered lists in HTML, you must use two different tags. First, place the <ol>…</ol> tags around the text you want to become the ordered list. Second, place the <li>…</li> tags around each line item within the list.
You have five choices when creating ordered lists in HTML: upper-case letters (A,B,C), lower-case letters (a,b,c), upper-case Roman numerals (I,II,III), lower-case Roman numerals (i,ii,iii) and Arabic numerals (1,2,3), which are the default. You define the type of ordered list you want by using the TYPE attribute and placing it within the <ol> start tag.
You can also start the ordered sequence at any point in the sequence by using the START attribute. For example, if you wanted to start your list with item D, you would use the attribute start=“D” by placing it within the <ol> start tag.
| Start Tag: | <ol> | |
| End Tag: | </ol> | |
| Attributes: | type=“1” (Default) | List sequence uses 1,2,3, etc. |
| type=“A” (Upper case alphabet) | List sequence uses A,B,C, etc. | |
| type=“a” (Lower case alphabet) | List sequence uses a,b,c, etc. | |
| type=“I” (Upper case Roman numerals) | List sequence uses I,II,III, etc. | |
| type=“i” (Lower case Roman numerals) | List sequence uses i,ii,iii, etc. | |
| start=“?” (Starting value) | Where “?” is the starting value. | |
| Related Tags: | <li>…</li> (Line item) | |
| Example: | My list:<ol type=“A”>
<li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol> |
This tag will cause the items surrounded by the line item tags <li> to be displayed as an ordered list. |
| Result: | My list:
|
Ordered Lists in HTML – Tutorial: A picture of an ordered list in HTML shown in a web browser window.
Ordered Lists in HTML: Instructions
- To create an ordered list in HTML, type the first part of the start tag <ol type= at the point where you want to add an ordered list.
- Type the value for the type of ordered list you want, in quotes. E.g., “1”, “A”, “a”, “I”, “I”.
- Close the tag by typing the > character.
- Press the “Enter” key on your keyboard.
- Type <li>.
- Type the text for the first item in your list.
- Type </li>.
- Repeat steps 4 through 7 for each additional line item to add.
- When done, press the “Enter” key on your keyboard.
- Type </ol>.
