You can use the HTML ol tag to make a list with a sequential series in an ordered format. Whenever you want to define a list in a serial order instead of just bullet pointers, the ordered list in HTML serves the purpose.
The ol tags in HTML are flexible enough to allow you different formats of ordering, including numbered, lettered. and Roman numbers. You can also set up a custom starting point using attributes in the HTML ol tag. Here, we will learn about the HTML ol tag along with its attributes, syntax, examples, and uses.
The HTML Ol Tag
The HTML ol tag is used to arrange a list of related items in a specific sequence. It is defined using the <ol> element and presents an ordered list of items. They are arranged in sequence using numbers or letters.
Unlike <ul> tags, where ordering is not important, ol tags in HTML prioritize arranging items in sequence or a particular serial order.
HTML Ol Tag: Key Takeaways
- The ol tag in HTML tells the browser that the following group of items is are list arranged in a sequential order.
- The ol tag supports attributes like type, start, reversed, and more, ensuring customization and flexibility.
- The ol tag in HTML is defined using the <ol> element.
- The ordered list begins with the <ol> tag
- The </ol> tag marks the closing of the <ol> tag
- The HTML ol tag is supported on all major browsers, including Chrome, Safari, Bing, Firefox, Opera, and more.
Read More: What Is Semantic HTML? Importance, Examples, and Best Practices
The HTML OL Tag Syntax
The HTML ol tag can be defined using the simple <ol> tag. Check the syntax of ol tags in HTML below.
| <ol>
<li> list item 1</li> <li> list item 1</li> <li> list item 1</li> </ol> |
Output
 |
- The <ol> tag in the beginning is used to define the ordered list in HTML.
- The <li>…</li> tag is used to enclose the related terms within the ordered list
- The </ol> tag at the end is used to define the closure of the ordered list.
Read More: HTML Ordered Lists: A Complete Tutorial For Beginners
When To Use the HTML OL Tag?
You can use the HTML OL tag when you need your lists to be arranged in a specific order or sequence. Unlike unordered lists or <ul> tags in HTML, which arrange lists using simple bullet pointers, ordered lists in HTML arrange them in a specific order, i.e., either in numbered format, letter format, or Roman Number format.
- When you need to deliver “step-by-step instructions” that your viewers or users might follow.
- It is generally used when rankings, positions, or priorities of certain terms or things are important.
- When you are describing a lifecycle or a number of tasks, you can use the HTML ol tag.
- The HTML ol tag can also be used to describe a recipe, ordered procedure, or more.
The Attributes of OL Tags In HTML
Check the major attributes that can be used with the ol tags in HTML below.
| Attribute | Description |
| type | This attribute in the HTML ol tag is used to specify the type of numbering in an ordered list.
|
| start | The start attribute is used to specify the starting value of the ordered list item. By default, the starting point is “1”, but you can implement your own starting point from where the ordered list begins.
For example, start=”5″ begins the list numbering from 5. |
| reversed | By using the reversed attribute with the HTML ol tag, you can arrange your ordered list in descending order. |
| class | This is a global attribute that can be used along with the HTML ol tags to specify one or more class names for the <ol> element, generally used for CSS styling. |
| id | The id element is used to enclose a unique identifier for the <ol> element. |
| style | You can use the <style> attribute with the HTML ol tag to implement inline CSS styling for the ordered list. |
1. Example of type Attribute
Check the following example, where we are specifying the format of an ordered list in uppercase letters.
| <ol type=”A”>
<li>Data Science</li> <li>Web Development</li> <li>Java Programming</li> </ol> |
Output
 |
We can just change the value inside the type attribute to “1”, “a”, “I”, or “i” to specify other listing formats with the HTML ol tag.
2. Example of start Attribute
The start attribute can be used to specify any preferred starting point of the HTML ordered list.
| <ol start=”10″>
<li>Full Stack Development</li> <li>Data Science With Cloud Computing</li> <li>Digital Marketing with AI</li> <li>Artificial Intelligence and Machine Learning </li> </ol> |
Output
 |
3. Example of reversed Attribute
| <ol reversed>
<li>Full Stack Development</li> <li>Data Analytics</li> <li>Cyber Security</li> <li>UI/UX Design</li> </ol> |
Output
 |
4. Example of class Attribute
| <ol class=”course-list”>
<li>Python</li> <li>Machine Learning</li> </ol> |
Output
 |
This “class = course-list” can be used to bind some custom CSS styling with the ordered lists in HTML.
Customising the Marker Type In HTML OL Tags
You can easily change the types of markers used in your HTML ordered lists, given below.
- You have to use the type attribute to change the default numbering type of HTML ol tags.
- You can change the default numbering to either uppercase or lowercase letters. For uppercase letters, you have to use “type=A” and for lowercase you have to use “type=a”
- You can also change the ordered lists to Roman numbers in either uppercase or lowercase formats. For uppercase Roman numbers, you only have to keep the value to “type= I”, and for lowercase, you have to keep the value “type= i”
Let us take an example where we are creating an ordered list with Roman numbers representation of the marker.
| <ol type=”I”>
<li>Full stack Development</li> <li>Data Science and Artificial Intelligence</li> <li>Digital Marketing</li> <li>Data Analytics</li> </ol> |
Output
 |
HTML ol Tag Examples
Let us check some of the major examples of OL tags in HTML, which can be used when sequence matters.
1. Enroll In PW Skills Program
A simple example of the HTML ol tag, where we are providing our aspirants or learners a step-by-step guidance on how to enroll in any of our online programs on PW Skills.
| <h3>Steps to Enroll in a PW Skills Course</h3>
<ol> <li>Visit the PW Skills official website.</li> <li>Choose your desired course (e.g., Data Science).</li> <li>Click on “Enroll Now”.</li> <li>Complete the payment process.</li> <li>Start learning through your dashboard!</li> </ol> |
Output
 |
2. Morning Routine using Ordered Lists
The steps in your morning routine are very important as doing dinner in the afternoon i,.e, during lunch time, doesn’t sound appropriate or logical. Hence, a serial order guiding the complete morning routine is important.
| <h3>My Morning Routine</h3>
<ol> <li>Wake up at 6:00 AM</li> <li>Brush my teeth</li> <li>Do yoga and exercise</li> <li>Take a shower</li> <li>Have breakfast</li> </ol> |
Output
 |
3. Steps to Create a New React Application Using Terminal
You can make a step-by-step guide list using an ordered list to create a React app.
| <h3>Steps to Create a New React App</h3>
<ol> <li>Open the terminal</li> <li>Run the command: npx create-react-app my-app</li> <li>Navigate to the project folder</li> <li>Start the development server using npm start</li> </ol> |
Output
 |
Learn Full Stack Web Development With PW Skills
Start making your shining career in Full Stack Web Development with in-depth learning and hands on experience in PW Skills Full Stack Web Development Course. This course will help you learn industry technologies, real world applications, hands on experience, and more to become a full stack web developer.
Learn in-depth concepts of frontend development, backend development, and more. Get complete doubt support with SME sessions. Get career guidance and interview preparation from our dedicated mentors. After you complete the course you will get a certificate of completion from PW Skills. Enhance your portfolio and become job ready with pwskills.com
Perks of Full Stack Development Course
- You will learn how to build a strong job portfolio with in demand skills and experiences in web development.
- Learn from industry led live sessions every weekend including pre-recorded modules.
- Get a complete career assistance with opportunities and a platform to showcase your knowledge and experience.
- Master Frontend frameworks, backend frameworks, full stack web development along with real time coding practice sheets, module assignments and more.
- Build a strong concept using practice exercises and module level assignments within this course.
- Get industry recognised certificates from PW Skills and discover a wide range of opportunities in the design field.
- Get a complete hands on training with our real world capstone projects within this course.
HTML ol Tag FAQs
Q1. Is Visual Studio Code free?
Ans: Yes, VS Code is completely free and open-source. You can simply follow the guide on how to install VS Code and complete the installation process to access it for free.
Q2. Is it possible to use VS Code without the internet?
Ans: Yes, after installing VS Code, you can access it offline too. However, a stable internet connection is needed to download extensions and make updates.
Q3. VS Code works on which Windows: 10 or 11?
Ans: Visual Code Studio works well on both Windows 10 and Windows 11.
Q4. What are the system requirements for installing VS Code?
Ans: Your system must fulfill the following requirements to install VS Code.
Operating system: Windows 8, 10, or 11
RAM: Minimum 2 GB (however, 4 GB is recommended)
Storage: At least 200 MB for installation
