HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Milk</li>
</ul>

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:
<ol>
<li>Good</li>
<li>Better</li>
<li>Best</li>
</ol>

Nested Lists

You can also nest lists inside each other.

<ul>
<li>Item 1
<ul>
<li>Subitem 1.1</li>
<li>Subitem 1.2</li>
</ul>
</li>
<li>Item 2</li>
</ul>

HTML Description Lists

HTML also supports description lists.
A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Here are the key points about HTML lists:

1. Two main types

• Unordered list(<ul>) Displays items with bullet points. Used when the order doesn't matter.
• Ordered list(<ol>) Displays items with numbers. Used when the order of item is important.

2. List Items(<li>)

• Both <ul> and <ol> use the <li> tag to define individual items in the list.

3. Nested Lists

• List can be nested within other lists, allowing for sub-items or hierarchical structures

4. Customizing Styles:

• You can change bullet styles for unordered lists or numbering styles for ordered lists using CSS (e.g., list-style-type).

5. Semantic Structure:

• Lists are used to group related items together, helping improve page structure and accessibility.

6. Definition List (<dl>):

• A third type, used for defining terms. It contains <dt> (definition term) and <dd> (definition description).

7. Flexible Layout:

• Lists can be styled and used in various ways, including navigation menus, item listings, and more.