HTML <details> DetailsTag
Tags: learnhtml, htmld
Published: 2021-02-19 08:40:40

---
title: HTML <details> DetailsTag
published: true
date: 2021-02-17 12:12:01 UTC
tags: LearnHTML,HTMLD
canonical_url: https://sharepointanchor.com/learn-html/html-details-tag/
---

In [HTML](https://sharepointanchor.com/learn-html/ "HTML"), the **details**  **Details tag** is used to **specify the additional details on the web page** that the user can view or hide on demand. It can create an interactive widget that the user can open and close.

The content of a **details** tag should not be visible unless the user clicks it to open. For that, you must apply the **“open”** attribute. This tag is used together with a **summary** tag that helps to set the visible title.

## Syntax:

It contains both an **opening details tag** and **closing /details tag**. The content is written between these two tags.

```

<details> Write your content here </details>

```

### HTML details Tag:
<style> th, td{ padding: 20px; } </style>

| HTML details tag | Generates disclosure widget with additional information |
| Content categories | Flow content, sectioning root, interactive content, palpable content. |
| Permitted content | One <summary> element followed by flow content. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any [HTML](https://sharepointanchor.com/learn-html/ "HTML") element that accepts flow content. |
| Implicit ARIA role | group |
| Permitted ARIA roles | No role permitted |
| DOM interface | HTMLDetailsElement |

## Sample of HTML details Tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Details tag</title>
  </head>
  <body>
<h2>Example for HTML Details tag:</h2>
    <details>
      <summary>Click here to see details</summary>
      <p>Detailed information is here.</p>
    </details>
  </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-23.png)<figcaption>Result</figcaption>

### Download Sample File:

[HTML-details-tag](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-details-tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-details-tag.html)

## Attributes:

The **details** tag supports both the **Global Attributes** and the **Event Attributes**.

<style> th, td{ padding: 20px; } </style>

| Attribute | Value | Description |
| --- | --- | --- |
| open | open | This attribute helps to indicate the **information in the tag** that should initially show in expanded form. |

## Styling Methods for details Tag:

You can use the following properties to style an [HTML](https://sharepointanchor.com/learn-html/ "HTML") Details tag.

### Properties to style the visual weight/emphasis/size of the text in details tag:

- **[CSS](https://sharepointanchor.com/learn-css/ "CSS") font-style** – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- **CSS font-family** – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- **CSS font-size** – This CSS property will help to set the size of the font.
- **CSS font-weight** – This CSS property used to define whether the font should be bold or thick.
- **CSS text-transform** – This CSS property will control the text case and capitalization.
- **CSS test-decoration** – This CSS property specifies the decoration added to text such as **text-decoration-line** , **text-decoration-color** , **text-decoration- style**.

### Styles to coloring the text in details Tag:

- **CSS color** – This CSS property will specify the color of the text content and decorations.
- **CSS background-color** – This CSS property helps to set the background color of an element. 

### Text layout styles for details Tag:

- **CSS text-indent** – This CSS property is used to specify the indentation of the first line in a text block.
- **CSS text-overflow ** – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- **CSS white-space** – This CSS property describes how white-space inside an element is handled.
- **CSS word-break**  – This CSS property decides where the lines should be broken.

### Other Properties for details Tag:

- **CSS text-shadow**  – This CSS property helps to add the shadow to text.
- **CSS text-align-last**  – This CSS property will set the alignment of the last line of the text.
- **CSS line-height** – This CSS property defines the height of a line.
- **CSS letter-spacing** – This CSS property helps to decide the spaces between letters/characters in a text.
- **CSS word-spacing** – This CSS property specifies the spacing between every word.

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/browser-3.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <center> Center Tag](https://sharepointanchor.com/learn-html/html-center-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**
- **[HTML <code> Code Tag](https://sharepointanchor.com/learn-html/html-code-tag/)**

The post [HTML <code><detail></code> DetailsTag](https://sharepointanchor.com/learn-html/html-details-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).