Details tag as a descriptive element
According to MDN :
The HTML Details Element (
This is a simple semantic of how it looks like:
<details> <summary>System Requirements</summary> Something small enough to escape casual notice. </details>
Basically the details tag always comes with summary tag as a label. If you remove summary, the “Details” text will be shown instead. Also we will see a triangle as a symbol of a disclosure widget which can be open and close.
Therefore they can be very useful creating dropdown menus inside the navigation bar. This is a pen I created to demonstrate it a bit more:
We could click on any of the triangles and it opens up the sub menu. Each of the menu links are wrapped by a details tag. The summary holds the label of the tag which could be a link itself.
In the above example contact tab is not a link itself but it has a dropdown menu with a link inside.
The services tab has a dropdown called about us and that as well has a dropdown with links. We see how flexible it could be and will solve problems we used to have with non clickable menu links or having menu labels also clickable as well.
In addition to details tag we need to know about summary tag. We specify the label of the details tag inside summary tag. In other words, summary tag defines what the details tag about. By the way details tag is an element to give us more information about something that is not visible by default and could be shown on demand.
Thank you for reading.