New in HTML5.

<details> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
What does <details> HTML Tag do?
The <details> element is used to pair a <summary> statement with additional related details. The <summary> is displayed, and a user can view or hide additional details by clicking on the summary.
Display
block
Usage
textual

Code Example

<details>
<summary>Visible Summary of Details</summary>
This part won't be visible until the user chooses to see it.
</details>
Visible Summary of Details This part won't be visible until the user chooses to see it.

What Sort of Details?

The details element is appropriate for things like copyright notices and other bits of information that you want on your webpage, but don’t need to be immediately displayed for all to see. However, if you get creative with the element, there’s quite a bit more that can be done. For example, you could use details as an easy FAQ solution if you don’t want to mess with jQuery accordions. How might that look? Let’s see what we can do with just a few lines of targeted CSS.

<style> .faq details {   border: 1px solid #ddd;   border-radius: 2px;   margin: 10px; } .faq summary {   font-weight: bold;   background-color: #ddd;   font-size: 1.2em;   padding-left: 5px; } .faq p {   font-size: .9em;   margin-left: 25px; } </style> <div class="faq">   <details><summary>What is the meaning of life?</summary>     <p>You don't mess around, do you? Wow. Let's see. The meaning of the word "life" is: the state of being alive. See what I did there? <wink>.</p>   </details>   <details><summary>Are you in your pajamas?</summary>     <p>Well, isn't that a bit personal? I work from home! What do <em>you</em> think!</p>   </details>   <details><summary>Is this example over yet?</summary>     <p>Yes. Yes it is. Are you happy?</p>   </details> </div> 

How will our browser handle that bit of HTML and CSS?

.faq details{border: 1px solid #ddd; border-radius: 2px; margin: 10px;}.faq summary{font-weight: bold; background-color: #ddd; font-size: 1.2em; padding-left: 5px;}.faq p{font-size: .9em; margin-left: 25px;}

What is the meaning of life?

You don’t mess around, do you? Wow. Let’s see. The meaning of the word “life” is: the state of being alive. See what I did there? <wink>.

Are you in your pajamas?

Well, isn’t that a bit personal? I work from home! What do you think!

Is this example over yet?

Yes. Yes it is. Are you happy?

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for details

iefirefoxchromeedgesafariopera
Not supported.Not supported.45Not supported.934