Scripting / Template Elements

Learn about HTML scripting and template elements that bring interactivity, fallback content, and reusable structures to your web pages.

Loading...
Scripting / Template Elements

These elements help you add scripts, provide fallbacks when scripts are disabled, or define HTML structures that are not rendered until needed.

They are essential for adding dynamic behavior to web pages.

Common elements:

script

The <script> HTML element is used to specify client-side script, such as JavaScript, in the HTML document.

<!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>
    <script type="text/javascript">
      document.write("Hello World!");
    </script>
  </body>
</html>

The <script> HTML element includes both opening (<script>) and closing (</script>) tags.

Attributes for this element are async, crossorigin, defer, integrity, nomodule, src, and type.

noscript

The <noscript> HTML element is used to define alternate content to be displayed on the browser if the browser does not support a script.

<!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>
  <script src="script.js"></script>
  <noscript>Sorry, your browser does not support the script.</noscript>
 </body>
</html>

The <noscript> HTML element includes both opening (<noscript>) and closing (</noscript>) tags.

template

You can use the <template> HTML element when you want to hide some content from the user when the page loads.

You can render that content later using JavaScript.

<!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>
    <button onclick="showContent()">Show hidden content</button>
    <template>
      <h1>This is hidden.</h1>
    </template>
    <script>
      function showContent() {
        var temp = document.getElementsByTagName("template")[0];
        var clon = temp.content.cloneNode(true);
        document.body.appendChild(clon);
      }
    </script>
  </body>
</html>

The <template> HTML element includes both opening (<template>) and closing (</template>) tags.