Interactive HTML elements allow you to add user-friendly behaviors like toggling content or displaying dialogs without relying heavily on JavaScript.
These tags enhance accessibility and UX with built-in browser support.
Common elements:
details
The <details> HTML element is often used to render the additional details that the user can view and hide.
By default, the content is hidden.
You can use the <summary> element along with the <details> to specify a visible heading for the details.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Elements</title>
</head>
<body>
<details>
<summary>HTML</summary>
HTML stands for Hyper Text Markup Language. It is a standard markup language, not any programming language, and is used for creating web pages and web applications. Web browsers receive an HTML document from a web server or local storage and display the document as a web page. Every web page must have an index.html file.
</details>
</body>
</html>The <details> HTML element includes both opening (<details>) and closing (</details>) tags. The attribute for this element is open.
summary
The <summary> HTML element is used to define a heading for the <details> element.
Note: The <summary> element should be the first child element of the <details> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Elements</title>
</head>
<body>
<details>
<summary>HTML</summary>
HTML stands for Hyper Text Markup Language. It is a standard markup language, not any programming language and is used for creating web pages and web applications. Web browsers receive an HTML document from a web server or local storage and display the document as a web page. Every web page must have an index.html file.
</details>
</body>
</html>The <summary> HTML element includes both opening (<summary>) and closing (</summary>) tags.
dialog
The <dialog> HTML element defines a dialog box. You can create subwindows, pop-up dialogs, dismissible alerts, and modals easily using the <dialog> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Elements</title>
</head>
<body>
<dialog>This is a closed dialog box.</dialog>
<dialog open>This is an open dialog box.</dialog>
</body>
</html>The open attribute specifies that the dialog box is active.
You can use JavaScript to add open and close functionalities to the dialog box.
The <dialog> HTML element includes both opening (<dialog>) and closing (</dialog>) tags.
👉 Next tutorial: HTML Scripting / Template Elements