html

HTML summary Tag

While developing a website, it is necessary to place elements in an organized way, specifically when creating a component that contains additional text. In the other case, if the text is disorganized, it will cause readability issues. To avoid this problem, HTML offers a <summary> tag that can be utilized for the specified purpose.

This manual will provide a guide on the HTML <summary> element. So, let’s get started!

Before rushing into the discussion related to the article’s subject, let’s see an example demonstrating the <details> element without using a summary tag.

How <details> Element Display Content Without the <summary> Element?

In the following example, we will display the content using the “details” tag without the summary element:

<details>
    This is a detailed explanation.
</details>

 
By default, the <details> element displays a heading Detail which is not meaningful by itself:


From the above output, it can be observed how the details element works without the HTML <summary> element.

In the next section, the proper use of the HTML <summary> tag will be discussed.

What is HTML <summary> Tag?

In HTML, the “<summary>” element is utilized inside the <details> element to specify a heading. This heading is clickable to view or hide the details.

Syntax

<details>
    <summary>content...</summary>
     Content details...
</details>

 
Below is the description of the above-mentioned syntax:

    • <details>” element specifies the additional information.
    • <summary>” element specifies a visible heading that is clicked to view or hide the details.

Now, head toward the following example.

 

Example: How to Add <summary> Tag in HTML?

In HTML, first, add a div element with the class name “faqs”. Then, add <h2> element to add a heading on the web page. After that, place <details> tag, which contains the detailed information. Inside this element, the <summary> element is utilized to specify the heading. We will add two more “details” elements similarly.

HTML

<div class="faqs">
    <h1>Frequently asked questions</h1>
    <details>
        <summary>How can I shop for any product?</summary>
        You can get the product by simply clicking on the add to cart button and proceeding with payment.
    </details>
    <br>
    <details>
        <summary>How long is the delivery?</summary>
        You can receive your product in two to three working days.
    </details>
    <br>
    <details>
        <summary>Do you accept cash on delivery?</summary>
        Yes.
    </details>
</div>

 
CSS

In CSS, the HTML elements are provided with different styling properties.

Style All Elements

* {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

 
The above code snippet represents that the “font-family” with the value Verdana, Geneva, Tahoma, sans-serif is applied to all elements. Moreover, the list of font styles is utilized for the purpose that if the browser does not support the first one, it will apply the second one, and so on.

Style faqs div

.faqs {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    padding: 20px;
    background-color: #B73E3E;
    cursor: pointer;
    color: ghostwhite;
    font-size: 15px;
}

 
The following properties are applied to the <div> element with class name “faqs:

    • width” property is utilized for the setting of element’s width.
    • height” property is utilized for the setting of the element’s height.
    • margin” property with value “0 auto” indicates 0px space on the top and bottom and equal space on the left and right side of the div element.
    • padding” property with a value of “20px” produces 20px space around the content of the div element.
    • background-color” property is utilized for the setting of the element’s background.
    • cursor” pointer displays the mouse as a hand with a pointing finger.
    • color” property sets the font color to ghostwhite.
    • font-size” property adjusts the size of the font to 15px.

Style h1 Element of faqs div

.faqs h1 {
    color: #ffe4bb;
    text-decoration: underline 2px wavy;
}

 
The “.faqs h1” is referred to the <h1> tag of faqs div. The explanation of the applied properties is described below:

    • color” property sets the font color.
    • text-decoration” property is set with the value “underline 2px wavy” where underline is the text decoration property, 2px is the line’s width, and wavy is the style.

Style details Element

details {
    padding: 5px;
}

 
The <details> element is applied with the “padding” property which applies space around the content of the div element.

Style summary Element

summary {
    padding: 6px;
    font-size: 20px;
    color: whitesmoke;
}

 
The <summary> element is applied with CSS styles which are described below:

    • padding” property with value “6px” produce space around the content of the summary element.
    • font-size” property sets the size of the font.
    • color” property applies the “whitesmoke” color to the font.

By providing the above-provided code, our web page will look like this:


It can be observed that a summary of each of the given points has been successfully associated with it.

Conclusion

HTML allows us to use the “<summary>” element that displays the heading which can view or hide the details upon clicking. This HTML element can be utilized to organize the content and increase the overall content of the web page. This article has successfully demonstrated what an HTML summary tag is and how it can be inserted into an HTML file.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.