Interactive Elements

Learn about HTML interactive elements that enhance user engagement with built-in toggles and modals, no JavaScript required.

Loading...
Interactive Elements

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.