Where should we use script tag in the HTML ?

In this article, we are going to learn about that what are the reasons that we should not add the <script> tag at the top of the body tag inside the HTML code instead of that we should add the script file at the end of the HTML code.

Script Tag: It is used to add JavaScript inside the HTML code and to make the behavior of the website dynamic.

There are two approaches for adding the script file in the HTML that are:

1. TOP Approach: In the top approach we will add the script file either in the head tag or at the top of the body tag.

Syntax:

First Approach in the head tag

<html>
<head>
    <script src="https://www.geeksforgeeks.org/where-should-we-use-script-tag-in-the-html/path/filename.js"></script>
</head>
<body>
    ...
</body>
</html>

Second Approach at the top of the body tag

<html>
<head>
</head>
<body>
    <script>
            // Your Javascript code here
    </script>
    ...
</body>
</html>

Example: So, we will be understanding with the help of an implementation using the second approach as explained below:

HTML

<!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>Script Tag</title>

<style>

* {

box-sizing: border-box;

margin: 0;

}

#btn {

margin: 50px;

width: 100px;

height: 40px;

font-size: medium;

color: red;

border-radius: 10px;

cursor: pointer;

background-color: antiquewhite;

}

#btn:hover {

background-color: white;

color: black;

}

</style>

</head>

<body>

<script>

const button = document.getElementById("btn");

button.addEventListener("click", function (e) {

alert("The button is Pressed");

});

</script>

<div>

<button id="btn">Click Here</button>

</div>

</body>

</html>

Output:

Output

Explanation: We have used the javascript code over here at the top of the body tag and added an event Listener ‘Click’ and that should display the text as an alert message on clicking the button but it doesn’t show because of the loading of script file before loading the HTML code.

Disadvantage of the TOP Approach:

As we can see that we are getting no alert if we are clicking the button because after the body tag the script tag has loaded and inside the script tag there is an event listener that has been applied on the button that has not been created till now as we can see in the below DOM tree for more explanation.

DOM Tree For above HTML Code

So that’s why we should not add the script tag at the top of the body tag as you can see above. It is a major disadvantage of adding the script file at the top of the HTML.

2. END Approach: In the end approach we will be using the script tag at the bottom of the body tag:

Syntax:

<html>

<head>
    ...
</head>

<body>
    ...
    <script>
            // Your javascript code here
    </script>
</body>

</html>

Example: Let’s understand the End Approach with the help of an implementation as explained below:

HTML

<!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>Script Tag</title>

<style>

* {

box-sizing: border-box;

margin: 0;

}

#btn {

margin: 50px;

width: 200px;

height: 60px;

font-size: larger;

color: red;

border-radius: 10px;

cursor: pointer;

background-color: antiquewhite;

}

#btn:hover {

background-color: white;

color: black;

}

</style>

</head>

<body>

<div>

<button id="btn">Click Here</button>

</div>

<script>

const button = document.getElementById("btn");

button.addEventListener("click", function (e) {

alert("The button is Pressed");

});

</script>

</body>

</html>

Output:

Output

Explanation: In this, we have added the same javascript as in the above code that was added an event Listener on the button, and here we will be seeing that the ‘onClick’ event is working on the button because of the loading of HTML code first and then the addition of javascript file second due to which all the HTML element are found by the query Selectors of DOM API.

Advantages of the END Approach:

By using the End Approach you will not get any error in the JS code on the console of the browser and all the element tags are found by the DOM API that is present in the HTML code.