Lists - INCS

Lists are one of the most used structures on the web — navigation menus, ingredients, steps, and search results are all lists under the hood. HTML gives you three kinds.

Concept 1 — Unordered lists

An unordered list is a collection of items where order doesn’t matter. The browser renders each item with a bullet point. The list is wrapped in <ul> (unordered list), and each item sits inside an <li> (list item) tag.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Use unordered lists for things like ingredients, features, or navigation links — anything where swapping two items wouldn’t change the meaning.

Concept 2 — Ordered lists

An ordered list is used when sequence matters. The browser numbers the items automatically. Swap <ul> for <ol> — the <li> tags stay exactly the same.

<ol>
  <li>Create the file</li>
  <li>Write the HTML</li>
  <li>Open it in a browser</li>
</ol>

Tip: because the browser handles numbering, you never have to update numbers manually if you add or remove a step. Just add or remove an <li>.

Concept 3 — Description lists

A description list pairs terms with their definitions or details. It uses three tags: <dl> (description list), <dt> (term), and <dd> (description). It’s less common than <ul> and <ol>, but perfect for glossaries, FAQs, and key-value data.

<dl>
  <dt>HTML</dt>
  <dd>The structure of a webpage.</dd>

  <dt>CSS</dt>
  <dd>The visual styling of a webpage.</dd>

  <dt>JavaScript</dt>
  <dd>The behaviour and interactivity of a webpage.</dd>
</dl>

Concept 4 — Nesting lists

Lists can be nested inside each other. Place a complete <ul> or <ol> inside an <li> to create a sub-list. Browsers indent nested lists automatically.

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

Rule: keep nesting to two levels in most cases. Deeper nesting is hard to read and usually signals the content should be restructured.

Concept 5 — Lists are block elements

Each <li> takes up its own line and has spacing above and below, just like <p>. You can put inline elements — <strong>, <em>, <a>, <code> — inside an <li> without any issues.

<ul>
  <li><strong>HTML</strong> — structure</li>
  <li><em>CSS</em> — style</li>
  <li><a href="https://developer.mozilla.org">MDN</a> — reference</li>
</ul>

Try it yourself

Add this to your index.html to see all three list types side by side:

<body>
  <h1>My lists page</h1>

  <h2>Things I need (unordered)</h2>
  <ul>
    <li>A text editor</li>
    <li>A browser</li>
    <li>Curiosity</li>
  </ul>

  <h2>Steps to build a page (ordered)</h2>
  <ol>
    <li>Create <code>index.html</code></li>
    <li>Add the boilerplate</li>
    <li>Write your content</li>
    <li>Open in browser</li>
  </ol>

  <h2>Glossary (description list)</h2>
  <dl>
    <dt>Tag</dt>
    <dd>An HTML element wrapped in angle brackets.</dd>
    <dt>Attribute</dt>
    <dd>Extra information added inside an opening tag.</dd>
  </dl>
</body>

Quick reference

Tag	Purpose
`<ul>`	Unordered (bulleted) list
`<ol>`	Ordered (numbered) list
`<li>`	A single list item
`<dl>`	Description list
`<dt>`	Term in a description list
`<dd>`	Description for a term