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>

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

EXCLUSIVE: 50% OFF

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

15% OFF

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

AS LOW AS 14.99$

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