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 uppercase letters in HTML?
A list is a collection of related items displayed consecutively, usually one below the other. HTML provides two main types of lists: unordered lists and ordered lists.
An ordered list displays items in a numbered sequence by default. You can create an ordered list using the <ol> tag and define individual list items using the <li> tag.
HTML supports 5 different types of ordered list numbering −
type="1" − Creates a numbered list starting from 1 (default)
type="A" − Creates a list numbered with uppercase letters starting from A
type="a" − Creates a list numbered with lowercase letters starting from a
type="I" − Creates a list numbered with uppercase Roman numerals starting from I
type="i" − Creates a list numbered with lowercase Roman numerals starting from i
Syntax
Following is the syntax to create an ordered list with items numbered using uppercase letters −
<ol type="A"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
The type="A" attribute specifies that the list items should be numbered with uppercase letters (A, B, C, D, etc.).
Basic Example with Uppercase Letters
Following example demonstrates creating an ordered list with uppercase letter numbering −
<!DOCTYPE html>
<html>
<head>
<title>Ordered List with Uppercase Letters</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Students List</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 uppercase letter numbering −
Students List A. Abdul B. Jason C. Yadav D. Lokesh
Practical Example with World Cup Teams
Following example shows a more comprehensive ordered list using uppercase letters for World Cup teams −
<!DOCTYPE html>
<html>
<head>
<title>World Cup Teams</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<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 the teams labeled with uppercase letters A through 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
Comparison of Different List Types
Following example demonstrates all five types of ordered lists for comparison −
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Types Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Numbers (type="1")</h2>
<ol type="1">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Uppercase Letters (type="A")</h2>
<ol type="A">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Lowercase Letters (type="a")</h2>
<ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Uppercase Roman (type="I")</h2>
<ol type="I">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Lowercase Roman (type="i")</h2>
<ol type="i">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
The output shows all five different numbering styles side by side −
Numbers (type="1") 1. First item 2. Second item 3. Third item Uppercase Letters (type="A") A. First item B. Second item C. Third item Lowercase Letters (type="a") a. First item b. Second item c. Third item Uppercase Roman (type="I") I. First item II. Second item III. Third item Lowercase Roman (type="i") i. First item ii. Second item iii. Third item
Key Points
When creating ordered lists with uppercase letters in HTML, keep these important points in mind −
The
type="A"attribute must be placed in the opening<ol>tagUppercase letter numbering continues alphabetically: A, B, C, D... Z, AA, BB, CC, etc.
The
typeattribute is case-sensitive:"A"produces uppercase letters while"a"produces lowercase lettersYou can combine the
typeattribute with thestartattribute to begin numbering from a specific letter
Conclusion
Creating an ordered list with uppercase letter numbering in HTML is accomplished using the <ol type="A"> tag. This provides an organized way to display sequential items labeled with uppercase letters (A, B, C, etc.) instead of the default numeric numbering. The type attribute offers five different numbering styles to suit various documentation and presentation needs.
10K+ Views
