REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<dt>

AI & DATA SCIENCE // dt-tag

The <dt> element represents a term or name in a description list (<dl>), immediately followed by one or more <dd> descriptions of it.

Syntax

<dl>
  <dt>Closure</dt>
  <dd>A function bundled with references to its surrounding scope.</dd>
</dl>

Deep Dive Course

**`<dt>`** must live inside a `<dl>`, and is meant purely as the 'label' half of a term/description pair — the actual explanation goes in the following `<dd>`. You can have multiple `<dt>` elements in a row before a `<dd>` if several terms share the exact same description (e.g. two synonyms for the same concept).

1Understanding <dt>

`<dt>` must live inside a <dl>, and is meant purely as the 'label' half of a term/description pair — the actual explanation goes in the following <dd>. You can have multiple <dt> elements in a row before a <dd> if several terms share the exact same description (e.g. two synonyms for the same concept).

💡

Multiple consecutive <dt> elements before a single <dd> is valid HTML — useful for listing synonyms or aliases that share one definition.

editor.html

<dl>
  <dt>Frontend</dt>
  <dt>Client-side</dt>
  <dd>Code that runs in the user's browser.</dd>
</dl>

localhost:3000

2Practical Example

Here is a real-world application of <dt> showing how it is used in production HTML.

editor.html

<!-- Term with a code example as part of a longer description -->
<dl>
  <dt>Array.map()</dt>
  <dd>Creates a new array by applying a function to each element, e.g. <code>[1,2,3].map(x =&gt; x*2)</code>.</dd>
</dl>

localhost:3000

3Best Practices

Follow these guidelines when working with <dt>:

1. Always follow a <dt> with at least one <dd>

2. Keep <dt> text short — it's a term/label, not the explanation itself

3. Use multiple consecutive <dt>s for true synonyms sharing one definition

⚠️

Tip: Multiple consecutive <dt> elements before a single <dd> is valid HTML — useful for listing synonyms or aliases that share one definition.

editor.html

<dl>
  <dt>Frontend</dt>
  <dt>Client-side</dt>
  <dd>Code that runs in the user's browser.</dd>
</dl>

localhost:3000

Examples

Example 01Basic Usage

<dl>
  <dt>Frontend</dt>
  <dt>Client-side</dt>
  <dd>Code that runs in the user's browser.</dd>
</dl>

Example 02Advanced Example

<!-- Term with a code example as part of a longer description -->
<dl>
  <dt>Array.map()</dt>
  <dd>Creates a new array by applying a function to each element, e.g. <code>[1,2,3].map(x =&gt; x*2)</code>.</dd>
</dl>

Best Practices

Always follow a
with at least one
Keep
text short — it's a term/label, not the explanation itself
Use multiple consecutive
s for true synonyms sharing one definition

Interview Question

Is it valid to have two <dt> elements in a row before a single <dd>? What does that represent?▼

Hint: Think about terms that are synonyms of each other.

Yes, it's valid — the HTML spec allows a group of consecutive <dt> elements to share one or more following <dd> elements, which is the correct way to represent synonyms or aliases that all map to the same definition, like listing both 'Frontend' and 'Client-side' as terms before a single shared description.

Exercises

EasyPractice using <dt> in a real scenario.

View Solution

<dl>
  <dt>Frontend</dt>
  <dt>Client-side</dt>
  <dd>Code that runs in the user's browser.</dd>
</dl>

Frequently Asked Questions

Is it valid to have two <dt> elements in a row before a single <dd>? What does that represent?▼

Yes, it's valid — the HTML spec allows a group of consecutive

elements to share one or more following

elements, which is the correct way to represent synonyms or aliases that all map to the same definition, like listing both 'Frontend' and 'Client-side' as terms before a single shared description.

Related Functions

dl-tagdd-tag