Master HTML Lists

Learn how to create semantic ordered, unordered, and description lists with validation best practices.

📚 Start the Guide

Understanding HTML Lists

HTML lists help organize content hierarchically. They improve accessibility, SEO, and code clarity when used correctly.

  • Unordered <ul> for bullet lists
  • Ordered <ol> for numbered lists
  • Description <dl> for definitions
List Structure
<ul>  // unordered list
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

HTML List Types

Unordered List

For items without numerical order like navigation menus or features.

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

Ordered List

For numbered steps, rankings, or chronological content.

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

Description List

For term-definition pairs like glossaries or key-value data.

<dl>
  <dt>HTML</dt>
  <dd>Markup language</dd>
</dl>

Advanced List Techniques

Nested Lists

<ul>
  <li>Main Item<br>
    <ul>
      <li>Sub-item 1</li>
    </ul>
  </li>
</ul>

Ordered List Attributes

<ol start="5" type="A">
  <li>Item</li>
</ol><!-- A, B, C starting at 5 -->

List Validation Check

Live List Editor

Next Steps

Accessibility & Lists

Learn how screen readers interpret different list types and improve your semantic markup.

Read Guide

List Validation

Discover common list validation errors and how to fix them in W3C validation workflows.

Read Guide