Markup CityISSUE #20 of 39

lists · ul · ol · dl

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysLists come in three kinds: unordered <ul>, ordered <ol>, and description <dl> — each holding list items.

<ul> makes a bulleted list, <ol> a numbered one; both contain <li> items. <dl> is a description list of term/definition pairs (<dt>/<dd>).

Lists nest, so they're the backbone of nav menus and outlines. Reach for an ordered list only when sequence matters (steps, rankings); otherwise unordered is the default.

Power-ups you unlock

<ul> = bullets · <ol> = numbers · both hold <li>
<dl> pairs <dt> (term) with <dd> (definition)
Lists nest — they power nav menus and outlines
Use <ol> only when order matters

The Unclosed Tag attacks — common mistakes

Putting text directly in <ul> instead of inside <li>
Faking a list with <br> and bullet characters
Using <ol> when order is irrelevant (or <ul> for ranked steps)

Boss battleBuild a nested list: a <ul> where one <li> contains its own <ol> of two steps.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body>
  <ul><li>unordered</li><li>bullet list</li></ul>
  <ol><li>first step</li><li>second step</li></ol>
  <dl><dt>HTML</dt><dd>the markup language</dd></dl>
</body></html>

▶ Open the interactive comic issue

‹ Tables · Rows · Cells · Headers Block Vs Inline · The Two Flow Modes ›