HTML Lists
What is HTML Lists?
HTML lists are used to display items in a structured, easy-to-read format on a webpage. HTML includes three primary list types for organizing content:
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 pairs terms with corresponding explanations or definitions. 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.
Prefer Learning by Watching?
Watch these YouTube tutorials to understand HTML Tutorial visually:
What You'll Learn:
- 📌 Learn HTML Lists
- 📌 HTML Lists Tutorial