DEV Community

Cover image for HTML tags | dl-dt-dd
Carlos Espada
Carlos Espada

Posted on • Edited on

1

HTML tags | dl-dt-dd

They are used to represent a list of descriptions. With <dl> (description list) we group the elements in a list, with <dt> (description term) we specify each term that we want to define and with <dd> (description details) we provide a description or definition for the <dt> corresponding.

It is often used for glossaries or to display data in the form of key-value pairs.

The possible combinations are:

  • A term + a definition (a <dt> followed by a <dd>)
  • Multiple terms + one definition (multiple <dt> followed by a <dd>)
  • One term + multiple definitions (one <dt> followed by multiple <dd>)
  • Multiple terms + multiple definitions (multiple <dt> followed by multiple <dd> in key-value format)

<dt>/<dd> pairs can be grouped within a <div> to use microdata, give global attributes to a group, or simply to assign styles.

These tags should not be used simply to create indentation in the content (the <dd> usually brings it by default), to achieve that effect you must use CSS.

<dl> has no implicit ARIA role, <dt> has term, and <dd> has definition.

Due to the different behavior that assistive technologies have when advertising this type of content, it is very important to ensure that the content of each item on the list is written in a way that communicates its relationship with the other items on the list in the group.

  • Type: block / block / block
  • Self-closing: No / No / No
  • Semantic value: No / No / No

Definition and example <dt> - Definition and example <dt> - Definition and example <dd> | Support

Agent.ai Challenge image

Congrats to the Agent.ai Challenge Winners 🏆

The wait is over! We are excited to announce the winners of the Agent.ai Challenge.

From meal planners to fundraising automators to comprehensive stock analysts, our team of judges hung out with a lot of agents and had a lot to deliberate over. There were so many creative and innovative submissions, it is always so difficult to select our winners.

Read more →

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay