HTML Lists

Unordered and ordered lists

• <ul> — bullet list, when order doesn't matter.
• <ol> — numbered list, when it does. start and reversed change the numbering.
• Each item is an <li>.

<h3>Shopping list</h3>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Coffee</li>
</ul>
<h3>Recipe steps</h3>
<ol>
  <li>Boil water</li>
  <li>Add coffee</li>
  <li>Wait 4 minutes</li>
</ol>

Nested lists and description lists

Put a whole list inside an <li> to nest it. <dl> pairs terms (<dt>) with descriptions (<dd>) — perfect for glossaries and metadata:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>
<dl>
  <dt>HTML</dt>
  <dd>The structure of a web page.</dd>
  <dt>CSS</dt>
  <dd>The presentation of a web page.</dd>
</dl>

Navigation menus are usually a <ul> of links inside a <nav> element, styled with CSS.