Nested and Description Lists.

Beyond simple lists, HTML allows you to nest lists inside each other and create description lists for terms and definitions.

The Essentials

A nested list is a list inside a list item (<li>).

Nested lists are great for menus and outlines.

<dl> is a Description List.

<dt> defines the Term (the word being defined).

<dd> defines the Description (the definition of the term).

Description lists are perfect for FAQs and metadata.

The most common mistake is putting a <ul> directly inside another <ul>. The sub-list MUST be inside an <li> tag of the parent list.

Browsers automatically change the bullet style (disc, circle, square) as you go deeper into nested unordered lists.

Multi-level dropdown menus on websites are almost always built using nested <ul> and <li> tags, then hidden/shown with CSS.

Screen readers announce <dt> and <dd> as pairs. This is much better for accessibility than using bold text and paragraphs for a glossary.

Placing a sub-list outside of an <li> tag.

Confusing <dt> (term) with <dd> (description).

Using description lists for data that should be in a table.

Forgetting to wrap the entire description structure in <dl> tags.

Create a nested list: 'Fruits' should have a sub-list with 'Apple' and 'Banana'

Create a description list with the term 'HTML' and the description 'Markup Language'

Loading editor...

Production Preview