Skip to main content

Use description list elements for definition lists

Medium
accessibilityreacthtml

What​

When representing key-value pairs or definitions, check that the code uses the <dl> element along with <dt> for terms and <dd> for descriptions. Violating code may misuse list elements or generic containers.

Why​

Using <dl> with <dt> and <dd> provides clear semantics for definitions and related content, ensuring that assistive technologies can interpret the content structure accurately.

Fix​

Replace non-semantic lists or generic containers with a properly structured description list using <dl>, <dt>, and <dd> to convey relationships between terms and their definitions.

Examples​

Example 1:​

Positive​

This example correctly uses <dl>, <dt>, and <dd> to convey definitions semantically.

import React from 'react';

const DefinitionList: React.FC = () => {
  return (
    <dl>
      <dt>HTML</dt>
      <dd>A markup language for creating web pages.</dd>
      <dt>CSS</dt>
      <dd>A style sheet language used for describing the look of a document.</dd>
      <dt>JavaScript</dt>
      <dd>A programming language that adds interactivity to web pages.</dd>
    </dl>
  );
};

export default DefinitionList;

Negative​

This example misuses an unordered list (<ul>) instead of a description list (<dl>, <dt>, <dd>), losing semantic clarity.

import React from 'react';

const DefinitionListIncorrect: React.FC = () => {
  return (
    <ul>
      <li><strong>HTML:</strong> A markup language for creating web pages.</li>
      <li><strong>CSS:</strong> A style sheet language used for describing the look of a document.</li>
      <li><strong>JavaScript:</strong> A programming language that adds interactivity to web pages.</li>
    </ul>
  );
};

export default DefinitionListIncorrect;