HTML Lists – ul, ol, dl and Nested Lists

Unordered List – ul + li

An unordered list (<ul>) groups items where the order does not matter. Each item uses the <li> (list item) element. By default the browser renders bullets (•).

HTML

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

HTML
CSS
JavaScript

The bullet style can be changed using the CSS list-style-type property:

CSS

ul.disc   { list-style-type: disc; }    /* default — filled circle */
ul.circle { list-style-type: circle; }  /* hollow circle */
ul.square { list-style-type: square; }  /* filled square */
ul.none   { list-style-type: none; }    /* no bullet — useful for nav menus */

Navigation menus use lists. Most website navigation bars are built with <ul> + <li> + <a>, with list-style: none applied via CSS. This gives screen readers a proper "list of links" context.

Ordered List – ol + li

An ordered list (<ol>) groups items where the order is meaningful — steps, rankings, instructions. Items are automatically numbered.

HTML

<ol>
  <li>Create a new file called index.html</li>
  <li>Add the HTML5 boilerplate</li>
  <li>Open the file in a browser</li>
</ol>

Create a new file called index.html
Add the HTML5 boilerplate
Open the file in a browser

Ordered list attributes let you customise the numbering:

Attribute	Effect	Example
`start`	Start numbering from a specific number	`<ol start="5">` → 5, 6, 7…
`reversed`	Count down instead of up	`<ol reversed>` → 3, 2, 1
`type="A"`	Uppercase letters	A, B, C…
`type="a"`	Lowercase letters	a, b, c…
`type="I"`	Uppercase Roman numerals	I, II, III…
`type="i"`	Lowercase Roman numerals	i, ii, iii…
`type="1"`	Numbers (default)	1, 2, 3…

HTML

<!-- Top 5 countdown -->
<ol start="5" reversed>
  <li>Fifth place</li>
  <li>Fourth place</li>
  <li>Third place</li>
  <li>Second place</li>
  <li>First place</li>
</ol>

<!-- Appendix-style lettering -->
<ol type="A">
  <li>Introduction</li>
  <li>Methods</li>
  <li>Results</li>
</ol>

Description List – dl + dt + dd

A description list (<dl>) is a list of term–definition pairs. Each term is wrapped in <dt> (description term) and its definition(s) in <dd> (description details).

HTML

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

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

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity to web pages.</dd>
</dl>

One term can have multiple definitions, and multiple terms can share one definition:

HTML

<dl>
  <!-- Multiple definitions for one term -->
  <dt>Bank</dt>
  <dd>A financial institution where money is deposited.</dd>
  <dd>The sloping land beside a river.</dd>

  <!-- Multiple terms with one definition -->
  <dt>Autumn</dt>
  <dt>Fall</dt>
  <dd>The season between summer and winter.</dd>
</dl>

Description lists are ideal for: glossaries, FAQs, metadata displays (key–value pairs), and recipe ingredient tables.

Nested Lists

Lists can be nested by placing a new <ul> or <ol> inside an <li> element. The sub-list must always be placed inside the parent <li>, not after the closing tag.

HTML

<ul>
  <li>Front-end
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript
        <ul>
          <li>React</li>
          <li>Vue</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Back-end
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Common mistake: Placing the sub-list outside the <li> makes it invalid HTML. The nested list is content of the list item, not a sibling of the parent list.

HTML

<!-- ❌ Wrong: sub-list outside li -->
<ul>
  <li>Front-end</li>
  <ul>              <!-- This ul is a direct child of ul — invalid -->
    <li>HTML</li>
  </ul>
</ul>

<!-- ✅ Correct: sub-list inside li -->
<ul>
  <li>Front-end
    <ul>            <!-- This ul is a child of li — valid -->
      <li>HTML</li>
    </ul>
  </li>
</ul>

Accessibility

HTML lists have built-in accessibility benefits:

Screen readers announce "list of N items" when they encounter a <ul> or <ol> — users know how many items to expect.
Screen reader users can skip over a list or jump to the next list using keyboard shortcuts.
Ordered lists signal that sequence matters — screen readers may announce item numbers.
Description lists allow screen readers to associate terms with their definitions explicitly.

Note: If you apply list-style: none via CSS, some screen readers (especially Safari + VoiceOver) stop treating the element as a list. If the list remains semantically a list (e.g. navigation), add role="list" to the <ul> to preserve accessibility.

List Use Cases

Use Case	Best List Type	Why
Navigation menu	`<ul>`	Links have no inherent order
Recipe ingredients	`<ul>`	Order of ingredients doesn't matter
Step-by-step instructions	`<ol>`	Steps must be followed in order
Ranked results / top 10	`<ol>`	Rank/position is meaningful
Glossary / dictionary	`<dl>`	Term–definition pairs
FAQ page answers	`<dl>`	Question–answer pairs
Table of contents	`<ol>` or `<ul>`	Ordered implies document sequence
Breadcrumb navigation	`<ol>`	Breadcrumb path has a definite order

📋 Summary

<ul> + <li> — unordered list: use when order doesn't matter (bullet points, navigation, ingredient lists).
<ol> + <li> — ordered list: use when sequence matters (steps, rankings). Attributes: start, reversed, type.
<dl> + <dt> + <dd> — description list: use for term–definition pairs (glossaries, FAQs, key–value metadata).
Nested lists must always place the child list inside the parent <li>.
Lists improve accessibility — screen readers announce list context and item counts.

Frequently Asked Questions

Can I style individual list items differently?

Yes. You can add a class to any <li> element and target it with CSS. You can also use CSS pseudo-classes like :first-child, :last-child, and :nth-child(n) to style specific items without adding classes.

Is it valid to have an empty list?

Technically the HTML spec allows an empty <ul> or <ol>, but it's considered bad practice. If there are no items, omit the list from the HTML and render it dynamically with JavaScript only when items exist.

Can I use divs inside li elements?

Yes. <li> is a block-level element and can contain any flow content, including <div>, <p>, images, headings, or even nested lists. This is common in navigation dropdowns and card lists.

What is the value attribute on li?

The value attribute on an <li> inside an <ol> overrides the number for that item and all following items. For example <li value="10"> makes that item display as 10, and the next item as 11, regardless of their position in the list.