Lists in HTML
Lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read. In modern web development lists are workhorse elements, frequently used for navigation as well as general content.
Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. They are also useful for a purely practical reason — they give you extra elements to attach CSS styles to, for a whole variety of styling (we'll get on to CSS later in the course)
- unordered list — used to group a set of related items, in no particular order.
- ordered list — used to group a set of related items, in a specific order.
Unordered List
Unordered List is used when you don't want to write your text in a particular order.These type of lists use bullets (disc,square,circle,etc) to display the items of list.
<ul> Tag is used to display an unordered list,and the items of list (list items) are displayed using <li> Tag. Both tags are paired tags they contain both starting and closing tags.
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul>
<li>Blue</li>
<li>Red</li>
<li>Green<li>
</ul>
</body>
</html>
Result:
Note: The default type of unordered list is Disc. It means that the content is displayed using Disc by default,
UL list Styles ( Type)
We can change our list's style bye using type attribute with the list definition.
<ul type="disc">
<!--List items here-->
</ul>
There are mainly three types of styles of UL list :
- Disc: Disc is default style.
Example:
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Blue</li>
<li>Red</li>
<li>Green</li>
</ul>
</body>
</html>
Result:
- Square: You can also use square to represent the list items.
Example:
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul type="square">
<li>Blue</li>
<li>Red</li>
<li>Green</li>
</ul>
</body>
</html>
Result:
- Circle: Circles can also be used to display list items.
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul type="circle">
<li>Blue</li>
<li>Red</li>
<li>Green</li>
</ul>
</body>
</html>
Result:
Ordered List
Ordered List is used when you don't want to write your text in a particular order.These type of lists use numbers or letters to display the items of list.
<ol> Tag is used to display an unordered list,and the items of list (list items) are displayed using <li> Tag. Both tags are paired tags they contain both starting and closing tags.
Example:
<html>
<head>
<title> Ordered List</title>
</head>
<body>
<ol>
<li>Blue</li>
<li>Red</li>
<li>Green</li>
</ol>
</body>
</html>
Result:
Result:
Result:
Note: The default type of ordered list is numbers. It means that the content is displayed using numbers by default,
OL list Styles ( Type)
We can change our list's style bye using type attribute with the list definition.
<ol type="">
<!--List items here-->
</ol>
There are two types of OL Lists:
- Letters:
Lowercase ASCII letters (a, b, c…)
Example:
<html>
<head>
<title> Ordered List</title>
</head>
<body>
<ol type="a">
<li>Blue</li>
<li>Red</li>
<li>Green</li>
</ol>
</body>
</html>
Result:
Result:
Uppercase ASCII letters (A, B, C…).
Example:
<html>
<head>
<title> Ordered List</title>
</head>
<body>
<ol type="">
<li>Blue</li>
<li>Red</li>
<li>Green</li>
</ol>
</body>
</html>
Result:
Result:
- Numbers:
Roman numbers, lowercase (i, ii, iii, iv)
Example:
<html>
<head>
<title> Ordered List</title>
</head>
<body>
<ol type="i">
<li>Blue</li>
<li>Red</li>
<li>Green</li>
</ol>
</body>
</html>
Result:
Roman numbers, uppercase (I, II, III, IV)
Example:
<html>
<head>
<title> Ordered List</title>
</head>
<body>
<ol type="I">
<li>Blue</li>
<li>Red</li>
<li>Green</li>
</ol>
</body>
</html>
Result:
You can use any of these type according to your need. Happy Coding!
You can use any of these type according to your need. Happy Coding!
Comments
Post a Comment
If you have any doubt, ask here