The dd tag stands for Definition Description which helps to create a definition list in an HTML document. The main purpose of this tag is to create the definition for the term found in the preceding dt (Description Term) tag. The dd tag must be placed within the dl (Description List) tag.
The dd tag is a block-level element that is placed within the body tag. You can insert the paragraphs, line breaks, images, links, lists inside the dd tag. By default, the content of the dd tag has an outer margin on the left side.
Note : For each group (i.e. term and definition pair) within the description list dl , there must be at least one dt tag followed by at least one dd tag.
Possible list to create dd tag:
- A single term followed by a single description.
- A single term followed by multiple descriptions.
- Multiple terms followed by a single description.
- Multiple terms followed by multiple descriptions.
Estimated reading time: 5 minutes
Syntax:
The dd tag contains both an opening dd tag and closing dd tag. The content is written between these two tags.
<dd> Write the Definition Here </dd>
HTML dd Tag:
| HTML dd tag | It provides the definition for the descriptive term. |
| Content categories | None. |
| Permitted content | Flow content. |
| Tag omission | It has both opening and closing tags . But, the end tag may be omitted if this element is immediately followed by another dd element or a dt element. |
| Permitted parents | It is a child element of dl tag. Must be followed by atleast one
| Implicit ARIA role | Definition |
| Permitted ARIA roles | No role permitted |
| DOM interface | HTML Element |
Sample of the HTML dd Tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<h2>Definition list:</h2>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language </dd>
<dd>It is the language for authoring web documents.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dd>It is the language for defining the styles and presentation of an HTML document.</dd>
<dt> JavaScript</dt>
<dd>A scripting language built-in to most browsers and designed to be used with web documents.</dd>
</dl>
</body>
</html>
Result:
Download Sample File:
Sample of HTML dd Tag for Inserting Dialogue:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Conversation between John and Bella</h2>
<dl>
<dt>John</dt>
<dd>Hi!!</dd>
<dd>What's up?</dd>
<dt>Bella</dt>
<dd>Hi.</dd>
<dd>I'm doing well, what about you?</dd>
<dt>John</dt>
<dd>Thanks, everything is fine. What are you doing?</dd>
<dt>Bella</dt>
<dd>I'm going to a party today in the evening. And you?</dd>
<dt>John</dt>
<dd>I'm going to the park with my family. </dd>
</dl>
</body>
</html>
Result:
Attributes:
The dd tag supports the global attributes and the event attributes.
Styling Methods for dd Tag:
You can use the following properties to style an HTML dd Description Definition tag.
Properties to style the visual weight/emphasis/size of the text in dd tag:
- CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- CSS font-size – This CSS property will help to set the size of the font.
- CSS font-weight – This CSS property used to define whether the font should be bold or thick.
- CSS text-transform – This CSS property will control the text case and capitalization.
- CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.
Styles to coloring the text in dd Tag:
- CSS color – This CSS property will specify the color of the text content and decorations.
- CSS background-color – This CSS property helps to set the background color of an element.
Text layout styles for dd Tag:
- CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
- *CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- CSS white-space – This CSS property describes how white-space inside an element is handled.
- CSS word-break – This CSS property decides where the lines should be broken.
Other Properties for dd Tag:
- CSS text-shadow – This CSS property helps to add the shadow to text.
- CSS text-align-last – This CSS property will set the alignment of the last line of the text.
- CSS line-height – This CSS property defines the height of a line.
- CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
- CSS word-spacing – This CSS property specifies the spacing between every word.
Browser Support:
Related Articles:
The post HTML Definition Description Tag appeared first on Share Point Anchor.
Top comments (0)