Description & Nested Lists

<dl> is the description list. It groups any set of term-value pairs using two inner tags: <dt> for the term and <dd> for its description. Despite the old name, definition list, HTML5 broadened the scope: <dl> is not only for dictionaries. Metadata panels, FAQ sections, and any key-value grouping all fit.

A nested list is just a <ul> or <ol> placed inside an <li>. Because list items can hold any block content, nesting comes naturally, and the browser indents each level automatically.

When you reach for two <p> tags to write a term and its description, a screen reader reads them as two unrelated paragraphs with no structural connection. <dl> tells the browser, and any tool reading the page, that each <dt> and the <dd> below it belong together as a pair.

Nested lists communicate hierarchy. A flat <ul> of breadcrumbs and sourdough reads as equals. Moving sourdough inside a nested list under bread tells the reader that sourdough is a kind of bread, not a sibling of it. The structure carries information that prose alone cannot.

Inside a <dl>, alternate <dt> and <dd> elements. The pairings are flexible: one <dt> can have multiple <dd> entries when a term has several meanings, and multiple <dt> elements can share one <dd> when several terms have the same description. There is no mandatory one-to-one ratio.

For nested lists, place the child <ul> or <ol> inside the <li> that owns it, before the closing </li> tag. This is where the nesting lives in the content model. A common mistake is placing the nested list after the closing </li> of the parent item, which makes it a sibling, not a child, and breaks the hierarchy both visually and semantically.