HTML Ordered List

HTML Ordered List: Main Tips

• Using <ol> tags, you can create HTML ordered lists of items.
• The <li> elements that are descendants of <ol> define list items.
• To create unordered lists, use <ul> tag.
• HTML ol tag supports all global attributes.

Using ol Tags

By using HTML ol tags in a document, you can create HTML numbered lists:

<ol>
  <li>Action</li>
  <li>Adventure</li>
  <li>Thriller</li>
  <li>Comedy</li>
</ol>

HTML ordered lists can also be nested:

<ol>
<li>Coffee</li>
<li>Breakfast
<ol>
  <li>Eggs</li>
  <li>Bacon</li>
  <li>Toast</li>
</ol>
</li>
<li>Cake</li>
</ol>

Theory is great, but we recommend digging deeper!

Learn HTML5 and CSS3 to Build a HTML5 Website from Scratch

Stone River eLearning

4.3 (674)

Mostly Used ol Tag Attributes

The type attribute defines the type of numbering to use:

<ol type="I">
  <li>Burger</li>
  <li>Pizza</li>
  <li>Sandwich</li>
</ol>

HTML numbered list starts from number 1 by default. To change that, you can use the start attribute. It defines a start value for numbering the HTML ordered list. start should always be defined in a number, no matter the chosen numbering type:

<ol start="11">
  <li>Eleven</li>
  <li>Twelve</li>
  <li>Thirteen</li>
</ol>

Note: both start and type have been deprecated in HTML4 and reintroduced again in HTML5.

Newly introduced in HTML5, the reversed attribute sets the ordering of the list to descending:

<ol reversed>
  <li>Apple</li>
  <li>Orange</li>
  <li>Mango</li>
</ol>

compact rendered the list in a compact style. However, it has been deprecated in HTML5 and should not be used:

<ol compact>
  <li>Action</li>
  <li>Adventure</li>
  <li>Thriller</li>
</ol>

Tip: instead of compact, use CSS line-height property. A value of 80% will give a very similar effect.

Browser support

Chrome

All

Edge

All

Firefox

1+

IE

All

Opera

All

Safari

All

Mobile browser support

Chrome

All

Firefox

4+

Opera

All

Safari

All