Different types of Lists in HTML
Lists are the preferred way to display items one after the other, instead of just using <br> tags. Lists are another nice formatting tool for the content of your web pages. The most commonly used list types are:
• unordered lists (bullet lists) - the one you see here
• ordered lists
• definition lists
While an unordered list like the one above uses bullets by default before each list item, an ordered list puts ordinal numbers (1.2.,3., ...) before each list item.
1. Unordered Lists or Bullet Lists:
An unordered list is formed with the element UL and contains at least one list element LI. Use the <ul> tags to define the start and end of an unordered list. A number of list items (li elements) will go within the ul tags.
List Item - <li> some item </li>: Add the text for each item in between some <li> and </li> tags. Each list item must have its own li tags.
You May Also Like
Features of HTML
Structure of HTML Document
HTML Formatting Tags
Different Types of Lists in HTML
Bullet Type <ul type="disc | circle | square">: By default a browser will show a round bullet. This can be changed by using the type attribute of the ul tag, which will change the bullet type for the entire list.
Example:
<html>
<body>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</body>
</html>
The Output is as follows:
• Coffee
• Milk
2. Ordered Lists:
This list is used to create and Indexed List, such as a numbered or alphabetical list. Use the <ol> tags to set the start and end of the list. A number of list items will then go between the ordered list tags.
Ordered List Item - <li> an item </li>: Each item must use the <li> tags the same as with an unordered list. But this time, the browser will number each item automatically, instead of showing bullets.
List Type <ol type="A | a | I | i | 1">: Set the type of list index by using the type="?" attribute. The default style is numeric, and you can also choose from upper or lowercase, alphabetic or roman numerals.
List Starting Position <ol start="?">: Set the starting number (or letter) if you don't want the list to start at 1 or A.
Example:
<html>
<body>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>
</html>
The output is as follows:
1. Coffee
2. Milk
3. Nested List:
We can nest one list in another list which creates a complex type of list.
We can nest one list in another list which creates a complex type of list.
Example:
<html>
<head>
<title>Nested List </title>
</head>
<body>
<ol type = “a”>
<li>I BSC </li>
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub3</li>
</ul>
<li>I BSC </li>
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub3</li>
</ul>
<li>I BSC </li>
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub3</li>
</ul>
</ol>
</body>
</html>
4. Definition Lists:
A definition list is usually used to create glossaries and has a little bit more complex structure than the two lists above. The basic code for a definition list is formed with the element DL and at least one element pair DT and DD.
Definition Title - <dt> … </dt>: The title of a term being defined. You may have a term with no definition, or multiple terms with the same definition.
Definition Description - <dd> … </dd>: The definition of a term. You can have multiple definitions for a single term.
Example:
<html>
<head>
<title> Definition lists </title>
</head>
<body>
<h3> Definition List </h3>
<dl>
<dt>Term 1</dt>
<dd>Definition of term 1</dd>
<dt>Term 2</dt>
<dd>Definition of term 2</dd>
</dl>
</body>
</html>
The output is as follows:
Definition List
Coffee
- black hot drink
Milk
- white cold drink
You May Also Like
HTML Css(Cascading Style Sheets)
