HTML lists are used to present list of information in well-formed and semantic way. There are three different types of list in HTML and each one has a specific purpose and meaning.
1. Unordered list <ul>….</ul>
2. Ordered list <ol>……</ol>
3. Description list <dl>…..</dl>
1. HTML Unordered List :- An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag and each list item starts with the <li> element.. Each item in the list is marked with a bullet.
We can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc.
Following are the possible <ul> type options are −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Example:-
<!DOCTYPE html>
<html>
<head><title>Use of Unordered list</title></head>
<body bgcolor="lightGreen" Text="Red">
<h2>Fruits Name</h2>
<ul type="square">
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
<h2>Vagetables Name</h2>
<ul type="disc">
<li>Bringle</li>
<li>Ladyfinger</li>
<li>Potato</li>
</ul>
<h2>Books Name</h2>
<ul type="circle">
<li>ITeS</li>
<li>Hindi</li>
<li>English</li>
</ul>
</body>
</html>
2. HTML Ordered List :- If we are required to put our items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag and each list item starts with the <li> element.
We can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number.
Following are the possible <ol> type options are:-
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example:
<!DOCTYPE html>
<html>
<head><title>Use of ordered list elements</title></head>
<body>
<h2>Arts Subjects Name</h2>
<ol type="i">
<li>English</li>
<li>History</li>
<li>Pol Science</li>
</ol>
<h2>Commerce Subjects Name</h2>
<ol type="1">
<li>English</li>
<li>Accountancy</li>
<li>Business Studies</li>
</ol>
<h2>Science Subjects Name</h2>
<ol type="A">
<li>English</li>
<li>Chemistry</li>
<li>Physics</li>
</ol>
</body>
</html>
3. HTML Description Lists :- HTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list. This list is created without numbering and bulleted.
Definition List makes use of following three tags.
1. <dl> − Defines the start of the list
2. <dt> − A term
3. <dd> − Term definition
Example:
<!DOCTYPE html>
<html>
<head><title>Use of Definition list elements</title></head>
<body>
<dl>
<h2><dt>List of Fruits</dt></h2>
<dd>Apple</dd>
<dd>Mango</dd>
<dd>Banana</dd>
<dd>Pinepple</dd>
</dl>
</body>
</html>
0 Comments:
Post a Comment