<summary></summary> tag HTML

Example

A simple <summary> tag:

<form>
	<datalist id="browsers">
</form>

Laboratory

description & Usage

The <summary> tag is used to provide a title for the <details> tag.

With this tag, the user can open and close, and view additional information by clicking on the title.

The <summary> tag is placed inside the <details> tag and on the first line of it.

For more information, please review the <details> tag page.

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<summary>

Global Attributes

The <summary> tag supports the HTML Global Attributes.

Event Attributes

The <summary> tag supports the HTML Event Attributes.

More Examples

Example

HTML <summary> tag with custom style -Example #1

<h1>A Example &lt;summary&gt;</h1>
<details>
	<summary>Show details</summary>
	<div>
		<p>This is a sample text enclosed within a &lt;details&gt; and &lt;summary&gt; tag.  و  </p>
		<p>You can view these details by clicking on "View Details".</p>
	</div>
</details>

Laboratory

Default CSS

Most browsers will display the <summary> tag with the following default style:

summary {
	display: block;
}