Nested Lists and Description Lists in HTML

Lists can be nested inside each other to represent hierarchy — like a table of contents with sub-sections.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Databases</li>
    </ul>
  </li>
</ul>

Notice the nested <ul> sits inside the parent <li>, not after it — this is what creates the visual indentation and logical grouping.

HTML also provides a lesser-known third list type: the description list, useful for term/definition pairs like a glossary or FAQ.

<dl>
  <dt>HTML</dt>
  <dd>The markup language used to structure web pages.</dd>

  <dt>CSS</dt>
  <dd>The language used to style HTML elements.</dd>
</dl>

<dl> (description list) is the container.
<dt> (description term) holds the term being defined.
<dd> (description details) holds its definition — and a single <dt> can have multiple <dd> elements if a term has several definitions or related details.

This structure is semantically more accurate than a generic bulleted list for glossaries, FAQs, and metadata (like key-value pairs).