Html list are most commonly used in contents or articles. These are characterized as Unordered lists and ordered lists which work in a same way. Unordered lists proceeded by bullets and ordered lists by sequential lists, which are normally represented by incremental numbers, alphabets.
[html]<ul>
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>[/html]
This will display as:
An Ordered list is represented by <ol> tag containing list of items starting with number one by default. The numbering is incremented by one at each successive ordered list element tag <li> instead of bullets.
[html]
<ol>
<li>milk</li>
<li>coffee</li>
<li>sugar</li>
</ol>
[/html]
This will display as:
Now showing both types of Lists in html page will give same above result.
[html]
<!DOCTYPE html>
<html>
<head>
<title>This web page contains both ordered and unordered list examples</title>
</head>
<body>
<h1>Unordered list examples</h1>
<ul>
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
<h2>Ordered list examples</h2>
<ol>
<li>milk</li>
<li>coffee</li>
<li>sugar</li>
</ol>
</body>
</html>
[/html]
You can specify following unordered list type attributes for <ul> tag which is a disc by default:
[code]
<ul type="square">
<ul type="disc">
<ul type="circle">
[/code]
[html]
<ul type="square">
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
[/html]
Result:
[html]
<ul type="circle">
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
[/html]
Result:
[html]
<ul type="disc">
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
[/html]
Result:
<ol> contains the list of <li> tag ordered list preceded with numbers instead of bullets.
<ol type="1"> - Default-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.
Here are the ordered list examples, to which you can add start attribute and customize the ordered list setting using any start number for the ordered list element.
[html]<h2>Cold Drinks</h2>
<ol>
<li>drink milk</li>
<li>drink coffee</li>
<li>drink juice</li>
</ol>[/html]
HTML Numbered List with Start attribute - 3
[html]<h2>Cold Drinks</h2>
<ol start="3">
<li>cold milk</li>
<li>cold coffee</li>
<li>cold juice</li>
</ol>[/html]
More about these start attributes in this video
Description lists are list of names, terms, description by using tags elements <dl>, <dt>, <dd>.
<dl> tag from start defines list of elements containing a names, description elements.
<dt> tag element defines the title or definition of items.
<dd> tag is used for description for terms and names.
[html]
<dl>
<dt>Tiger</dt>
<dd>- king of jungle</dd>
<dt>Lemon juice</dt>
<dd>- citric acid, which gives a sour taste</dd>
</dl>
[/html]
HTML Unordered Lists
Unordered list is represented by <ul> tag containing list items marked with bullets by typically small black circles by default as shown in code.[html]<ul>
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>[/html]
This will display as:
- apple
- orange
- tea
HTML Ordered Lists
An Ordered list is represented by <ol> tag containing list of items starting with number one by default. The numbering is incremented by one at each successive ordered list element tag <li> instead of bullets.
[html]
<ol>
<li>milk</li>
<li>coffee</li>
<li>sugar</li>
</ol>
[/html]
This will display as:
- milk
- coffee
- sugar
Now showing both types of Lists in html page will give same above result.
[html]
<!DOCTYPE html>
<html>
<head>
<title>This web page contains both ordered and unordered list examples</title>
</head>
<body>
<h1>Unordered list examples</h1>
<ul>
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
<h2>Ordered list examples</h2>
<ol>
<li>milk</li>
<li>coffee</li>
<li>sugar</li>
</ol>
</body>
</html>
[/html]
HTML Unordered List Attributes
You can specify following unordered list type attributes for <ul> tag which is a disc by default:
[code]
<ul type="square">
<ul type="disc">
<ul type="circle">
[/code]
[html]
<ul type="square">
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
[/html]
Result:
- apple
- orange
- tea
[html]
<ul type="circle">
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
[/html]
Result:
- apple
- orange
- tea
[html]
<ul type="disc">
<li>apple</li>
<li>orange</li>
<li>tea</li>
</ul>
[/html]
Result:
- apple
- orange
- tea
HTML Ordered Lists Attributes
You can specify following ordered list type attributes for <ol> tag which is a number by default.<ol> contains the list of <li> tag ordered list preceded with numbers instead of bullets.
<ol type="1"> - Default-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.
Examples of html ordered List types
| type= "1" | type= "I" | type= "i" | type= "a" | type= "A" |
|
|
|
|
|
Here are the ordered list examples, to which you can add start attribute and customize the ordered list setting using any start number for the ordered list element.
[html]<h2>Cold Drinks</h2>
<ol>
<li>drink milk</li>
<li>drink coffee</li>
<li>drink juice</li>
</ol>[/html]
Cold Drinks
- cold milk
- cold coffee
- cold juice
HTML Numbered List with Start attribute - 3
[html]<h2>Cold Drinks</h2>
<ol start="3">
<li>cold milk</li>
<li>cold coffee</li>
<li>cold juice</li>
</ol>[/html]
Cold Drinks
- cold milk
- cold coffee
- cold juice
More about these start attributes in this video
HTML Description Lists
Description lists are list of names, terms, description by using tags elements <dl>, <dt>, <dd>.
<dl> tag from start defines list of elements containing a names, description elements.
<dt> tag element defines the title or definition of items.
<dd> tag is used for description for terms and names.
[html]
<dl>
<dt>Tiger</dt>
<dd>- king of jungle</dd>
<dt>Lemon juice</dt>
<dd>- citric acid, which gives a sour taste</dd>
</dl>
[/html]
- Tiger
- - king of jungle
- Lemon juice
- - citric acid, which gives a sour taste
No comments:
Post a Comment