CodeMIRAI
0 XP

Lists

2 min read 5 runnable examples Quiz included

HTML has three kinds of list.

Unordered lists

For items where order doesn't matter. <ul> holds the list and each <li> is an item, shown with bullets:

HTML
<h3>Shopping list</h3>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Coffee</li>
</ul>

Ordered lists

For steps or rankings, where order matters. <ol> numbers the items automatically:

HTML
<h3>Make tea</h3>
<ol>
  <li>Boil water</li>
  <li>Add the tea bag</li>
  <li>Wait three minutes</li>
  <li>Enjoy</li>
</ol>

Attributes change the numbering:

HTML
<ol start="5">
  <li>Fifth</li>
  <li>Sixth</li>
</ol>
<ol type="A">
  <li>Option A</li>
  <li>Option B</li>
</ol>
<ol reversed>
  <li>Three</li>
  <li>Two</li>
  <li>One</li>
</ol>

Nested lists

Put a whole list inside an <li> to nest it:

HTML
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Python</li>
      <li>SQL</li>
    </ul>
  </li>
</ul>

Description lists

For terms and their descriptions, like a glossary. <dl> holds the list, <dt> is a term and <dd> its description:

HTML
<dl>
  <dt>HTML</dt>
  <dd>The structure of a web page.</dd>
  <dt>CSS</dt>
  <dd>The appearance of a web page.</dd>
</dl>
Finished this lesson?Mark it complete to earn +20 XP and move your progress on.