Lists

HTML has three list types — pick the one that matches the meaning, not just the look.

Unordered List — <ul>

For items where order doesn’t matter:

<ul>
  <li>Eggs</li>
  <li>Milk</li>
  <li>Flour</li>
</ul>

Browsers render bullets by default. CSS can change the marker — disc, square, circle, custom, none.

Ordered List — <ol>

For items where order matters:

<ol>
  <li>Preheat the oven to 350°F.</li>
  <li>Mix the batter.</li>
  <li>Pour into pans.</li>
  <li>Bake for 25 minutes.</li>
</ol>

Numbered 1, 2, 3 by default. <ol type="A"> uses letters; start="5" begins numbering from 5.

Description List — <dl>

For term/definition pairs:

<dl>
  <dt>HTML</dt>
  <dd>The markup language of the web.</dd>

  <dt>CSS</dt>
  <dd>The styling language of the web.</dd>
</dl>

• <dt> — the term being defined
• <dd> — the definition

Use for glossaries, key-value lists, metadata pairs.

Nesting

Lists can nest — a <li> can contain another <ul> or <ol>:

<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>

Lists Without Bullets

For nav menus, tag lists, and similar — use a <ul> and strip the bullets via CSS:

ul.nav {
  list-style: none;
  padding: 0;
}

This is more semantic than <div><span>...</span></div> for a list of things.

Up Next

The link — <a> — is the most important HTML element.