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>

Click to view the demo

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.

ValueDescriptionExample
1Decimal numbers (default)1., 2., 3., 4.
aLowercase Latin charactersa., b., c., d.
AUppercase Latin charactersA., B., C., D.
iLowercase Roman charactersi., ii., iii., iv.
IUppercase Roman charactersI., 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>

Click to view the demo

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>

Click to view the demo





















Home »
  HTML CSS »
    HTML »




HTML Introduction
HTML Document
HTML Section
HTML Group Content
HTML Text Marker
HTML Table
HTML Form
HTML Embed