W3Schools.com

HTML5 <details> Tag

Example

Using the <details> element:

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The <details> tag is currently only supported in Chrome.


Definition and Usage

The <details> tag specifies additional details that the user can view or hide on demand.

The <details> tag can used to create an interactive widget that the user can open and close. Inside <details>, there can be put any sort of content.

The content of a <details> element should not be visible unless the open attribute is set.


Differences Between HTML 4.01 and HTML5

The <details> tag is new in HTML5.


Tips and Notes

Tip: The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details.


Attributes

New : New in HTML5.

Attribute Value Description
openNew open Specifies that the details should be visible (open) to the user

Global Attributes

The <details> tag also supports the Global Attributes in HTML5.


Event Attributes

The <details> tag also supports the Event Attributes in HTML5.


WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$7.95/mo SEO Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Free Website Templates Free CSS Templates
Make Your Own Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE