View video tutorial

HTML <summary> Tag

HTML

The <summary> tag is used to show a visible heading for the

element.

HTML <summary> Tag


The <summary> element defines a summary, legend, or caption for a <details> element.

Details can be viewed / hidden by clicking on the summary heading.

The <summary> element should be the first element inside the <details> element.

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<details>
    <summary>Sole meunière</summary>
    <p>This classic French seafood dish is prepared with sole fillets lightly pan-fried in plain flour and butter.
        The fish is usually seasoned with salt, pepper and chopped parsley.When the fish is ready, lemon juice is added
        to the
        pan and cooked quickly until all the flavors are combined.
    </p>
</details>
Try it Now »

Click on the "Try it Now" button to see how it works.