Use ol element to create ordered list
Description
The ol
element denotes an ordered list.
The items in the list are denoted using the li
element.
The reversed
attribute has been added in HTML5.
The compact
attribute is now obsolete in HTML5.
Example
The following code shows the ol
element
being used to create a simple ordered list.
<!DOCTYPE HTML>
<html>
<body>
I like:<!--from ww w. j a v a 2s . c o m-->
<ol>
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
</ol>
</body>
</html>
Attribute
You can control the items in the list using the attributes defined by the ol
element.
The start
attribute defines the ordinal value of the first item in the list.
If this attribute is not defined, the first item is assigned the ordinal value of 1.
You use the type
attribute to indicate
which marker should be displayed next to each item.
The following table shows the supported values for this attribute.
Value | Description | Example |
---|---|---|
1 | Decimal numbers (default) | 1., 2., 3., 4. |
a | Lowercase Latin characters | a., b., c., d. |
A | Uppercase Latin characters | A., B., C., D. |
i | Lowercase Roman characters | i., ii., iii., iv. |
I | Uppercase Roman characters | I., II., III., IV. |
Example 2
The following code shows how to create nested ordered lists.
<html>
<body>
<p>Here is a nested ordered list:</p>
<!--from w w w . j a v a 2s.c o m-->
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four
<ol>
<li>Item 4.1</li>
<li>Item 4.2</li>
<li>Item 4.3</li>
</ol>
</li>
<li>Item Five</li>
</ol>
</body>
</html>
Example 3
The following code shows how to create an ordered list with capital letters and starting at point 4.
<!--from w w w. j a va 2s .c om-->
<html>
<body>
<p>Here is an ordered list using capital letters and starting at point 4, which is a letter D:</p>
<ol type="A" start="4">
<li>Point number one</li>
<li>Point number two</li>
<li>Point number three</li>
</ol>
</body>
</html>