HTML Ordered List | HTML Numbered List
HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. There can be different types of numbered list:
To represent different ordered lists, there are 5 types of attributes in <ol> tag.
Type | Description |
---|---|
Type "1" | This is the default type. In this type, the list items are numbered with numbers. |
Type "I" | In this type, the list items are numbered with upper case roman numbers. |
Type "i" | In this type, the list items are numbered with lower case roman numbers. |
Type "A" | In this type, the list items are numbered with upper case letters. |
Type "a" | In this type, the list items are numbered with lower case letters. |
Example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining type="1" because it is the default type.
<ol>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
Example to display list in roman number uppercase.
<ol type="I">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
Example to display list in roman number uppercase.
<ol type="i">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
Example to display list in roman number uppercase.
<ol type="A">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
Example to display list in roman number uppercase.
<ol type="a">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
The start attribute is used with ol tag to specify from where to start the list items.
<ol type="1" start="5"> : It will show numeric values starting with "5".
<ol type="A" start="5"> : It will show capital alphabets starting with "E".
<ol type="a" start="5"> : It will show lower case alphabets starting with "e".
<ol type="I" start="5"> : It will show Roman upper case value starting with "V".
<ol type="i" start="5"> : It will show Roman lower case value starting with "v".
<ol type="i" start="5">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
Element | Chrome | IE | Firefox | Opera | Safari |
<h1> to <h6> | Yes | Yes | Yes | Yes | Yes |
© 2024 Easy To Learning. All Rights Reserved | Design by Easy To Learning