In HTML, lists are structured using specific elements depending on whether you want the list to be ordered (numbered) or unordered (bulleted).
- Unordered Lists (Bulleted Lists)
Use the
- tag for unordered lists, where each list item is enclosed in the
- tag.
html
Copy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Example Output:
Item 1
Item 2
Item 3
- Ordered Lists (Numbered Lists)
Use the
- tag for ordered lists, with list items again wrapped in
- tags.
html
Copy code
<ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol>
Example Output:
First Item
Second Item
Third Item- Nested Lists
You can nest lists within lists by placing a
- or
- tag.
- inside an
html
Copy code
<ul> <li>Parent Item 1 <ul> <li>Child Item 1</li> <li>Child Item 2</li> </ul> </li> <li>Parent Item 2</li> </ul>
Example Output:
Parent Item 1
Child Item 1
Child Item 2
Parent Item 2- Customizing Ordered Lists You can modify ordered lists to display different numbering styles, such as letters or Roman numerals, using the type attribute.
html
Copy code
<ol type="A"> <li>Item A</li> <li>Item B</li> <li>Item C</li> </ol>
This will create: A. Item A
B. Item B
C. Item C- Description Lists
For lists where each item has a description or definition, use the
- ,
- , and
- tags.
html
Copy code
<dl> <dt>HTML</dt> <dd>A markup language for creating web pages.</dd> <dt>CSS</dt> <dd>Stylesheet language used to describe the presentation of a document.</dd> </dl>
Example Output:
HTML: A markup language for creating web pages.
CSS: Stylesheet language used to describe the presentation of a document. Currently working perfectly for finance website
Top comments (0)