Table of Contents
Ordered List
1. Ordered list start with <ol> tag and ends with </ol>.
2. All the items in this list are enclosed in <li> and </li> tags.
3. By default items in this list will get numbers as a markers.
4. We can change markers using attributes.
Unordered List
Unordered list start with <ul> tag and ends with </ul>.
All the items in this list are enclosed in <li> and </li> tags.
By default items in this list will get filled circle as a bullets.
We can change bullets using attributes.
Description List
It is a list of some phrase(term) and description of the phrase.
It has 3 tags
<dl> — For Creating list
<dt> — For Term
<dd> — For Description
Ordered List with its attributes
By default ordered list will mark each item with number. We can change this mark by using “type” attribute.
type tag has following values.
type = “a”
type = “A”
type = “i”
type = “I”
type = “1” (default)
type = “A”
If we want our list to mark with Upper case alphabets e.g. “A”.
we have to set “a” as value for “type” attribute in <ol> tag.
<!– Code :
<ol type=”A” >
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ol>
–>
- Python
- C
- Java
- C++
type = “i”
If we want our list to mark with lower case Roman number e.g. “i”.
we have to set “i” as value for “type” attribute in <ol> tag.
low
<!– Code :
<ol type=”i” >
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ol>
–>
- Python
- C
- Java
- C++
type = “I”
If we want our list to mark with Capital Roman number e.g. “I”.
we have to set “I” as value for “type” attribute in
tag.
<!– Code :
<ol type=”I” >
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ol>
–>
- Python
- C
- Java
- C++
Start Attribute : We can also set start mark from which we have to start our list. We have to use “start” attribute for it as shown bellow.
<!– Code :
<ol type=”1″ start=”4″>
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ol>
–>
- Python
- C
- Java
- C++
Reversed Attribute : We can display list in reverse order or descending order for this we have to add “reversed” attribute.
<!– Code :
<ol type=”1″ reversed>
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ol>
–>
- Python
- C
- Java
- C++
Unordered List with its attributes
Type attribute : If we want to change default bullet marker with other shapes like : square, disc and circle.
By default disc is set as a marker in unorder list.
Then we have to use “type” attribute, following are the values for “type” attribute.
type = “square”
type = “circle”
type = “disc”
type =”none”
type = “square”
If we want our list to mark with square bullets then we have to set “square” as value for “type” attribute in <ul> tag.
<!– Code :
<ul type=”square” >
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ul>
–>
type = “circle”
If we want our list to mark with circle bullets then we have to set “circle” as value for “type” attribute in <ul> tag.
<!– Code :
<ul type=”circle” >
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ul>
–>
type = “disc”
If we want our list to mark with disc bullets then we have to set “disc” as value for “type” attribute in <ul> tag.
<!– Code :
<ul type=”disc” >
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ul>
–>
type = “none”
If we don’t want any mark as bullets then we have to set “none” as value for “type” attribute in <ul> tag.
<!– Code :
<ul type=”disc” >
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ul>
–>
Style Attribute : We can also change bullets using “style” attribute. We can set following values in “style” attribute:
style=”list-style-type:disc;”
style=”list-style-type:square;”
style=”list-style-type:circle;”
style=”list-style-type:none;”
style=”list-style-type:disc;”
If we want our list to mark with disc bullets then we have to set “list-style-type:disc;” as value for “style” attribute in <ul> tag.
<!– Code :
<ul style=”list-style-type:disc;” >
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ul>
–>
style=”list-style-type:square;”
If we want our list to mark with square bullets then we have to set “list-style-type:square;” as value for “style” attribute in <ul> tag.
<!– Code :
<ul style=”list-style-type:square;” >
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ul>
–>
style=”list-style-type:circle;”
If we want our list to mark with circle bullets then we have to set “list-style-type:circle;” as value for “style” attribute in <ul> tag.
<!– Code :
<ul style=”list-style-type:circle;” >
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ul>
—
style=”list-style-type:none;”
If we don’t want any bullets then we have to set “list-style-type:none;” as value for “style” attribute in <ul> tag.
<!– Code :
<ul style=”list-style-type:none;” >
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ul>
—
Description List
HTML supports Description list.
There are 3 tags use in creating Description list.
<dd> — Use to create Description list.
<dt> — Description term is enclosed in this tag.
<dd> — Description for the term is enclosed in this tag.
<!– Code :
<dl>
<dt>
ITVoyagers
</dt>
<dd>
ITVoyagers is an educational blog for information technology and computer science program.We have started this blog with a goal of meeting the requirements of learners to cope with the changing technology.
</dd>
</dl>
–>
- ITVoyagers
- ITVoyagers is an educational blog for information technology and computer science program.We have started this blog with a goal of meeting the requirements of learners to cope with the changing technology.