Lists — HTML Fundamentals

Unordered lists

Use an unordered list <ul> when the order of items doesn't matter — features, ingredients, navigation links. Items are wrapped in <li> (list item) tags.

Unordered list

html

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
<!-- Renders with bullet points by default -->

Ordered lists

Use an ordered list <ol> when sequence matters — steps, instructions, rankings. The browser automatically numbers each item.

Ordered list

html

<ol>
  <li>Install Node.js</li>
  <li>Create a new project folder</li>
  <li>Run npm init</li>
  <li>Install packages</li>
</ol>
<!-- Renders: 1. Install Node.js  2. Create a new project... -->

Nested lists

Lists inside lists

html

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

Description lists

Description list — for terms and definitions

html

<dl>
  <dt>HTML</dt>
  <dd>The markup language that structures web content.</dd>

  <dt>CSS</dt>
  <dd>The style language that controls appearance.</dd>

  <dt>JavaScript</dt>
  <dd>The programming language that makes pages interactive.</dd>
</dl>

NOTE

Real-world usage. Navigation menus are almost always built with <ul> and <li> elements, then styled with CSS to look like horizontal bars, sidebars, or dropdowns. The semantic structure remains even when the visual appearance is completely transformed.