Lists

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

<ol>
  <li>Preheat oven to 375°F</li>
  <li>Mix dry ingredients</li>
  <li>Add wet ingredients and stir</li>
  <li>Bake for 25 minutes</li>
</ol>

<!-- Roman numerals starting at 1 -->
<ol type="i">
  <li>Introduction</li>   <!-- i -->
  <li>Methods</li>        <!-- ii -->
  <li>Results</li>        <!-- iii -->
</ol>

<!-- Alphabetical uppercase -->
<ol type="A">
  <li>Option A</li>
  <li>Option B</li>
</ol>

<!-- Start at 3 -->
<ol start="3">
  <li>Third item</li>   <!-- 3 -->
  <li>Fourth item</li>  <!-- 4 -->
</ol>

<!-- Reversed (counts down) -->
<ol reversed>
  <li>Gold — 1st</li>   <!-- 3 -->
  <li>Silver — 2nd</li> <!-- 2 -->
  <li>Bronze — 3rd</li> <!-- 1 -->
</ol>

<!-- Reversed from a specific number -->
<ol reversed start="10">
  <li>Item</li>   <!-- 10 -->
  <li>Item</li>   <!-- 9 -->
</ol>

<ol>
  <li>First (1)</li>
  <li value="5">Fifth (5)</li>  <!-- jumps counter to 5 -->
  <li>Sixth (6)</li>            <!-- continues from 5 -->
</ol>

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

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — controls visual presentation.</dd>

  <dt>JavaScript</dt>
  <dd>A scripting language for web interactivity.</dd>
</dl>

<dl>
  <!-- Multiple terms sharing one definition -->
  <dt>Color</dt>
  <dt>Colour</dt>
  <dd>The property of an object relating to how it reflects light.</dd>

  <!-- One term with multiple definitions -->
  <dt>Mercury</dt>
  <dd>The smallest planet in the solar system.</dd>
  <dd>A liquid metal element (Hg) with atomic number 80.</dd>
  <dd>The Roman messenger god.</dd>
</dl>

<dl>
  <div>
    <dt>Name</dt>
    <dd>Jane Doe</dd>
  </div>
  <div>
    <dt>Role</dt>
    <dd>Engineer</dd>
  </div>
  <div>
    <dt>Location</dt>
    <dd>New York</dd>
  </div>
</dl>

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

<!-- Mixed types -->
<ol>
  <li>Install dependencies
    <ul>
      <li>Node.js v20+</li>
      <li>npm or pnpm</li>
    </ul>
  </li>
  <li>Clone the repo</li>
  <li>Run <code>npm install</code></li>
</ol>

<menu>
  <li><button type="button">Bold</button></li>
  <li><button type="button">Italic</button></li>
  <li><button type="button">Underline</button></li>
</menu>

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- Breadcrumb -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
    <li aria-current="page">Getting Started</li>
  </ol>
</nav>

<!-- Controlling list appearance via CSS (not attributes) -->
<style>
  ul.no-bullets { list-style: none; padding: 0; margin: 0; }
  ol.roman     { list-style-type: lower-roman; }
  ol.alpha     { list-style-type: lower-alpha; }

  /* Custom marker with counter */
  ol.custom {
    counter-reset: step;
    list-style: none;
  }
  ol.custom li::before {
    counter-increment: step;
    content: "Step " counter(step) ": ";
    font-weight: bold;
  }
</style>

<!-- If you remove bullets via CSS, restore semantics -->
<ul role="list" style="list-style: none;">
  <li>Item one</li>
  <li>Item two</li>
</ul>