|
|
The Definition and UsageThe The <li> tag is used to define each list item. Tip: Use CSS to style lists. Tip: For unordered list, use the <ul> tag. Browser Support
Attributes
Global AttributesThe Event AttributesThe |
How to create HTML <ol> Tag
Here are Two different ordered lists (the first list starts at 1, and the second starts at 50).
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The ol element</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output should be:
How to Set different list types (with CSS):
See the Example and Learn More.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Specify list type with CSS</h1>
<ol style="list-style-type:upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol style="list-style-type:lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output should be:
How to Display all the different list types available with CSS
See the Example and Learn More.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>
</head>
<body>
<h1>All the different list types for ol with CSS</h1>
<ol class="a">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="b">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="c">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="e">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="f">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="g">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="h">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="i">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="j">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="k">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="l">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="m">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="n">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="o">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="p">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="q">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="r">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="s">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Output should be:
How to Reduce and expand line-height in lists (with CSS)
See the Example and Learn More.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Modify lineheight of lists with CSS</h1>
<p>Reduce line height with CSS:</p>
<ol style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>Expand line height with CSS:</p>
<ol style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output should be:
How to Nest an unordered list inside an ordered list
See the Example and Learn more.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>An unordered list inside an ordered list</h1>
<ol>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ol>
</body>
</html>
Output should be:
How to set Default CSS Settings on HTML <ol> Tag
Most browsers will display the <ol> element with the following default values.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
</style>
</head>
<body>
<p>An ol element is displayed like this:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
Output should be:
What is HTML <ol> reversed Attribute
Definition and Usage
The reversed attribute is a boolean attribute.
When present, it specifies that the list order should be descending (9,8,7...), instead of ascending (1, 2, 3...).
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<ol reversed>
How to add HTML <ol> reversed Attribute
Descending list order.
index.html
Example:
HTML
<ol reversed>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Output should be:
What is HTML <ol> start Attribute
Definition and Usage
The start attribute specifies the start value of the first list item in an ordered list.
This value is always an integer, even when the numbering type is letters or romans. E.g., to start counting list items from the letter "c" or the roman number "iii", use start="3".
Browser Support
Syntax
<ol start="number">
Attribute Values
| Value | Description |
|---|---|
| number | Specifies the start value of the first list item in the ordered list |
How to add HTML <ol> start Attribute
An ordered list starting at "50"
index.html
Example:
HTML
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Output should be:
What is HTML <ol> type Attribute
Definition and Usage
The type attribute specifies the kind of marker to use in the list (letters or numbers).
Tip: The CSS list-style-type property offers more types than the type attribute (see example below).
Browser Support
Syntax
<ol type="1|a|A|i|I">
Attribute Values
| Value | Description |
|---|---|
| 1 | Default. Decimal numbers (1, 2, 3, 4) |
| a | Alphabetically ordered list, lowercase (a, b, c, d) |
| A | Alphabetically ordered list, uppercase (A, B, C, D) |
| i | Roman numbers, lowercase (i, ii, iii, iv) |
| I | Roman numbers, uppercase (I, II, III, IV) |
How to add HTML <ol> type Attribute
An ordered list with uppercase roman numbers.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The ol type attribute</h1>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output should be:
How to Display all the different list types available with CSS on HTML <ol> type Attribute
All the different list types for ol with CSS.
index.html
Example:
HTML
<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>
Output should be:
| html ordered list |
Read Full: | HTML Tag |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 6 months ago |
Uploaded by: | Admin |
Views: | 160 |
Reffered: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol