HTML Basics

Lists

⏱ 5 min read📖 Beginner

HTML has three types of lists: unordered (bullet points), ordered (numbered), and description (term–definition pairs). Lists are one of the most commonly used structures in HTML.

Lists are everywhere on the web — navigation menus, article summaries, steps in a tutorial, ingredients in a recipe. Choosing the right list type helps browsers and screen readers understand your content correctly.

Unordered Lists

Use <ul> when the order of items doesn't matter. Each item goes inside an <li> (list item) tag:

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

The browser renders each item with a bullet point by default. The bullet style can be changed with CSS.

Ordered Lists

Use <ol> when the order matters — steps, rankings, instructions:

<ol>
  <li>Open your text editor</li>
  <li>Create a new file called <code>index.html</code></li>
  <li>Write your HTML</li>
  <li>Open the file in a browser</li>
</ol>

You can customise the starting number with the start attribute:

<ol start="5">
  <li>Item five</li>
  <li>Item six</li>
</ol>

💡

Use <ol> for steps and sequences where the order is meaningful (like a recipe or tutorial). Use <ul> for collections where order doesn't matter (like a list of features or tags).

Nested Lists

You can place a list inside a list item to create sub-lists:

<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

A description list (<dl>) pairs terms with their definitions. Use <dt> for the term and <dd> for the description:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation of web pages.</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity to web pages.</dd>
</dl>

Description lists are great for glossaries, FAQs, and metadata tables.

Lists as Navigation

Navigation menus are almost always built with unordered lists. CSS then removes the bullet points and styles the items as horizontal or vertical links:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/html">HTML</a></li>
    <li><a href="/css">CSS</a></li>
    <li><a href="/javascript">JavaScript</a></li>
  </ul>
</nav>

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.