Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create an ordered list with list items numbered with lowercase letters in HTML?
An ordered list is a numbered list of items that allows you to control the sequence numbering format. The <ol> tag creates ordered lists in HTML, while the <li> tag defines individual list items. By default, ordered lists use numbers (1, 2, 3...), but you can customize the numbering format using the type attribute.
To create an ordered list with lowercase letters (a, b, c...), use type="a" on the <ol> element. This is particularly useful for sub-lists, legal documents, or any content where alphabetical ordering is preferred over numerical.
Syntax
Following is the syntax to create an ordered list with lowercase letter numbering −
<ol type="a"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
The type="a" attribute specifies that list items should be marked with lowercase letters starting from "a".
Available Type Values
The type attribute accepts the following values for different numbering formats −
type="1"− Default decimal numbers (1, 2, 3...)type="a"− Lowercase letters (a, b, c...)type="A"− Uppercase letters (A, B, C...)type="i"− Lowercase Roman numerals (i, ii, iii...)type="I"− Uppercase Roman numerals (I, II, III...)
Example − Basic Lowercase Letter List
Following example demonstrates creating an ordered list with lowercase letter numbering −
<!DOCTYPE html>
<html>
<head>
<title>Lowercase Letter List</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Team Members</h2>
<ol type="a">
<li>Abdul</li>
<li>Jason</li>
<li>Yadav</li>
<li>Lokesh</li>
</ol>
</body>
</html>
The output displays a list with lowercase letter markers −
Team Members a. Abdul b. Jason c. Yadav d. Lokesh
Example − World Cup Teams List
Following example shows a longer ordered list with lowercase letter numbering −
<!DOCTYPE html>
<html>
<head>
<title>World Cup Teams</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>List of teams for World Cup</h1>
<ol type="a">
<li>India</li>
<li>Australia</li>
<li>South Africa</li>
<li>New Zealand</li>
<li>Pakistan</li>
<li>Sri Lanka</li>
<li>West Indies</li>
<li>Bangladesh</li>
</ol>
</body>
</html>
The output shows eight teams listed with lowercase letters from "a" to "h" −
List of teams for World Cup a. India b. Australia c. South Africa d. New Zealand e. Pakistan f. Sri Lanka g. West Indies h. Bangladesh
Example − Nested Lists with Different Types
Following example demonstrates using different numbering types in nested lists −
<!DOCTYPE html>
<html>
<head>
<title>Nested Lists</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<h2>Course Structure</h2>
<ol>
<li>Frontend Development
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
<li>Backend Development
<ol type="a">
<li>Node.js</li>
<li>Python</li>
<li>Database</li>
</ol>
</li>
</ol>
</body>
</html>
The output shows a main list with numbers and sub-lists with lowercase letters −
Course Structure 1. Frontend Development a. HTML b. CSS c. JavaScript 2. Backend Development a. Node.js b. Python c. Database
Key Points
The
type="a"attribute must be placed on the<ol>element, not on individual<li>elements.Lowercase letter numbering starts from "a" and continues through the alphabet (a, b, c, d...).
After "z", the sequence continues with "aa", "bb", "cc" and so on.
Each nested
<ol>can have its owntypeattribute for different numbering styles.The
startattribute can be used withtype="a"to begin at a different letter (e.g.,start="3"begins at "c").
Browser Compatibility
The type attribute for ordered lists is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the HTML specification since HTML 3.2 and remains valid in HTML5.
Conclusion
Using <ol type="a"> creates ordered lists with lowercase letter numbering (a, b, c...). This formatting is ideal for sub-lists, legal documents, and content requiring alphabetical organization. The type attribute provides flexibility in choosing the most appropriate numbering format for your content structure.
1K+ Views
