HTML Lists

📚 Lesson 10 of 25 • ⏱ 8 min read • Beginner

Unordered List — <ul>

Use <ul> when the order does not matter (bullet points). Each item is a <li>:

HTML

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

<!-- Output:
  • HTML
  • CSS
  • JavaScript
-->

Ordered List — <ol>

Use <ol> when order matters (steps, rankings):

HTML

<ol>
  <li>Open VS Code</li>
  <li>Create index.html</li>
  <li>Write HTML code</li>
  <li>Open in browser</li>
</ol>

<!-- Output:
  1. Open VS Code
  2. Create index.html
  3. Write HTML code
  4. Open in browser
-->

ol Attributes

HTML

<!-- Start from a different number -->
<ol start="5">
  <li>Item five</li>
  <li>Item six</li>
</ol>

<!-- Count backwards -->
<ol reversed>
  <li>Third place</li>
  <li>Second place</li>
  <li>First place</li>
</ol>

<!-- Use letters or Roman numerals -->
<ol type="A"><li>Option A</li></ol>  <!-- A, B, C... -->
<ol type="i"><li>Part i</li></ol>   <!-- i, ii, iii... -->

Nested Lists

Put a list inside a <li> to create sub-items:

HTML

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

Description List — <dl>

A description list is like a glossary — terms and their definitions:

HTML

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

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — appearance of web pages</dd>

  <dt>JavaScript</dt>
  <dd>Programming language that makes pages interactive</dd>
</dl>

← Images Next: Tables →