HTML script Tag

The HTML <script> tag allows embedding JavaScript directly in a page or linking to external files, enabling dynamic behavior, interactivity, and enhanced user experience.

Attributes like async and defer control when and how scripts are executed, improving page performance.
Scripts can validate forms and update page content dynamically.
src attribute allows using external JavaScript files for organized code.

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h1>Hello, World!</h1>
    <button onclick="sayHello()">Click Me</button>
    <script>
      function sayHello() {
      alert("Hello from JavaScript!");
     }
    </script>
</body>
</html>

The <script> tag defines a JavaScript function sayHello() that shows an alert when called.
The button uses onclick to trigger sayHello(), demonstrating basic interactivity on the page.

Syntax:

<!-- For Internal JavaScript -->
<script>
  // Script content here
</script>

<!-- For External JavaScript -->
<script src="script.js"></script>

Attributes

These attributes control how external scripts are loaded, executed, and secured in an HTML document.

async :async is used to specify the script asynchronously as soon as it is available.
crossorigin :crossorigin is used to specify how the browser handles loading external scripts from a different domain using CORS.
defer : defer is used to specify that the script is executed when the page has finished parsing.
integrity :integrity is used to ensure that the fetched script has not been modified by verifying it with a hash.
nomodule : It indicates that the script should not execute in the browsers that support ES module. It is a Boolean attribute.
nonce : It is used by Content Security Policy to allow only trusted scripts to execute.
referrerpolicy :referrerpolicy is used to specify the reference information that will be sent to the server when fetching the script.
src :src is used to specify the URL of an external script file.
type :type is used to specify the media type of the script.

Note: Script tag supports all the Global attributes.

Example 1: Add script tag inside the body section of HTML document.

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2>HTML script Tag</h2>
    <p id="GFG"></p>
    <script>
        document.getElementById("GFG").innerHTML = "Hello GeeksforGeeks!";
    </script>
</body>
</html>

The <script> tag placed inside the <body> changes the content of the paragraph with ID "GFG" to display the text “Hello GeeksforGeeks!”.
This example shows how a script inside the body can directly modify and display content on the webpage.

Example 2: Add script tag inside the head section of HTML document.

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
       function Geeks() {
            alert('Welcome to GeeksforGeeks!');
        }
    </script>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML script Tag</h2>
    <button onclick="Geeks()" type="button">Hello GeeksforGeeks</button>
</body>
</html>

Output:

sectipt-tag

The <script> tag in the <head> section defines the Geeks() function that shows an alert message.
When the button is clicked, the onclick event calls the Geeks() function, displaying the alert.

Attributes

Explore