|
Definition and UsageThe The In <ul> and <menu>, the list items will usually be displayed with bullet points. In <ol>, the list items will usually be displayed with numbers or letters. Browser Support
|
How to create HTML <li> Tag
Example of The ol and ul elements.
index.html
Example:
HTML
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>The ul element defines an unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Output should be:
How to create HTML <li> value Attribute
Use of the value attribute in an ordered list.
Definition and Usage
The value attribute sets the value of a list item. The following list items will increment from that number.
The value must be a number and can only be used in ordered lists (<ol>).
Browser Support
Syntax
<li value="number">
Attribute Values
| Value | Description |
|---|---|
| number | Specifies the value of the list item |
index.html
Example:
HTML
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Output should be:
How to Use of the value attribute in an ordered list
Use of the value attribute in an ordered list.
index.html
Example:
HTML
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Output should be:
How to Set different list style types (with CSS)
Define list type with CSS
index.html
Example:
HTML
<ol>
<li>Coffee</li>
<li style="list-style-type:lower-alpha">Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>
Output should be:
How to Create a list inside a list (a nested list)
A list inside another list.
index.html
Example:
HTML
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Output should be:
How to Create a more complex nested list
A list in a list in a list.
index.html
Example:
HTML
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
Output should be:
How to set Default CSS Settings of <li> element
Most browsers will display the <li> element with the following default values.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<style>
li {
display: list-item;
}
</style>
<h1>The ol and ul elements</h1>
<p>The ol element defines an ordered list:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>The ul element defines an unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output should be:
| How to create HTML <li> Tag | HTML Tag |
| How to create HTML <li> value Attribute | HTML Tag |
| How to Use of the value attribute in an ordered list | HTML Tag |
| How to Set different list style types (with CSS) | HTML Tag |
| How to Create a list inside a list (a nested list) | HTML Tag |
| How to Create a more complex nested list | HTML Tag |
| How to set Default CSS Settings of <li> element | HTML Tag |
Read Full:: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 3 months ago |
Uploaded by: | Admin |
Views: | 1 |
Ref on: | View |