 |
| HTML List |
HTML List
There are major two types of HTML List.
- HTML UL ( Unordered List )
- HTML OL ( Ordered lIST )
HTML List Example
An Unordered List
HTML Ordered List
- first paid
- second paid
- third paid
- fourth paid
- fifth paid
HTML Unordered List
An unordered list start with the <ul> . Each list item start with the <li> tag. This list item will be marked with bullets ( small black circles ) by default.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Result
An unordered HTML list
Unordered HTML List : Choose list item marker
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
Example of HTML Disc
<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>
<body>
<h2>Unordered List with Disc Bullets/h2><
<ul style="list-style-type : disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Result
Example of HTML Circle
<!DOCTYPE html>
<html>
<head>
<title> HTML5 List</title>
</head>
<body>
<h2>Unordered List with circle Bullets/h2><
<ul style="list-style-type : circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Result
Example of HTML Square
<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>
<body>
<h2>Unordered List with square Bullets/h2><
<ul style="list-style-type : square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Result
Example of HTML None
<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>
<body>
<h2>Unordered List with none</h2>
<ul style="list-style-type : none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Result
HTML Ordered list
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
An ordered HTML list :
- Coffee
- Tea
- Milk
Ordered Html List : The type attribute
The type attribute of the <o> tag. define the type of the list item marker.
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Result
Ordered List with Numbers
- cofee
- Tea
- Milk
Example of HTML UppersCase Letters
<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Result
A. Coffee
B. Tea
C. Milk
Example of HTML LowerCase Letters
<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>
<body>
<h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Result
a. Coffee
b. Tea
c. Milk
Example of HTML LowerCase Letters
<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Result
I. Coffee
II. Tea
III. Milk
Video On This Topic :
Have a Nice Stay Here :-)
0 comments:
Post a Comment
For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.