W3docs
en
Log in

HTML <details> Tag

The <details> tag contains additional information that the user can open and view. Tag attributes and examples.

The <details> tag is one of the HTML5 elements. It creates a disclosure widget and contains additional details that the user can open and view. By default, the content of the tag is not displayed. In order to display the contents, you must apply the open attribute. A disclosure widget is commonly presented with a small triangle that twists (or rotates) to show open/closed state.

The <summary> tag sets the visible title, which, when clicked, will open/close additional information. If there is no header, then the browser will show the header "More details", by default.

Syntax

The <details> tag comes in pairs. The content is written between the opening (<details>) and closing (</details>) tags.

Example of the HTML <details> tag:

HTML <details> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <details>
      <summary>Click to see details</summary>
      <p>Detailed information is here.</p>
    </details>
  </body>
</html>
Try it Yourself »

Result

details example

Example of the HTML <details> tag placed inside a <form> tag:

HTML <details> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="action_form.php" method="get">
      <details>
        <summary>Departure airport:</summary>
        <input type="text" list="airports" name="airports" />
        <datalist id="airports">
          <option value="Birmingham">
          <option value="Cambridge">
          <option value="Oxford">
          <option value="Bangor">
        </datalist>
        <input type="submit" value="confirm" />
      </details>
    </form>
  </body>
</html>
Try it Yourself »

Attributes

AttributeValueDescription
openopenIndicates that the information in the tag should initially be shown in expanded form.

The <details> tag also supports the Global Attributes and the Event Attributes.

How to style an HTML <details> Tag

details {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em;
}
summary {
  font-weight: bold;
  cursor: pointer;
}

You can also customize the disclosure marker using the ::marker pseudo-element.

Practice

Practice

What is true about the HTML <details> tag?