LISTS
Lists are used to group related pieces of information together, so they are clearly associated
with each other and easy to read.
There are three list types:
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.
Description list — used to display name/value pairs such as terms and their definitions, or times and
events.
Unordered lists
Unordered lists, or bulleted lists, are used when a set of items can be placed in any order. An example is a
shopping list:
milk
bread
butter
coffee beans
Ordered lists
Ordered lists, or numbered lists, are used to display a list of items that need to be placed in a specific order.
An example would be cooking instructions :
1. Gather ingredients
2. Mix ingredients together
3. Place ingredients in a baking dish
4. Bake in oven for an hour
5. Remove from oven
6. Allow to stand for ten minutes
7. Serve
LISTS USING CSS:
The CSS list-style-type property is used to define the style of the list item marker:
a. Unordered list:
Value (Symbol) 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
None The list items will not be marked
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:enter your value(symbol type)">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
b. Ordered list:
The type attribute of the <ol> tag, defines 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
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="enter your type">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
VARIOUS TAGS USED WHILE OPERATING IN LISTS :
Use the HTML <ul> element to define an unordered list
Use the CSS list-style-type property to define the list item marker
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Lists can be nested inside lists