In HTML, the details Details tag is used to specify the additional details on the web page that the user can view or hide on demand. It can create an interactive widget that the user can open and close.
The content of a details tag should not be visible unless the user clicks it to open. For that, you must apply the “open” attribute. This tag is used together with a summary tag that helps to set the visible title.
Syntax:
It contains both an opening details tag and closing /details tag. The content is written between these two tags.
<details> Write your content here </details>
HTML details Tag:
th, td{ padding: 20px; }
| HTML details tag | Generates disclosure widget with additional information |
| Content categories | Flow content, sectioning root, interactive content, palpable content. |
| Permitted content | One element followed by flow content. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts flow content. |
| Implicit ARIA role | group |
| Permitted ARIA roles | No role permitted |
| DOM interface | HTMLDetailsElement |
Sample of HTML details Tag:
<!DOCTYPE html>
<html>
<head>
<title>HTML Details tag</title>
</head>
<body>
<h2>Example for HTML Details tag:</h2>
<details>
<summary>Click here to see details</summary>
<p>Detailed information is here.</p>
</details>
</body>
</html>
Result:
Download Sample File:
Attributes:
The details tag supports both the Global Attributes and the Event Attributes.
th, td{ padding: 20px; }
| Attribute | Value | Description |
|---|---|---|
| open | open | This attribute helps to indicate the information in the tag that should initially show in expanded form. |
Styling Methods for details Tag:
You can use the following properties to style an HTML Details tag.
Properties to style the visual weight/emphasis/size of the text in details 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 details 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 details 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 details 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 DetailsTag appeared first on Share Point Anchor.
Top comments (0)