- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <ol> Tag
The <ol> HTML tag defines the Ordered list. It can be numerical, alphabetical, or Roman numerals. It represents an ordered list of items. The default order of the ordered list is numerical.
Following are the global attributes that you can use within the <ol> tag to represent the list of items you like −
- <reversed> − It is a Boolean attribute that specifies that the list's items are in reverse order.
- <start> − It is an integer to start counting from for the list of items.
- <type> − Using this attribute you can set the numbering type.
The type attribute has various numbering formats as follows −
- type ='a' − for lowercase letters.
- type ='A' − for uppercase letters.
- type ='i' − for lowercase roaman numerals.
- type ='I' − for uppercase roman numerals.
- type ='1' − for numbers(it is the default numbering type).
The <ul> and <ol> tags both represent the list of items. The difference is with the <ol> tag, the order is meaningful, whereas the order of the <ul> tag is meaningless.
Syntax
Following is the syntax of the <ol> tag −
<ol>.....</ol>
Example
In the following example, we are creating an ordered list to display the related list of items.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered lists</title> </head> <body> <!--create an ordered list--> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> </body> </html>
When we run the above code, it will generate an output consisting of the list items displayed on the webpage.
Example
Following is another example of the ordered list. Here, we are using the start attribute within the <ol> tag to display the list of items that started the counting number from 10.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered lists</title> </head> <body> <!--create an ordered list--> <ol start=10> <li>Neha</li> <li>Suresh</li> <li>Ramesh</li> <li>Vivek</li> </ol> </body> </html>
On running the above code, the output window will pop up, consisting of list items starting from number 10 displayed on the webpage.
Example
In this example, we are using the type attribute within the <ol> tag to sets the numbering type of the list of items in uppercase and lowercase letters format.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered lists</title> </head> <body> <!--create an ordered list--> <!--type = 'a'--> <ol type='a'> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ol> <!--type = 'A'--> <ol type='A'> <li>Red</li> <li>Black</li> <li>Blue</li> </ol> </body> </html>
When we run the above code, it will generate an output displaying the list items in the lowercase and uppercase letters format on the webpage.
Example
In this program, we are using the type attribute within the <ol> and giving the value type as āIā and āiā to display the list of items in the lowercase and uppercase Roman numerals format.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered lists</title> </head> <body> <!--create an ordered list--> <!--type = 'i'--> <ol type='i'> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <!--type = 'I'--> <ol type='I'> <li>Java</li> <li>PHP</li> <li>Python</li> </ol> </body> </html>
On running the above code, it will generate an output displaying the list items in the uppercase and lowercase roman numerals format on the webpage.
Example
In the following example, we are creating the nested ordered list to display the related items of the ordered list.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered lists</title> </head> <body> <!--create a nested ordered list--> <ol start=10> <li>Uppercase letters numbering type</li> <ol type='A'> <li>Mango</li> <li>Apple</li> </ol> <li>Lowercase letters numbering type</li> <ol type='a'> <li>Red</li> <li>Blue</li> </ol> <li>Lowercase roman numerals type</li> <ol type='i'> <li>HTML</li> <li>CSS</li> </ol> <li>Uppercase roman numerals type</li> <ol type='I'> <li>Java</li> <li>C++</li> </ol> </ol> </body> </html>
When we run the above code, it will generate an output displaying the nested list items on the webpage.
To Continue Learning Please Login
Login with Google