iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

HTML Lists

By · Reviewed & last updated · Part of HTML Tutorial

Lists structure related items. Use

    for unordered,
      for ordered, and
      for definition pairs.

      Three list types in practice

      EXAMPLE
      <!-- Unordered list - bullet points, order does not matter -->
<h3>Languages I use</h3>
<ul>
  <li>TypeScript</li>
  <li>Python</li>
  <li>Go</li>
</ul>

<!-- Ordered list - sequence matters -->
<h3>Deploy steps</h3>
<ol>
  <li>Run tests</li>
  <li>Build the container</li>
  <li>Push to the registry</li>
  <li>Update the deployment</li>
</ol>

<!-- Nested lists -->
<ul>
  <li>Frontend
    <ul>
      <li>React</li>
      <li>Tailwind</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node</li>
      <li>Postgres</li>
    </ul>
  </li>
</ul>

<!-- Definition list - term / definition pairs -->
<h3>Glossary</h3>
<dl>
  <dt>SSR</dt>
  <dd>Server-Side Rendering - HTML built on the server</dd>

  <dt>CSR</dt>
  <dd>Client-Side Rendering - HTML built in the browser</dd>

  <dt>SSG</dt>
  <dd>Static Site Generation - HTML built at build time</dd>
</dl>

<!-- Style with CSS, not <br>; never fake a list with line breaks -->
<style>
  ul, ol { padding-left: 1.25rem; }
  dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
  dt { font-weight: 600; }
</style>

      Why it matters

      Pick the semantic list type that matches your data. Screen readers announce list length and position, so a real list beats fake lists made of
      tags. Definition lists are underused; reach for them when you have term/value pairs.

      Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

      Example

      Example
      <!DOCTYPE html>
<html>
<head>
    <title>HTML Lists</title>
</head>
<body>

<h1>HTML Lists</h1>
<p>This is a demo page for the "HTML Lists" lesson.</p>

</body>
</html>
      Try it Yourself »

      Exercise

      Turn this into a numbered list.

      < > <li>Mix</li> <li>Bake</li> </ >

      Test yourself

      Q1. Unordered list is…
      Q2. Ordered list is…
      Q3. Definition / description lists use…

      Discussion

      Loading…