learn HTML summary tag
This Blog You Will Learn
ஃ What is the <summary> tag?
ஃ Why Use <summary> tag?
ஃ Syntax of HTML <summary> tag
ஃ Explain Program
ஃ Output
What is the <summary> tag?
✅ HTML <summary> tag is use define visible caption,summary,title for <details> section.
✅ HTML <summary> tag first child inside a <details> tag.
✅ Define a clickable heading visible for <details> element.
✅ HTML <summary> tag defines a summary,caption or label <details> element.
✅ HTML acts as toggle control to show or hide the content inside <details>.
✅ <summary> tag is keyboard accessible by default.
Why Use <summary> tag?
✔ Makes content collapsible.
✔ Accessibility support.
✔ Only the summary is visible initially.
✔ Clicking the summary toggles the content.
✔ Clicking again hides it.
✔ only one <summary> per <details> tag.
Syntax of HTML <summary> tag
<summary> ....... </summary>
<summary> ....... </summary>
learn HTML summary tag
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML Summary tag </title>
</head>
<body>
<details>
<summary>HTML summary tag </summary>
<P>A free HTML web designing course teaches how to structure web pages using
HTML (HyperText Markup Language). It covers essential tags like headings,
paragraphs,links, images,
lists, tables, and forms. Students learn HTML document structure html
,head, and body and the use of attributes for adding extra
information to elements. <br> <br> The course introduces HTML5 semantic
tags like header, footer, section, and article for
better organization and accessibility. Practical exercises
include creating simple webpages, navigation menus, and
content layouts. By the end, learners free HTML code with example
with description
<big>https://webdesigningtheory.blogspot.com
</big></P>
</details>
</body>
</html>
learn HTML summary tag
Explain Program
Step 1]
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2 ]
<html>.... . </html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
<head>
<title> HTML iframe tag </title>
</head>
- <head> section
- head section contains metadata about page. not visible on the page itself.
- <title> tag title section set the title of the page shows the browser tab.
<body>....... </body>
- Contains all visible of the webpage.
Step 4]
<details>....... </details>
- Creates a collapsible section.
- click expand content inside.
Step 5]
<summary>HTML summary tag </summary>
- html <summary> tag title of collapsible section.
- summary show visible clicking shows hidden content.
Step 6]
<P> </P>
- Paragraph tag for main content your summary.
<br>
- html br tag line break the paragraph.
<big>
- text appear large.
Step 7]
closing the Tag
</details>
</body>
</html>
learn HTML summary tag
Output
