HTML Lists

<ol>
    <li>Learn HTML
        <ul>
            <li>Elements</li>
            <li>Attributes</li>
        </ul>
    </li>
    <li>Learn CSS
        <ul>
            <li>Selectors</li>
            <li>Flexbox</li>
        </ul>
    </li>
</ol>

This structure combines an ordered learning sequence with unordered topics under each step.

Important Nesting Rule

Do not put a nested list directly inside an ol or ul as a sibling of li. Place it inside the appropriate li element.

10. Description Lists

A description list represents one or more terms or names and their associated descriptions, values or other metadata.

It uses three main elements:

dl: the description list container.
dt: a term or name.
dd: a description or associated value.

Basic Syntax

<dl>
    <dt>HTML</dt>
    <dd>A markup language used to structure web content.</dd>

    <dt>CSS</dt>
    <dd>A stylesheet language used to control presentation.</dd>
</dl>

Browsers commonly indent dd elements, but the exact presentation depends on browser defaults and CSS.

Example: Technical Glossary

<h2>Web Development Glossary</h2>

<dl>
    <dt>DOM</dt>
    <dd>The Document Object Model represents a document
        as a structure that programs can access and modify.</dd>

    <dt>HTTP</dt>
    <dd>A protocol used for communication between clients
        and servers on the web.</dd>

    <dt>URL</dt>
    <dd>An identifier that locates a resource and describes
        how it can be accessed.</dd>
</dl>

Multiple Descriptions for One Term

A term may have more than one associated description.

<dl>
    <dt>HTML</dt>
    <dd>Structures webpage content.</dd>
    <dd>Provides semantic meaning to document elements.</dd>
</dl>

Here, both descriptions are associated with the same term.

Multiple Terms Sharing a Description

A description can also apply to multiple related terms.

<dl>
    <dt>JPEG</dt>
    <dt>WebP</dt>
    <dd>Image formats commonly used for web photographs.</dd>
</dl>

Description lists are not restricted to dictionaries. They can also represent metadata, product specifications and other name-value relationships.

11. Real-World Use Cases for Description Lists

Product Specifications

<h2>Laptop Specifications</h2>

<dl>
    <dt>Processor</dt>
    <dd>Intel Core i5</dd>

    <dt>Memory</dt>
    <dd>8 GB RAM</dd>

    <dt>Storage</dt>
    <dd>512 GB SSD</dd>
</dl>