HTML Lists

What are HTML Lists?

HTML lists allow web developers to group a set of related items. There are three types of lists: unordered, ordered, and description lists.

Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. List items are marked with bullets by default.

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. List items are marked with numbers by default.

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Description Lists

A description list is a list of terms with a description of each term. Use <dl> for the list, <dt> for the term, and <dd> for the description.

<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

Nested Lists

Lists can be nested inside other lists:

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrot</li>
            <li>Broccoli</li>
        </ul>
    </li>
</ul>

List Attributes

Ordered lists can use the type attribute to change the numbering style:

<ol type="A">
    <li>First</li>
    <li>Second</li>
</ol>

<ol type="i">
    <li>First</li>
    <li>Second</li>
</ol>