List types in HTML page 3 types of lists made in HTML pages are Ordered list Unordered list Definition list 01 Ordered list Ordered listing ...
List types in HTML page
3 types of lists made in HTML pages are
- Ordered list
- Unordered list
- Definition list
01 Ordered list
Ordered listing is making list with numbers / letters / roman numbers.
02 Unordered list
It is list making with bullet point.
03 Definition list
If we want to define something we use definition list.
To Make list in HTML page we use <li>…. </li> for each content in a list. <li>…</li> tag is used between <ul>….</ul>, <ol>…..</ol>, <dir>..</dir> tags.
Ordered list
Ordered list is made by using <ol>…</ol> tag. Here using type attribute we can made different types of ordered list.
Ordered html list with number
If we don’t use any attribute in <ol> tag HTML pages shows ordered list in English numbers (1, 2, 3, 4, 5……).
Here is an example-
<!DOCTYPE html>
<html>
<head><title>HTML ordered listing</title></head>
<body>
<ol>
<li>England</li>
<li>Australia</li>
<li>South Africa</li>
<li>New Zealand</li>
<li>India</li>
<li>Pakistan</li>
<li>Bangladesh</li>
<li>Sri Lanka</li>
<li>Windies</li>
<li>Afghanistan</li>
</ol>
</body>
</body>
</html>
Ordered html list with capital letter
If we use type="A" attribute in <ol> tag HTML pages shows ordered list in English capital letters like A,B,C,D,... etc.
Example:
<!DOCTYPE html>
<html>
<head><title>HTML ordered listing</title></head>
<body>
<ol type="A">
<li>England</li>
<li>Australia</li>
<li>South Africa</li>
<li>New Zealand</li>
<li>India</li>
<li>Pakistan</li>
<li>Bangladesh</li>
<li>Sri Lanka</li>
<li>Windies</li>
<li>Afghanistan</li>
</ol>
</body>
</body>
</html>
Ordered html list with small letter
If we use type="a" attribute in <ol> tag HTML pages shows ordered list in English small letters like a,b,c,d... etc.
Example:
<!DOCTYPE html>
<html>
<head><title>HTML ordered listing</title></head>
<body>
<ol type="a">
<li>England</li>
<li>Australia</li>
<li>South Africa</li>
<li>New Zealand</li>
<li>India</li>
<li>Pakistan</li>
<li>Bangladesh</li>
<li>Sri Lanka</li>
<li>Windies</li>
<li>Afghanistan</li>
</ol>
</body>
</body>
</html>
Ordered html list with Roman number
If we use type="I" attribute in <ol> tag HTML pages shows ordered list in English small letters like I,II,III,IV... etc.
Example:
<!DOCTYPE html>
<html>
<head><title>HTML ordered listing</title></head>
<body>
<ol type="I">
<li>England</li>
<li>Australia</li>
<li>South Africa</li>
<li>New Zealand</li>
<li>India</li>
<li>Pakistan</li>
<li>Bangladesh</li>
<li>Sri Lanka</li>
<li>Windies</li>
<li>Afghanistan</li>
</ol>
</body>
</body>
</html>
Unordered list
In this type of list no order will be shown. <ul>...</ul> tag is used for making unordered list in HTML pages. Using attributes with this tag we can show list with ◯,▢,● etc.Unordered list making with attribute value "circle"
By this list contents will show with circleExample:
<!DOCTYPE html>
<html>
<head><title>HTML ordered listing</title></head>
<body>
<ul type="Circle">
<li>Phone</li>
<li>Laptop</li>
<li>Book</li>
<li>Notebook</li>
</ul>
</body>
</body>
</html>
Output will be like this
Unordered list making with attribute value "disk"
By this list contents will show with diskExample:
<!DOCTYPE html>
<html>
<head><title>HTML ordered listing</title></head>
<body>
<ul type="disk">
<li>Phone</li>
<li>Laptop</li>
<li>Book</li>
<li>Notebook</li>
</ul>
</body>
</body>
</html>
Output will be like this.
Unordered list making with attribute value "square"
By this list contents will show with squareExample:
<!DOCTYPE html>
<html>
<head><title>HTML ordered listing</title></head>
<body>
<ul type="square">
<li>Phone</li>
<li>Laptop</li>
<li>Book</li>
<li>Notebook</li>
</ul>
</body>
</body>
</html>
Output will be like this.
So, we can summarize whole topic like this.
For list making write each content between <li>..</li> tag. | ||||
Ordered list Write all <li>…</li> tags between <ol>….</ol> tag | Unordered list Write all <li>…</li> tags between <ul>….</ul> tag | |||
With number | No attribute. It is default. | With circle | <ul type = "circle"> ….. </ul> | |
With capital letter | <ol type = "A"> …… </ol> | |||
With disk | <ul type = "disk"> ….. </ul> | |||
With small letter | <ol type = "a"> …… </ol> | |||
With square | <ul type = "square"> ….. </ul> | |||
With roman number | <ol type = "I"> …… </ol> | |||
No comments