HTML lists allow you to organise content in a structured and easy-to-read manner. There are three main types of lists in HTML:
- Ordered Lists (ol) – Lists where the order matters.
- Unordered Lists (ul) – Lists where the order doesn’t matter.
- Definition Lists (dl) – Lists of terms and their definitions.
Ordered Lists
An ordered list is used when the sequence of items is important. The list items are numbered automatically. Here’s the basic structure:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Attributes for Ordered Lists
type:
Specifies the kind of marker to use (numbers, letters, or Roman numerals).start:
Specifies the start value of the list items.
Example
<ol type="A" start="5">
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>
Unordered Lists
An unordered list is used when the order of the items doesn’t matter. By default, the list items are marked with bullets. Here’s the basic structure:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Attributes for Unordered Lists
type
(deprecated): Specifies the type of bullet to use (disc, circle, or square). However, this is better handled with CSS.
Example
<ul style="list-style-type: square;">
<li>Square bullet item</li>
<li>Another square bullet item</li>
</ul>
Definition Lists
A definition list is used for terms and their descriptions. Here’s the basic structure:
<dl>
<dt>Term 1</dt>
<dd>Description for term 1</dd>
<dt>Term 2</dt>
<dd>Description for term 2</dd>
</dl>
Nesting Lists
You can nest lists within lists to create more complex structures. Here’s an example:
<ul>
<li>Item 1
<ul>
<li>Subitem 1.1</li>
<li>Subitem 1.2</li>
</ul>
</li>
<li>Item 2
<ol>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ol>
</li>
</ul>
HTML lists are a powerful way to organise information in a clear and structured format. By using ordered, unordered, and definition lists, you can present content in a way that’s easy to read and understand.