Summary -

In this topic, we described about the <details> tag along with detailed example.

The <details> tag is new in HTML5. Used to specify additional details. The additional details can view or hide on demand by the user. The <details> tag used to represent additional details.

The <details> tag can be used along with <summary> tag for creating interactive widget to view or hide as required. The content in <details> tag should not be visible and the content in <summary> tag is visible and the clicking on same would display the content of <details> tag.

Any content can be coded inside <details> tag. The basic tag representation like <details></details> with the <summary> tag inserted between the opening and closing tags.

Syntax -

<details>.. text here.. </details>

Example -

<!DOCTYPE html>
		<title>details tag text example.. </title>
			<summary>Copyright 2018.</summary>
			<p> - by TutorialsCampus. All Rights Reserved.</p>

Output -

Copyright .

- by TutorialsCampus. All Rights Reserved.

Tip! Click on it to exapnd the summary.