Ordered lists (<ol>) html tag
Web text in HTML web pages is created by using ordered list items to create list items of text, information, web digital content, where you display the ordered list items in default sequence order. In HTML web page, any particular web page text is defined in sequence order through <ol> tag, remember, each ordered list item in HTML web page can be created more than once in the list by using <li> tag.
So let’s understand an ordered list item in HTML web pages better.
Basic Structure of an Ordered List in HTML Web Page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Ordered List Tag</title>
</head>
<body>
<p><b>Ordered List Item Element</b></p>
<ol>
<li>Ordered Lits 1</li>
<li>Ordered Lits 2</li>
<li>Ordered Lits 3</li>
<li>Ordered Lits 4</li>
<li>Ordered Lits 5</li>
</ol>
</body>
</html>
Customizing ordered lists in HTML web pages as per need.
You can manually customize HTML text ordered list items using multiple attributes and CSS style properties based on your web development needs.
HTML Ordered List Type Attribute Features.
You can use multiple different types of ol bullet attributes features of <ol> tag to display HTML web page text in list items like numbers, small and capital alphabets, Roman numerals, etc. at the front of ordered list items, depending on your specific web development needs.
Ordered List Type Attribute Features
- 1 – Decimal/Integer number in ordered list. (Default preview).
- A – Uppercase letter ordered list item preview.
- a – Lowercase letter ordered list item preview.
- I – Uppercase Roman numeric ordered list item preview.
- i – Lowercase Roman numeric ordered list item preview.
Example use of multiple start attributes in an HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Ordered List Type Attribute Tag</title>
</head>
<body>
<p><b>Number Ordered List Type</b></p>
<ol type=”1″>
<li>Integer First</li>
<li>Integer Second</li>
<li>Integer Third</li>
<li>Integer Fourth</li>
</ol>
<p><b>Uppercase Alphabet Ordered List Type</b></p>
<ol type=”A”>
<li>Upper Case Alphabet A</li>
<li>Upper Case Alphabet B</li>
<li>Upper Case Alphabet C</li>
<li>Upper Case Alphabet D</li>
</ol>
<p><b>Lowercase Alphabet Ordered List Type</b></p>
<ol type=”a”>
<li>Lower Case Alphabet a</li>
<li>Lower Case Alphabet b</li>
<li>Lower Case Alphabet c</li>
<li>Lower Case Alphabet d</li>
</ol>
<p><b>Upper Case Roman Numeric Ordered List Type</b></p>
<ol type=”I”>
<li>Uppercase Roman Number 1</li>
<li>Uppercase Roman Number 2</li>
<li>Uppercase Roman Number 3</li>
<li>Uppercase Roman Number 4</li>
</ol>
<p><b>Lower Case Roman Numeric Ordered List Type</b></p>
<ol type=”i”>
<li>Lowercase Roman Number 1</li>
<li>Lowercase Roman Number 2</li>
<li>Lowercase Roman Number 3</li>
<li>Lowercase Roman Number 4</li>
</ol>
</body>
</html>
Type Attributes in Ordered List Tag HTML web page provides display choice of multiple text items in text, number, Roman numeric format for particular text item or information in ordered list preview mode. You can use these ordered list items by starting them at the start of the list.
html start attributes example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Ordered List Start Attribute Tag</title>
</head>
<body>
<p><b>Start Ordered List Attributes</b></p>
<ol start=”3″>
<li>Ordered Item</li>
<li>Ordered Item</li>
<li>Ordered Item</li>
<li>Ordered Item</li>
</ol>
<p><b>Start Ordered List Attributes</b></p>
<ol start=”10″>
<li>Ordered Item</li>
<li>Ordered Item</li>
<li>Ordered Item</li>
<li>Ordered Item</li>
</ol>
</body>
</html>
Applying HTML Web Page CSS Styling.
You can preview the list item order in any HTML web page, make the ordered list item default layout responsive, and apply stylesheet effects to the list item attributes as needed or customize them manually.
ordered list item creation example with css.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>html ol list item customize with css</title>
<style>
p{
color:blue;
font-size:1.5em;
font-family:monotype corsiva;
}
ol {
margin: 10px;
padding: 20px;
list-style-type: upper-alpha; /* you can Change list start number style here */
}
ol li {
font-family: Times New Roman;
font-size: 15px;
color: brown;
margin-bottom: 20px; /* you can add Space between list items */
}
</style>
</head>
<body>
<p><b>Customize Html Ol List With Css </b></p>
<ol>
<li>List Element First </li>
<li>List Element Second </li>
<li>List Element Third </li>
<li>List Element Fourth </li>
</ol>
</body>
</html>
HTML ordered list item information.
- <ol> – The ol tag creates an ordered list item in any HTML web page.
- <li> – The li tag is an HTML web page where each list item inside the <ol> tag is written one or more times with a li tag.
- type – The type of the list item customizes the ordered list item numbering style in an HTML web page.
- start – start defines the start list element for list items to be created in an HTML web page, starting from the first element in any list item.
- CSS – CSS allows you to further manually customize the default appearance of numbered lists in an HTML web page, including the list numeric order, web page margins, and font styles of ordered list items to be used.
