What Is the HTML details Tag Used For?

The HTML details tag is used to create a block that specifies additional details that the user can expand or collapse. For example, by default, a collapsed/closed details block can be displayed in the following way:

<details>
    <p>
        Details in here will be hidden till the user expands/opens the details block.
    </p>
</details>

Typically, the details block is shown onscreen with a small triangle which rotates to indicate open/closed status, with a label next to it. When the user interacts with this block, it will expand/collapse and show/hide the details depending on its state. You may specify the open attribute to the details tag, to make the details appear expanded by default, for example, like so:

<details open>
    <p>
        Details in here are shown by default, till the user interacts with the details block and collapses/closes it.
    </p>
</details>

The details tag is often used together with a summary element, which can be provided to show a label or summary when the details block is collapsed/closed. This can be useful, for example, to create order summaries, features list, etc., that the user can show/hide on demand when/if they require it. For example:

<details>
    <summary>Grand Total: $500.00</summary>
    <ul>
        <li>Shipping: $5.00</li>
        <li>Order Total: $485.00</li>
        <li>Tax: $10.00</li>
    </ul>
</details>

When the summary tag is not present, depending on the browser you're using, a default label might be shown when the details block is closed/collapsed.