🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

HTML Ordered List

Reading time 2 min
Published Jun 29, 2017
Updated Oct 2, 2019

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:

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

HTML ordered lists can also be nested:

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

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Mostly Used ol Tag Attributes

The type attribute defines the type of numbering to use:

Value Description
1 Numbers (default value)
I Uppercase Roman numerals
i Lowercase Roman numerals
A Uppercase letters
a Lowercase letters
Example
<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:

Example
<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:

Example
<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:

Example
<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

Browser image
Chrome
All
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All