You can place the <script> tag at the top or bottom of the code. There are two approaches: Top and End approach. In the top approach, you can place the <script> tag inside the <head> section, and in the end approach, you can place the <script> tag before closing the </body> tag. We will discuss these methods with examples in this blog.
Table of Contents:
There are two approaches for placing <script> tags at the top and end of an HTML document. Let us discuss these approaches below.
Method 1: Top Approach
In this approach, you can add the <script> tag in the <head> section of your HTML. This makes the JavaScript to get loaded first even before the page starts displaying. It is suitable for scripts that need to run right away and it makes the page-loading process slower since the script gets processed first.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Approach Example</title>
<script>
console.log("JavaScript loaded in the head section");
</script>
</head>
<body>
<h1>Intellipaat!</h1>
</body>
</html>
Output:
Advantages of the Top Approach
- Preloaded JavaScript Since the Javascript is loaded in the beginning, the variables and functions are ready before the page gets loaded.
- Better Organization: Keeping the script in the head section makes your code look organized and readable.
- Useful for Third-Party Script: Certain scripts, like Google Analytics or font loaders, need to go inside the <head> section to work properly.
Disadvantages of the Top Approach
- Blocking Behaviour: When JavaScript runs, it can delay how quickly the page is displayed, making it load more slowly.
- DOM Not Ready: The error occurs when the script tries to manipulate HTML elements before they exist.
Solution for Blocking Behaviour
You can use the defer or async attribute to solve this issue. defer ensures the script downloads while HTML is being parsed but executes only after the document is fully parsed, in the order they appear. async loads the script in parallel while the HTML continues parsing. It executes as soon as it finishes downloading, which means scripts may run out of order.
Example:
<script src="script.js" defer></script>
Method 2: End Approach
In this approach, you can place the <script> tag before the closing of the <body> tag. The browser loads the HTML content first and then starts running the JavaScript. This method makes the page load fast and even improves the user experience. It works well when your JavaScript wants to work with the elements on the page.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>End Approach Example</title>
</head>
<body>
<h1>Intellipaat!</h1>
<script>
console.log("JavaScript loaded at the end of the body");
</script>
</body>
</html>
Output:
Advantages of the End Approach
- Faster Page Load: Since the script was added at the end, the page gets loaded first and then the script gets executed. This makes the page load fast.
- DOM Readiness: JavaScript can manipulate the HTML elements since they are already loaded.
- Better User Experience: The user can see the content quicker without waiting for the Javascript to get executed.
Disadvantages of the End Approach
- Delayed Execution: JavaScript gets executed only after the page is completely loaded, this may not be suitable in all cases.
- Less Organised Code: Some developers feel like keeping the <script> tag in the header, they may feel it less organized.
Comparison of Top and End Approach
| Features | Top Approach | End Approach |
| Page Load Speed | It is slower due to block rendering. | It is faster because the content is loaded first. |
| DOM Availability | May cause issue (DOM is not ready) | No issue (DOM already loaded) |
| Code Organization | Better | Can be messy if mixed with HTML |
| Async/Defer support | Needed for better performance | Not needed, but still it is useful |
Conclusion
There are two approaches to place the <script> tag in the HTML document. You can place it either on top or end of the HTML document. In the top approach, you can place the script tag in the head section, or in the end approach you can place the script tag before the end of the body section. The end approach is faster than the top approach since the JavaScript gets executed after the page content is loaded.
1. Where should I generally put script tags in my HTML?
For scripts that must load before the page renders, place them in the <head> section. For faster page loading and better performance, put them just before the closing </body> tag.
2. What is the TOP approach for placing script tags?
The TOP approach places the <script> tag in the <head> section. This ensures the script loads before the page content but may slow down rendering.
3. What is the END approach for placing script tags?
The END approach places the <script> tag just before the closing </body> tag. This lets the browser load the HTML first, making the page render faster, which is great for scripts interacting with the DOM.
4. Should I use async or defer attributes with scripts?
async: Loads the script in the background and runs it as soon as it’s ready. defer: Ensures the script runs after the HTML is fully parsed, maintaining order for multiple scripts.
5. Can I place script tags inside the body?
Yes, you can place them inside <body>, but for better practices, it’s recommended to put them at the end of the <body> for improved performance.