The HTML ol tag for ordered list that we learnt in the previous article renders in web browser according to its start and type attribute. You can also used nested HTML ol tags to display the nested ordered lists in HTML document. You can use different values for type attribute to differentiate the numbering of parent ordered list and nested ordered list. To create tree structure of nested ordered lists you have to place the HTML <ol> and </ol> tag inside the HTML li tag of parent ol tag.
Code Example 1:
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
Code Example 2:
<ol type="1">
1. list item 1
2. list item 2
3. list item 3
Code Example 3 for HTML ordered list using start attribute:
<ol start="5" type="1">
Output:
5. list item 1
6. list item 2
7. list item 3
In the Example 3 above, list numbers start from 5 coz start attribute has value set as 5.
Code Example 4 for HTML ordered list starting with letters
1. Lowercase letters
<ol type="a">
<li>list item a</li>
<li>list item b</li>
<li>list item c</li>
Output for HTML ordered list starting with lowercase letters
a. list item a
b. list item b
c. list item c
2. Uppercase Letters
<ol type="A">
<li>list item A</li>
<li>list item B</li>
<li>list item C</li>
Output for HTML ordered list starting with uppercase letters
A. list item A
B. list item B
C. list item C
Code Example 5 for HTML ordered list starting with Roman numerals
1. Lowercase Roman numerals
<ol type="i">
<li>list item i</li>
<li>list item ii</li>
<li>list item iii</li>
<li>list item iv</li>
Output for HTML ordered list starting with lowercase Roman numerals
i. list item i
ii. list item ii
iii. list item iii
iv. list item iv
2. Uppercase Roman numerals
<ol type="I">
<li>list item I</li>
<li>list item II</li>
<li>list item III</li>
<li>list item IV</li>
Output for HTML ordered list starting with uppercase Roman numerals
I. list item I
II. list item II
III. list item III
IV. list item IV
Code Example for HTML ol tag using start and type attribute
<ol start="5" type="i">
<li>list item 4</li>
v. list item 1
vi. list item 2
vii. list item 3
viii. list item 4
HTML code for ol tag with type="a"
<ol start="5" type="a">
e. list item 1
f. list item 2
g. list item 3
h. list item 4
Be the first to rate this post
Tags: html, html ol tag, html ordered list, html ordered list starting with letter, html ol tag start attribute, html ol tag type attribute, html tutorials, html code for ordered list tag, html code for ol tag
10/11/2008 3:37:11 AM
