Javascript
Where is the Correct Place to Insert a Javascript?
In this article, we will look into the commonly asked question “Where is the Correct Place to Insert a Javascript?”.
Answer to this question is indeed very simple & you will also find the understandable reasons for the answer in this blog.
Contents
Where to Insert a Javascript Code in HTML?
Javascript code can be placed within <head> as well as <body> tag.
Javascript code can also be placed in both the places <head> and <body> tag.
Javascript code is placed between the <script> </script> tags.
You can place any number of scripts in an HTML document.
You can even define multiple script tags in head or body.
We can place the Javascript just before ending </head> and </body> tag.
In the below HTML code, Script tag is placed in both the places for demonstration purpose.
HTML :-
<html>
<head>
<title>Places to Insert Javascript</title>
<style>
.style1 {
color: blue;
}
</style>
<script>
// Place your Javascript Code Here
</script>
</head>
<body style="margin: 30px;">
<p class="style1">Page Content.!!</p>
<p class="style1">Page Content.!!</p>
<script>
// Place your Javascript Code Here
</script>
</body>
</html>
Where is the Correct Place to Insert a Javascript?
The correct place to insert a Javascript is just before the closing </body> tag.
There are certain reasons for placing it at the end of the body.
Here are the reasons.
- The sequence for loading the HTML document is from head to body or in other terms from top to bottom. If the Script tag is placed within the head section then it will load first. The body has not yet loaded so the elements on the page are not yet loaded & if the javascript uses the elements it won’t find it. This will cause javascript errors.
- If javascript has more code then the page loading will take time because the browser will be unable to render the body until the head is rendered completely.
Summary
We have learned about the places for inserting the Javascript code.
We have also learned about the correct place for inserting the javascript code by knowing the reasons for doing so.
Expecting the understanding is clear now.
Comment below for any queries.
