HTML <details> Tag Tutorial

📘 Introduction

The <details> and <summary> tags are HTML5 semantic elements used to create expandable and collapsible content without using JavaScript.

They are commonly used for FAQs, Help sections, Read More / Read Less content, and extra information blocks.

The <details> tag creates a disclosure widget that users can open or close.

⭐ Key Points

🧩 Syntax

<details>
  <summary>Caption</summary>
  <p>Content goes here</p>
</details>

💻 Example (Live Demo)

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and structure web pages. It forms the backbone of web development.

What is CSS?

CSS (Cascading Style Sheets) is used to style and layout HTML elements. It controls colors, spacing, fonts, borders, and positioning.

What is JavaScript?

JavaScript is a lightweight programming language used to create dynamic and interactive web features.

What is C Language?

C is a general-purpose programming language created by Dennis Ritchie at Bell Labs. It is widely used for system software and embedded systems.

🔓 Open Attribute

The open attribute keeps the details expanded by default.

<details open>
  <summary>Click to collapse</summary>
  <p>This content is visible by default.</p>
</details>

Example:

Course Details

This course covers HTML, CSS, and JavaScript fundamentals.