HTML - List
In HTML list are used when the data are to be mentioned in the form of points.there are basic three types of lists are available in HTML.
Ordered List
Unordered List
Definition List
Ordered List
List having numbered items are known as ordered lists.they are used when the items the list have a natural order.
Ordered list begin with the <ol> tag, and each item uses the standard <li> tag. </li> tag is optional.if needed,you can create a list heading by using the <li> tag.close the list with the </ol> tag to signal the end of the list.
Attributes of <ol> Tag
Attributes |
Description |
|---|---|
type=A |
Sets markers to uppercase letters |
type=a |
Sets markers to lowercase letters |
type=I |
Sets markers to uppercase Roman numerals |
type=i |
Sets markers to lowercase Roman numerals |
type=1 |
Sets markers to numbers |
start |
Sets beginning value of item markers in the current list |
Attributes of <li> Tag
Attributes |
Description |
|---|---|
value=number |
gives separate value to an individual item |
Example
<html>
<head>
<title>HTML - List</title>
</head>
<body>
<h2>Item List</h2>
<hr>
<ol type="1">
<li>Mouse</li>
<li>Mobile</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Leptop</li>
</ol>
</body>
</html>
Output on Webpage
Item List
- 1 Mouse
- 2 Mobile
- 3 Keyboard
- 4 CPU
- 5 Leptop
Unordered List
These list are characterized by list items that do not have numbers.they are used when the points in the list have no particular order.unordered list is just like a bullet list of ms word.unordered lists begin with the <ul> tag.and each items uses the standard <li> tah and end with </li> tag.
Use the type attribute to change the bullet used in the list.its value can be one of disc,square,circle.
Example
<html>
<head>
<title>HTML - List</title>
</head>
<body>
<h2>Item List</h2>
<hr>
<ul type="circle">
<li>Mouse</li>
<li>Mobile</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Leptop</li>
</ul>
</body>
</html>
Output on Webpage
Item List
- Mouse
- Mobile
- Keyboard
- CPU
- Leptop
Definition List
Definition lists have a heading and the text appears below that.a term is displayed on new line with its definition or explanation.
This list is created using <dl> tag and it ends with </dl> tag, between them you can use <dt> tag to denote definition term and <dd> tag to denote its corresponding definition.
Example
<html>
<head>
<title>HTML - List</title>
</head>
<body>
<h3>Achronyms</h3>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Mark-Up Language</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
</dl>
</body>
</html>
You may also like this!
© Veewom.com. | Managed by PinePL
