HTML Lists

Represent ordered, unordered, and descriptive groups.

Lists identify related items as a group. Use ul when order does not change meaning, ol when sequence or rank matters, and dl for name–value or term–description groups. Correct list markup gives assistive technology the group type and item count automatically.

Build unordered and ordered lists

ul and ol contain li children. Each li can contain phrasing content or a richer structure such as paragraphs and a nested list. Use start, reversed, or value only when the numbering itself carries information.

<h2>Review checklist</h2>
<ul>
  <li>Validate the document</li>
  <li>Test keyboard navigation</li>
  <li>Review image alternatives</li>
</ul>

<h2>Publishing steps</h2>
<ol>
  <li>Write the draft</li>
  <li>Request a review</li>
  <li>Publish the approved version</li>
</ol>

• Put li directly inside ul or ol.
• Use ol when order changes meaning.
• Keep parallel grammatical structure across items.
• Nest a new list inside the li that introduces it.
• Do not type bullets or numbers manually.

Represent terms and values with dl

A description list contains one or more dt terms followed by one or more dd descriptions. It works for glossaries, metadata, specifications, and other name–value groups; it is not limited to dictionary definitions.

<dl>
  <dt>HTML</dt>
  <dd>Defines document structure and meaning.</dd>

  <dt>CSS</dt>
  <dd>Controls presentation and layout.</dd>

  <dt>JavaScript</dt>
  <dd>Adds behavior and application logic.</dd>
</dl>