HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <dt> Tag


Concept

The <dt> (Definition Term) tag in HTML is a vital component in crafting description lists, often used to define terms, concepts, or names within various fields. It’s typically paired with the <dd> (Description Details) tag to provide a clear and concise explanation of the term.

Implementation

Example 1: Description List for Programming Languages

<dl>   <dt>Python</dt>   <dd>A high-level, interpreted programming language known for its simplicity.</dd>   <dt>Java</dt>   <dd>A versatile programming language used in web development, mobile apps, and more.</dd> </dl> 

Example 2: Multiple Descriptions for a Single Term (Planets)

You can use multiple <dd> tags for a single <dt> to provide various facts about a term.

<dl>   <dt>Earth</dt>   <dd>The third planet from the Sun.</dd>   <dd>Only known planet to support life.</dd> </dl> 

Try it out below:

Loading

Example 3: Using CSS to Style a List of Famous Authors

<style>   dt {     font-weight: bold;     color: darkblue;   }   dd {     margin-left: 20px;     color: darkgreen;   } </style> <dl>   <dt>George Orwell</dt>   <dd>Author of "1984" and "Animal Farm."</dd>   <dt>J.K. Rowling</dt>   <dd>Creator of the "Harry Potter" series.</dd> </dl> 
Try it out below:
Loading

Attributes

Attribute Description
Global Attributes The <dt> tag supports all the global attributes in HTML.
Event Attributes The <dt> tag also supports all the event attributes in HTML.

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

Default CSS Settings

dt {   display: block; } 

Conclusion

The <dt> tag offers a structured way to present terms and their descriptions in various contexts, from programming languages to famous authors.


By understanding how to use and style the <dt> tag, you can create engaging and informative content that caters to different audiences.