Description List in HTML

Description list in HTML is created with the <dl> element. It is used for groups of terms and descriptions, names and values, questions and answers, metadata, glossary entries, settings, specifications, and other paired information.

A description list is different from an ordered or unordered list. Instead of simple list items, it uses <dt> for the term or name and <dd> for the description or value. This makes it useful for content where each item needs an explanation.

In this article, we will understand the <dl>, <dt>, and <dd> tags, basic syntax, multiple descriptions, multiple terms, real use cases, accessibility, styling, mistakes, and best practices for description lists.

What is a Description List in HTML?

A description list represents a set of associated terms and descriptions. Earlier, many developers called it a definition list, but modern HTML uses the broader idea of a description list because it can represent more than dictionary definitions.

<dl>
  <dt>HTML</dt>
  <dd>The markup language used to structure web pages.</dd>

  <dt>CSS</dt>
  <dd>The stylesheet language used to design web pages.</dd>
</dl>

In this example, HTML and CSS are terms. The descriptions explain each term. This is more meaningful than using plain paragraphs because the relationship between the term and description is built into the markup.

Use a description list when each item has a name, term, label, or key connected to one or more descriptions.

The dl, dt, and dd Tags

A description list uses three main tags. The <dl> element wraps the whole list. The <dt> element defines a term, name, or label. The <dd> element defines the description, explanation, or value for that term.

Basic Syntax of Description List

The usual pattern is one <dt> followed by one <dd>. You can repeat this pattern as many times as needed. Keep the source readable with spacing when the descriptions are long.

<dl>
  <dt>Browser</dt>
  <dd>A software application used to access and display web pages.</dd>

  <dt>Server</dt>
  <dd>A computer or program that provides resources to clients.</dd>
</dl>

This structure is useful for glossaries because the relationship is term-to-explanation. It is also useful in technical documentation where many concepts need short explanations.

Multiple Descriptions for One Term

A single term can have more than one description. This is useful when a term needs multiple explanations, examples, notes, or values. The descriptions should still clearly belong to the term before them.

<dl>
  <dt>HTML</dt>
  <dd>HTML stands for HyperText Markup Language.</dd>
  <dd>It defines the structure of content on the web.</dd>
</dl>

Multiple descriptions can make a description list more flexible than a simple key-value table. However, if the information becomes heavily tabular with rows and columns, an HTML table may be better.

Multiple Terms for One Description

Description lists can also group multiple terms before one description. This is useful when two names, aliases, or related labels share the same explanation.

<dl>
  <dt>JS</dt>
  <dt>JavaScript</dt>
  <dd>A programming language used to add behavior to web pages.</dd>
</dl>

This pattern is useful in glossaries and documentation where an abbreviation and full name refer to the same concept. Keep the grouping clear so readers do not become confused.

Description List for Key-Value Data

Description lists are useful for key-value information such as product specifications, user profile details, article metadata, settings, and contact information. In these cases, the <dt> acts like the key and <dd> acts like the value.

<dl>
  <dt>Author</dt>
  <dd>NerdsDoStuff</dd>

  <dt>Category</dt>
  <dd>HTML Tutorial</dd>

  <dt>Reading Time</dt>
  <dd>8 minutes</dd>
</dl>

This is often cleaner than using a table when the data is simple and does not need multiple columns. A table is better for comparing several records, while a description list is better for describing one set of related properties.

Description List vs Ordered and Unordered Lists

Unordered lists use <li> items. Ordered lists also use <li> items but add sequence. Description lists do not use <li>. They use term and description pairs.

Accessibility of Description Lists

Proper description-list markup communicates relationships between terms and descriptions. This is better than using random bold labels followed by paragraphs, especially when the page contains many definitions or values.

Do not use a description list only for visual indentation. Use it when there is a real relationship between a term and its description. If the content is just a normal list of items, use <ul> or <ol> instead.

Styling Description Lists

By default, browsers usually display <dd> with indentation. CSS can change this layout. Many websites style description lists as two-column metadata blocks, glossary layouts, or compact definition cards.

<dl class="spec-list">
  <dt>Language</dt>
  <dd>HTML</dd>

  <dt>Type</dt>
  <dd>Markup</dd>
</dl>

As with other HTML elements, CSS should handle appearance while HTML handles meaning. Do not choose description lists only because the default indentation looks nice.

Real World Use Cases

Description lists appear in API documentation, product detail pages, glossary sections, support pages, profile summaries, changelog metadata, form review screens, and tutorial references. They work well when information is naturally paired.

For example, a course page may show duration, level, language, prerequisites, and author as a description list. A glossary may list terms and explanations. A settings page may show option names and what each option does. These are stronger use cases than ordinary bullet lists.

SEO and Content Notes

Description lists can make explanatory content clearer. Search engines can read the text, but the main value is better structure for users. A glossary with real <dl> markup is easier to maintain and understand than a long sequence of bold terms and plain paragraphs.

For tutorial content, description lists are useful when summarizing attributes, terms, definitions, or configuration values. They make technical explanations feel organized without forcing everything into a table.

Description List vs Paragraph Labels

A common alternative to a description list is writing a bold label followed by a paragraph. That can work visually, but it does not express the relationship as clearly in HTML. A description list tells the document that the label and description belong together as a pair.

For a small one-off label, a paragraph may be fine. For repeated term-description content, a description list is cleaner. This is especially true in glossaries, attribute references, settings pages, profile details, and specification blocks.

Maintaining Description Lists

Description lists are easy to maintain when terms and descriptions are kept short and consistent. If descriptions become very long, consider whether each term needs a separate heading section instead. A description list should help scanning, not hide large sections inside one list.

When updating a description list, check that every description still belongs to the correct term. In technical content, outdated values can be misleading. A clean <dl> structure makes these relationships easier to audit during editing.

Common Description List Patterns

Useful patterns include glossary entries, attribute explanations, command options, product specifications, contact details, article metadata, and form review summaries. In each case, a name or label is connected to an explanation or value.

For HTML tutorials, description lists work well when explaining attributes such as href, src, alt, title, and target. The attribute name becomes the term, and the explanation becomes the description.

Quick Review Checklist

Before using a description list, ask whether each entry has a clear term and a clear description. If the content is only a group of points, an unordered list is simpler. If the content compares several columns across many rows, a table is more appropriate.

Also check whether the descriptions are similar in depth. If one term needs a full article-sized explanation, it may deserve its own heading instead of being hidden inside a description list.

Best Practices

• Use <dl> for terms and descriptions or key-value content.
• Use <dt> for the term, name, label, or key.
• Use <dd> for the explanation, value, or description.
• Do not use <li> inside a basic description list.
• Use tables instead when the data needs row-column comparison.
• Keep descriptions clear and connected to their terms.
• Use CSS for visual layout, not incorrect HTML structure.

Common Mistakes

A common mistake is using description lists for ordinary bullet points. If there is no term-description relationship, use an unordered list instead. Another mistake is using tables for simple key-value content where a description list would be cleaner.

Beginners may also forget that <dt> and <dd> belong inside <dl>. Keeping the structure valid makes the markup easier to read and more reliable.

FAQs

Which tag is used for description list in HTML? 3

The <dl> tag is used to create a description list in HTML.

What are dt and dd in HTML? 3

<dt> represents the term or name, and <dd> represents the description or value.

Is description list the same as definition list? 3

Older usage often called it a definition list, but modern HTML treats it as a broader description list for terms, values, and descriptions.

Can one dt have multiple dd elements? 3

Yes. One term can have multiple descriptions if they all belong to that term.

Should I use dl or table for specifications? 3

Use <dl> for simple key-value specifications. Use a table when you need multiple rows and columns for comparison.