Tag <summary> In HTML
Today we will cover Tag summary examples. By using examples, we anticipate meeting the learning objectives.
The <summary> tag is an HTML5 element that is used to define a visible heading for a <details> element, which can be expanded or collapsed. The <details> and <summary> elements are often used together to create collapsible sections of content on a web page.
The <summary> tag indicates a prominent heading for the <details> tag.
Detail information can be viewed or hidden by clicking on the heading.
Here is the <summary> tag example:
Example:
<!DOCTYPE html>
<html>
<body>
<details>
<summary>Click here to see more information</summary>
<p>Additional information goes here.</p>
</details>
</body>
</html>
Here is an example of the <summary> tag in detail:
Example:
<!DOCTYPE html>
<html>
<body>
<details>
<summary>Learn more about the history of the Eiffel Tower</summary>
<p>The Eiffel Tower was built by Gustave Eiffel as the entrance arch to the 1889 World's Fair, which was held in Paris to celebrate the 100th anniversary of the French Revolution.</p>
<p>Construction of the tower began in 1887 and was completed in 1889, taking a total of two years to build. The Eiffel Tower was the tallest man-made structure in the world at the time of its completion, measuring 300 meters tall.</p>
</details>
</body>
</html>
Here’s another detailed example of using the <summary> and <details> tags:
Example:
<!DOCTYPE html>
<html>
<body>
<details>
<summary>Ingredients and instructions for making a simple chocolate cake</summary>
<p><b>Ingredients:</b></p>
<ul>
<li>1 1/2 cups all-purpose flour</li>
<li>3/4 cup granulated sugar</li>
<li>1/2 cup unsweetened cocoa powder</li>
<li>1 teaspoon baking powder</li>
<li>1/2 teaspoon baking soda</li>
<li>1/2 teaspoon salt</li>
<li>1/2 cup milk</li>
<li>1/2 cup vegetable oil</li>
<li>2 eggs</li>
<li>1 teaspoon vanilla extract</li>
</ul>
<p><b>Instructions:</b></p>
<ol>
<li>Preheat the oven to 350°F (175°C). Grease and flour an 8-inch (20cm) round cake pan.</li>
<li>In a large mixing bowl, combine the flour, sugar, cocoa powder, baking powder, baking soda, and salt.</li>
<li>In a separate bowl, mix together the milk, vegetable oil, eggs, and vanilla extract.</li>
<li>Add the wet ingredients to the dry ingredients and mix until just combined.</li>
<li>Pour the batter into the prepared pan and bake for 25-30 minutes, or until a toothpick inserted into the center comes out clean.</li>
<li>Allow the cake to cool for 10 minutes before removing it from the pan and allowing it to cool completely on a wire rack.</li>
</ol>
</details>
</body>
</html>
CSS can also be applied to <summary> and <details> tag. See the example below:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
details {
border: 1px solid gray;
padding: 10px;
margin-bottom: 20px;
}
summary {
font-weight: bold;
cursor: pointer;
}
summary::-webkit-details-marker {
color: maroon;
font-size: 0.8em;
}
ul {
list-style-type: square;
margin-left: 20px;
}
ol {
list-style-type: decimal;
margin-left: 20px;
}
</style>
</head>
<body>
<details>
<summary>Ingredients and instructions for making a simple chocolate cake</summary>
<p>Ingredients:</p>
<ul>
<li>1 1/2 cups all-purpose flour</li>
<li>3/4 cup granulated sugar</li>
<li>1/2 cup unsweetened cocoa powder</li>
<li>1 teaspoon baking powder</li>
<li>1/2 teaspoon baking soda</li>
<li>1/2 teaspoon salt</li>
<li>1/2 cup milk</li>
<li>1/2 cup vegetable oil</li>
<li>2 eggs</li>
<li>1 teaspoon vanilla extract</li>
</ul>
<p>Instructions:</p>
<ol>
<li>Preheat the oven to 350°F (175°C). Grease and flour an 8-inch (20cm) round cake pan.</li>
<li>In a large mixing bowl, combine the flour, sugar, cocoa powder, baking powder, baking soda, and salt.</li>
<li>In a separate bowl, mix together the milk, vegetable oil, eggs, and vanilla extract.</li>
<li>Add the wet ingredients to the dry ingredients and mix until just combined.</li>
<li>Pour the batter into the prepared pan and bake for 25-30 minutes, or until a toothpick inserted into the center comes out clean.</li>
<li>Allow the cake to cool for 10 minutes before removing it from the pan and allowing it to cool completely on a wire rack.</li>
</ol>
</details>
</body>
</html>
IMPORTANT: In the case of the <details> tag, the <summary> tag should be the first child tag.
Table Of Content-
Tag Summary Uses
The <summary> tag is primarily used in conjunction with the <details> tag to create collapsible sections of content on a web page. Here are some of the common uses of the <summary> tag:
- When used with the <details> tag, the <summary> tag provides a visible heading for the collapsible section. This allows the user to expand or collapse the content within the section by clicking on the heading. This is useful for presenting large amounts of content in a compact and organized way.
- The <summary> tag can also be used to create accordion menus, which are a series of collapsible sections that allow the user to expand or collapse content as needed. Accordion menus are commonly used in website navigation to present a large number of options in a user-friendly way.
- The <summary> tag can also be used to provide context for the content within a collapsible section. By using a descriptive heading, you can make it clear to the user what information is contained within the section, and help them quickly find the information they need.
- Using the <summary> tag can also help improve the accessibility of your website, as it allows users with screen readers to quickly identify and navigate to the content they need. When used properly, the <summary> tag can make your website more user-friendly and accessible to a wider range of users.
Attributes
Global
The Tag summary <summary> similarly handles Global Attributes in HTML.
Event
The Tag <summary> also accepts the Event Attributes in HTML.
Browser Compatibility
In the following table, the numbers indicate the version of the browser that is compatible with the Tag Summary.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <summary> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Predefined CSS
Tag <summary> element is frequently generated with the given default values:
summary {
display: block;
}HTML Tag Summary Advantages
Here are some of the key advantages of using the <summary> tag:
- The <summary> tag can help make your website more user-friendly by allowing you to present large amounts of content in a compact and organized way. By providing a visible heading for collapsible sections, users can quickly scan the page to find the information they need, without being overwhelmed by too much content at once.
- Using the <summary> tag can also improve the accessibility of your website by making it easier for users with screen readers to navigate and understand your content. By using descriptive headings in the <summary> tag, you can provide context for the content within the collapsible section, which can make it easier for users with disabilities to find the information they need.
- By using collapsible sections of content, you can save valuable space on your web page. This is particularly useful for mobile devices, where screen real estate is limited. By using the <summary> tag to create collapsible sections, you can make your content more accessible and easier to navigate, without sacrificing valuable screen space.
- The <summary> tag is easy to implement, and can be added to any web page with just a few lines of HTML code. This makes it a simple and effective way to improve the user experience on your website, without requiring a lot of technical expertise or resources.
If this article was informative enough to meet your educational desires then do share meaningful information with your friends by clicking on the links below.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
