UI Component Lab 日本語

← All components

Data display

Description list

Pairs of a name and its value or explanation, such as the answers on a confirmation page.

Name
Taro Yamada
Date of birth
April 1, 1990
Email
taro@example.com
Address
1-2-3 Kasumigaseki, Chiyoda-ku, Tokyo

Also known as

How to recognize it

Rows with a short name on the left (or above) in gray and its value next to it, often separated by thin lines.

Behavior

  • It is not interactive. It is used for reading.
  • This demo uses <dl> with a <dt> (name) and <dd> (value) in each row, so screen readers can treat them as pairs.

Keyboard

KeyAction
—None.

Usage notes

  • Use it for repeated name–value pairs: glossaries, FAQs, specifications or a summary of answers.
  • Use a table when values need to be compared across rows and columns. Use a plain list when there are no names.
  • List: A description list pairs each name with its value; a list shows single items.
  • Table: A description list shows name–value pairs for one subject; a table compares values across rows and columns.

Sources