details Tag in HTML

The <details> tag is an HTML5 element that is used to create a disclosure widget. This widget allows you to hide and show content on a web page, such as additional details or options, by clicking on a summary element. In this tutorial, we’ll cover how to use the <details> tag to create a disclosure widget.

Basic Usage

The basic syntax of the <details> tag is as follows:

<details>
<summary>Click to show/hide details</summary>
<p>Additional details go here</p>
</details>

In the example above, the <details> tag contains a <summary> element and a paragraph element. The text within the <summary> element is displayed as a clickable link that can be used to toggle the display of the content within the <details> tag.

By default, the content within the <details> tag is hidden when the page loads. When the user clicks on the <summary> element, the content is displayed. Clicking on the <summary> element again will hide the content.

Customizing the Disclosure Widget

The <details> tag provides several attributes that can be used to customize the disclosure widget, including:

• open: By default, the content within the <details> tag is hidden. You can set the open attribute to open to display the content when the page loads.
• id: You can use the id attribute to give the <details> tag a unique identifier that can be used for styling or scripting purposes.
• class: You can use the class attribute to apply CSS styles to the <details> tag and its child elements.
• style: You can use the style attribute to apply inline CSS styles to the <details> tag and its child elements.

Here’s an example of how to use the open attribute to display the content within the <details> tag when the page loads:

<details open>
<summary>Click to show/hide details</summary>
<p>Additional details go here</p>
</details>

Nested Disclosure Widgets

You can also nest <details> tags to create nested disclosure widgets. Here’s an example:

<details>
<summary>Click to show/hide details</summary>
<p>Additional details go here</p>
<details>
<summary>Nested details</summary>
<p>Nested details go here</p>
</details>
</details>

In the example above, a second <details> tag is nested within the first one. This creates a nested disclosure widget, with the inner widget being displayed only when the outer widget is expanded.

Accessibility Considerations

When using the <details> tag, it’s important to ensure that the widget is accessible to all users, including those who use assistive technologies such as screen readers. Here are some tips for creating accessible disclosure widgets:

• Use descriptive and concise text within the <summary> element to describe the content that will be shown or hidden.
• Ensure that the <summary> element is focusable and interactive, either by using the tabindex attribute or by wrapping it in an <a> tag.
• Provide a way for users to expand and collapse the widget using the keyboard, such as using the Enter or Space key.
• Add appropriate ARIA attributes to the <details> and <summary> elements to improve accessibility.

Conclusion

The <details> tag is a useful HTML5 element that allows you to create disclosure widgets on a web page. With its simple syntax and customizable attributes, it’s easy to create and style disclosure widgets to suit your needs.

When using the <details> tag, it’s important to keep accessibility in mind and follow best practices to ensure that the widget is usable for all users. By following these tips, you can create disclosure widgets that are not only functional and user-friendly, but also accessible to everyone.

Overall, the <details> tag is a great tool to have in your web development toolbox. With its versatility and ease of use, it’s a useful element for adding interactivity and functionality to your web pages.