HTML Lists

HTML provides three types of lists: unordered lists (bulleted), ordered lists (numbered), and description lists (term-description pairs). Lists structure related content and improve readability.

Unordered Lists

Unordered lists (<ul>) display items with bullets. Each list item is marked with <li>. Use unordered lists when item order doesn't matter—features, navigation menus, or collections of related items.

Browsers display unordered lists with bullet points by default, but you can change the marker style with CSS (list-style-type: disc, circle, square, none).

Lists can be nested by placing a <ul> inside an <li>. Nested lists create hierarchical structures, useful for site navigation or categorized content.

<!-- Basic unordered list -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Nested unordered list -->
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>PHP</li>
    </ul>
  </li>
</ul>

<!-- List with CSS styling -->
<ul style="list-style-type: square;">
  <li>Square bullets</li>
  <li>Instead of circles</li>
</ul>

Ordered Lists

Ordered lists (<ol>) display items with numbers. Use them when order matters—instructions, rankings, or sequential steps. Browsers number items automatically, renumbering if you add or remove items.

The type attribute changes numbering style: type='1' (default numbers), type='A' (uppercase letters), type='a' (lowercase letters), type='I' (uppercase Roman), type='i' (lowercase Roman).

The start attribute specifies the starting number. start='5' begins numbering at 5. The reversed attribute (boolean) reverses numbering, counting down instead of up.

<!-- Basic ordered list -->
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

<!-- Different numbering types -->
<ol type="A">
  <li>Option A</li>
  <li>Option B</li>
  <li>Option C</li>
</ol>

<ol type="I">
  <li>Chapter I</li>
  <li>Chapter II</li>
  <li>Chapter III</li>
</ol>

<!-- Start at specific number -->
<ol start="10">
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
</ol>

<!-- Reversed numbering -->
<ol reversed>
  <li>Third place</li>
  <li>Second place</li>
  <li>First place</li>
</ol>

<!-- Nested ordered list -->
<ol>
  <li>Main point 1
    <ol type="a">
      <li>Subpoint 1a</li>
      <li>Subpoint 1b</li>
    </ol>
  </li>
  <li>Main point 2</li>
</ol>

Description Lists

Description lists (<dl>) contain term-description pairs. Use <dt> (description term) for the term and <dd> (description details) for the description. They're perfect for glossaries, FAQs, or metadata.

Multiple <dd> elements can follow a single <dt>, useful when one term has multiple definitions. Multiple <dt> elements can share a single <dd> when terms are synonyms.

Description lists are semantic—they explicitly mark terms and their definitions. This helps search engines and assistive technologies understand content relationships.

<!-- Basic description list -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the standard markup language for web pages.</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - used to style and layout web pages.</dd>
  
  <dt>JavaScript</dt>
  <dd>A programming language that enables interactive web pages.</dd>
</dl>

<!-- Multiple descriptions per term -->
<dl>
  <dt>Firefox</dt>
  <dd>A free, open-source web browser from Mozilla.</dd>
  <dd>Available for Windows, macOS, and Linux.</dd>
  
  <dt>Chrome</dt>
  <dd>A web browser developed by Google.</dd>
  <dd>Known for speed and simplicity.</dd>
</dl>

<!-- Multiple terms per description -->
<dl>
  <dt>Color</dt>
  <dt>Colour</dt>
  <dd>The visual perception of different wavelengths of light.</dd>
</dl>

<!-- FAQ with description list -->
<dl>
  <dt>How do I reset my password?</dt>
  <dd>Click 'Forgot Password' on the login page and follow the instructions sent to your email.</dd>
  
  <dt>How do I update my profile?</dt>
  <dd>Navigate to Settings, select Profile, make your changes, and click Save.</dd>
</dl>

List Best Practices

Use the semantically correct list type. Ordered for sequences, unordered for collections, description for term-definition pairs. Don't choose based on visual appearance—use CSS for styling.

Keep list items parallel in structure. If one item starts with a verb, all should start with verbs. Consistency improves readability and comprehension.

Don't use lists just for indentation or layout. Lists have semantic meaning—use them when content is actually a list. For visual indentation, use CSS padding or margin.

  • Use ul for unordered collections (features, ingredients, navigation)
  • Use ol for ordered sequences (steps, instructions, rankings)
  • Use dl for term-description pairs (glossaries, FAQs, metadata)
  • Nest lists for hierarchical content (navigation menus, outlines)
  • Style lists with CSS, not by choosing different list types
  • Keep list items parallel in grammar and structure
  • Use appropriate semantic HTML—don't use divs styled like lists
  • Consider accessibility—screen readers announce lists and item counts
  • Remove default list styling with CSS when appropriate (navigation)
  • Use list-style-position, list-style-type, list-style-image for custom styling