Types of Lists in HTML
HTML provides several types of lists that help organize content. These include ordered lists, unordered lists, and description lists.
1. Ordered List (<ol>)
An ordered list is used when the sequence of items is important. Each item is numbered automatically.
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
2. Unordered List (<ul>)
An unordered list displays items with bullet points. It's used when the order does not matter.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
3. Description List (<dl>)
A description list is used for name/value pairs, like terms and their definitions.
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
<dt>CSS</dt>
<dd>A style sheet language used to describe the appearance of web pages.</dd>
</dl>
List Nesting Example
Lists can be nested inside each other for complex structures:
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>
Accessibility Tips
- Use semantic list tags (<ol>, <ul>, <dl>) for structure and screen readers.
- Keep nesting levels minimal for readability and accessibility.
- Include descriptive text to clarify list items where needed.