How to create an ordered list in HTML

What is an HTML ordered List?

In HTML, an ordered list is used to display a list of items as a list in a webpage with particular order or sequence.

HTML <ol> (ordered list) element is used to create an ordered list in a webpage.

<ol> is the container element for the ordered list items.

<li> (list item) element is used to represent each individual item within <ol> element.

Example of Creating HTML Ordered List

Create an HTML ordered list element <ol></ol>.

Add 5 list item elements (<li> </li>) between <ol> and </ol> tags.

Add the text- Python, C#, Java, HTML, and CSS to the 5 list item elements respectively as shown in the following example:

Add type attribute with '1' value (type="1") inside the opening tag of the ol element to add numerical order to the list elements.

Example of Ordered List


Output of the above example

An ordered list with type 1.

  1. Python
  2. C#
  3. Java
  4. HTML
  5. CSS

Add type attribute with 'a' value (type="a") inside the opening of the ol element to add alphabetical order to the list elements.

Other types are are A, i and I. Have a closer look at the output of the example.

Example of Ordered List With Type Attribute


Output of the above example

An ordered list with type a.

  1. Python
  2. C#
  3. Java
  4. HTML
  5. CSS

Live Code Playground

In the following HTML code editor, you can practice the above code by creating more new HTML ordered list with your preferred items and types. Click on the 'Run Code' button to render the code; the rendered page will be displayed in the following HTML Code Output frame. Practice until you become comfortable and proficient with your code.

HTML logo HTML Online Editor
HTML Code Output