HTML Lists
What is HTML Lists?
HTML lists are used to display items in a structured, easy-to-read format on a webpage. There are three main types of HTML lists:
1. Ordered Lists (<ol>
)
An ordered list is used when the sequence of items matters. Each item is numbered automatically.
Syntax:
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
Output:
- First item
- Second item
- Third item
2. Unordered Lists (<ul>
)
An unordered list is used when the sequence of items does not matter. Each item is marked with a bullet point.
Syntax:
<ul> <li>Item A</li> <li>Item B</li> <li>Item C</li> </ul>
Output:
- Item A
- Item B
- Item C
3. Description Lists (<dl>
)
A description list is used to group terms with their descriptions. It is useful for creating glossaries or defining concepts.
Syntax:
<dl> <dt>HTML</dt> <dd>A markup language for creating web pages.</dd> <dt>CSS</dt> <dd>Used to style the appearance of web content.</dd> </dl>
Output:
- HTML: A markup language for creating web pages.
- CSS: Used to style the appearance of web content.
Nesting Lists
Lists can be nested within each other for more complex structures.
Example:
<ul> <li>Main Item 1 <ul> <li>Sub-item 1.1</li> <li>Sub-item 1.2</li> </ul> </li> <li>Main Item 2</li> </ul>
Output:
-
Main Item 1
- Sub-item 1.1
- Sub-item 1.2
- Main Item 2
Attributes for Lists
Lists can have attributes like type
and start
(for <ol>
) or classes and IDs (for styling with CSS).
Example:
<ol type="A" start="3"> <li>Item 3</li> <li>Item 4</li> </ol>
Output:
- Item 3
- Item 4
By combining these basic elements, you can create structured and readable content for your webpage.