JavaScript in the <head> tag
Whenever an HTML page is opened, the <head> is the first content tag that is loaded, which means that all of the data inside this <head> is loaded before the <body> tag. If JavaScript is added to the head tag, it will not wait for the complete loading of the webpage and will be loaded into the browser’s memory. To demonstrate this, create a basic HTML page that will prompt the user as soon as it’s loaded into the browser’s memory.
Take the following HTML file:
<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>Document</title>
<script>
alert("Done loading Script from the <head> tag");
</script>
</head>
<body>
<img src="https://images.alphacoders.com/107/1072732.jpg" />
</body>
</html>
As you can see, the script is added in the <head> tag. However, in the body tag, an 8k image is being loaded on the webpage, which will take a few moments to load. Load the HTML page and the output:
From this output, it is clear that putting the script in the <head> causes it to load even before the DOM is ready.
JavaScript in the <body> tag
As mentioned above, one can place the JavaScript within the <body> tag. This will allow the DOM to load fully and then load the JavaScript according to its position in the <body> tag.
To demonstrate this, we are going to create a button on the HTML page with the following lines and in the functionality to that button with the following lines:
<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>Document</title>
</head>
<body>
<center>
<button id="myButton">Click to Alert!</button>
</center>
<script>
button = document.getElementById("myButton");
button.addEventListener("click", myFunction);
function myFunction() {
alert("This Script was inside the <body tag>");
}
</script>
</body>
</html>
In the above code snippet, an event listener is added on the button which alerts the user upon button press all with script inside the <tag>. Execute this HTML file and observe the following output:
It is clear from the above output that the script is working fine in the <body> tag
JavaScript in <body> tag or <head> tag
To answer this question, take the last example and simply move the script tag for alerting the user upon button press inside the <head> tag like:
<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>Document</title>
<script>
button = document.getElementById("myButton");
button.addEventListener("click", myFunction);
function myFunction() {
alert("This Script was inside the <body tag>");
}
</script>
</head>
<body>
<center>
<button id="myButton">Click to Alert!</button>
</center>
</body>
</html>
Upon execution on this program, the difference is not visible as the output looks like the following:
However, opening the browser’s console shows the difference, because in the console there is this error:
This error is caused by JavaScript trying to get the reference of an element from the body tag, which has not been yet initialized by DOM because the JavaScript in the head tag was executed even before the DOM was fully loaded.
So, in conclusion, placing the script in the head tag or the body tag comes down to the working of the webpage.
Wrap-up
JavaScript can be placed in two different places inside an HTML document file in the <head> tag or in <body> tag. Placing the JavaScript in the head tag causes the browser to load the script before the DOM is fully ready. Whereas including the JavaScript inside the <body> loads the script after the DOM is ready. Because of this, there is no optimal place for including JavaScript in your HTML document, and it depends upon the task that one wants to perform.
