lists in HTML
1. Ordered Lists (<ol>):
- i) Ordered lists are used to create lists with items that have a specific order or sequence, typically represented by numbers or letters.
- ii) Each list item is wrapped in
<li>(list item) tags. - iii) You can specify the type of numbering or bullet style using the
typeattribute of the<ol>element.
Example:-
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
In this example, an ordered list is created with three list items, and each item is numbered.
Result:-
20231019110105.png)
2. Unordered Lists (<ul>):
- i) Unordered lists are used to create lists with items that do not have a specific order and are typically represented by bullet points or other symbols.
- ii) Each list item is wrapped in
<li>(list item) tags. - Example:-
- <ul> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> </ul>
- i) Definition lists are used to create lists of terms and their corresponding definitions.
- ii) Each term is wrapped in a
<dt>(definition term) tag, and each definition is wrapped in a<dd>(definition description) tag.
In this example, an unordered list is created with three list items, and each item is represented by a bullet point.
Result:-
20231019110249.png)
3. Definition Lists (<dl>):
Example:-
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
In this example, a definition list is created with two terms and their corresponding definitions.
Result:-
20231019110410.png)
You can also nest lists inside one another, combining ordered and unordered lists to create complex structures. For example, you can create a nested list with ordered and unordered lists as shown here:
<ol>
<li>First item</li>
<li>Second item
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Third item</li>
</ol>
Result:-
20231019110536.png)
In this case, the second list item contains a nested unordered list. This allows you to create hierarchical structures in your content.
Lists in HTML are essential for structuring information, creating navigation menus, and organizing content in a readable and accessible manner on web pages.
