03 / 03

What is the <dl> tag used for ?

Difficulty: 2/10
definition list, semantic HTML, accessibility

The <dl> Tag in HTML

The <dl> tag in HTML is used to create a description list (also called a definition list). It is useful for pairing terms with their corresponding descriptions, such as glossaries, FAQs, or metadata lists.

Basic Structure of a Description List
Key Points About <dl>
  1. 1<dl> defines the description list container.
  2. 2<dt> defines a term (the word or phrase being described).
  3. 3<dd> defines the description or definition of the term.
  4. 4

    You can have multiple <dd> elements for a single <dt>.

  5. 5

    Commonly used for glossaries, FAQs, and metadata presentation.

Scenario Questions

0-2 years experience

  1. 1We need to display a list of terms and their definitions on a product page. How would you markup this using HTML tags?
  2. 2If you accidentally used <ul> instead of <dl> for a term‑definition list, what visual or accessibility issues might arise?
  3. 3Write a short HTML snippet for a glossary entry where the term is 'API' and the definition explains its purpose.

2-5 years experience

  1. 1Your team is refactoring a legacy help center that uses tables for term‑definition pairs. How would you replace them with <dl> and what challenges might you face?
  2. 2During QA a screen reader reads the term and definition out of order. How would you troubleshoot if the <dl> markup is causing it?
  3. 3Why might a CSS reset break the default styling of <dt> and <dd>, and how would you fix it?

5-8 years experience

  1. 1You're building a component library that includes a reusable definition‑list component. What API would you expose, and how would you ensure it works with custom styling and accessibility requirements at scale?
  2. 2Our documentation site needs to render thousands of definition lists efficiently. What performance considerations are there when using <dl> versus other markup, and how would you mitigate any issues?
  3. 3If you need to support older browsers that don’t fully support <dl> semantics, what fallback strategies would you implement?

8+ years experience

  1. 1The company is migrating a massive legacy knowledge base from custom HTML structures to semantic HTML, including <dl> for definitions. How would you plan the migration to minimize risk, ensure accessibility compliance, and coordinate across multiple product teams?
  2. 2At an enterprise level, you need to enforce consistent use of <dl> across all internal documentation tools. What governance, linting, and CI processes would you put in place?
  3. 3How would you evaluate the impact of switching to <dl> on SEO and search indexing for a large e‑commerce site’s product specifications, and what metrics would you monitor?

Follow-up Questions

  • What other HTML elements could you use if a definition list isn’t appropriate?
  • How does using <dl> impact SEO or search indexing?
  • Can you describe how a screen reader navigates <dt> and <dd> elements?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.