Questions
3 of 3
1Difference between ordered and unordered lists?
2Can you nest lists in HTML? How?
3What is the <dl> tag used for ?
HTMLHTML
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
03 / 03

What is the <dl> tag used for ?

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.

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

Scenario Questions

0-2 years experience
  1. 1

    We need to display a list of terms and their definitions on a product page. How would you markup this using HTML tags?

  2. 2

    If you accidentally used <ul> instead of <dl> for a term‑definition list, what visual or accessibility issues might arise?

  3. 3

    Write a short HTML snippet for a glossary entry where the term is 'API' and the definition explains its purpose.

2-5 years experience
  1. 1

    Your 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. 2

    During QA a screen reader reads the term and definition out of order. How would you troubleshoot if the <dl> markup is causing it?

  3. 3

    Why might a CSS reset break the default styling of <dt> and <dd>, and how would you fix it?

5-8 years experience
  1. 1

    You'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. 2

    Our 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. 3

    If you need to support older browsers that don’t fully support <dl> semantics, what fallback strategies would you implement?

8+ years experience
  1. 1

    The 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. 2

    At 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. 3

    How 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?