Table of contents

HTML <dt> Tag: Definition, Syntax, and Examples

What is HTML <dt> Tag?

The HTML dt tag is used to define a term or name inside a description list. It is used together with the dl tag and dd tag. The dt tag represents the item being described, while the dd tag represents the description. This tag is important because it helps organize definitions, glossaries, product features, FAQ structures, and labeled content in a clean and semantic way. It improves readability and also helps search engines understand relationships between terms and their explanations.

The dt tag always appears inside a dl tag, and usually one or more dd tags follow each dt tag to provide related descriptions.

Syntax of the HTML <dt> Tag

plaintext
<dt>Term or Title</dt>

This tag simply wraps the term being defined. It must appear inside a description list created with the dl tag.

Examples of HTML <dt> Tag

Example 1: Basic HTML dt Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <dl>
    <dt>HTML</dt>
    <dd>A markup language used to create webpages.</dd>

    <dt>CSS</dt>
    <dd>A stylesheet language used to style webpages.</dd>
  </dl>

</body>
</html>

In this example, the dt tag is used to define the terms HTML and CSS, and each dd tag explains the meaning of the term.

Example 2: SEO Optimized dt Tag 

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <dl>
    <dt>Scholar247 Web Tutorials</dt>
    <dd>Detailed guides for learning HTML, CSS, and JavaScript.</dd>

    <dt>Digital Marketing Tips - Scholar247</dt>
    <dd>SEO strategies to improve ranking and online visibility.</dd>
  </dl>

</body>
</html>

This example uses SEO-friendly terms that help search engines understand the topic. By including relevant keywords like “Web Tutorials” and “SEO Strategies,” the content becomes more search-friendly.

Attributes of the HTML <dt> Tag

The dt tag does not support any specific attributes.
It only contains text that represents a term or label within a description list.

However, global attributes such as id, class, title, and style can be applied if needed for styling or accessibility.

Best Practices for HTML <dt> Tag

• Use the dt tag only inside a dl tag to maintain proper HTML structure.
• Keep dt terms short and clear for better readability.
• Use dd tags immediately after dt tags to provide clear descriptions.
• Use semantic description lists for glossaries, FAQs, product specs, and structured content.
• Avoid placing block elements inside dt unless necessary for design.

FAQs About  HTML <dt> Tag

What is the purpose of the HTML dt tag?

The dt tag is used to define a term or name inside a description list, helping structure definitions and descriptions clearly.

Does the dt tag affect SEO?

Yes. Using proper semantic tags like dl, dt, and dd helps search engines understand the relationship between terms and descriptions, improving overall content structure.

Can I use multiple dt tags before a single dd?

Yes. Multiple dt tags can define terms that share the same dd description.

Can the dt tag be styled with CSS?

Yes. You can apply CSS using class, id, or style attributes to change its appearance.

Is the dt tag required inside every dl list?

Yes. A dl list requires dt and dd elements to be meaningful. The dt tag defines the term, while the dd tag explains it.

HTML

Related Articles