Where Should the <script> Tags Be Placed in HTML? How About <link> Tags?
February 15, 2023
Where Should You Place the <script> Tag in an HTML Document?
The <script> tag can be placed anywhere in the HTML document, whether it's in the <head>, <body>, or even within a <div>. The specific location depends on the functionality of the JavaScript file being imported and the loading order requirements. However, it's important to note that the order of loading is from top to bottom, which means the placement of the <script> tag will affect the loading order.
Moreover, when a browser parses an HTML file and encounters <script> tags, it downloads and parses the JavaScript files first before continuing to parse other HTML content. If the JavaScript file is particularly large or is loaded from an external resource, it may be affected by network transfer or external server delays, causing lengthy loading times that can block HTML page parsing and impact user experience.
For these reasons, it's generally recommended to place the <script> tag at the bottom of the </body> tag, as shown in the example below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello World</title>
</head>
<body>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<script src="https://explainthis.com/script"></script>
</body>
</html>
In summary, placing the <script> tag at the end of the HTML document will reduce the potential for loading delays and improve overall user experience.
We can further examine the benefits of placing the <script> tag at the bottom of the </body> tag:
- Faster display: Browsers first parse the entire HTML document before downloading and parsing JavaScript files. Therefore, users can see the page content as soon as possible, leading to a better user experience.
- Avoiding script modification of HTML elements that have not yet loaded: Scripts can modify HTML elements, so placing the
<script>tag at the bottom of the<body>ensures that HTML elements have fully loaded, reducing the risk of modifying elements causing errors.
In the example below, because the <script> tag is placed in the <head>, the script will run immediately when the page loads, and the HTML element hasn't loaded into the DOM, causing document.getElementById("header") to return null and resulting in an error. This is why, in some cases, placing scripts in the <head> of a webpage can cause errors.
<html>
<head>
<script>
// Trying to modify a specific HTML element
var header = document.getElementById("header");
header.innerHTML = "Modified text";
</script>
</head>
<body>
<h1 id="header">Original text</h1>
</body>
</html>
However, placing <script> at the end of the page has its drawbacks, such as the website not being functional at the beginning. Since <script> is loaded last, the functionality hasn't been loaded, leading to a situation where users see the page but without any functionality.
Therefore, the best solution would be to use defer or async to parse the page while downloading JavaScript. We have a complete explanation in our article "What's the Difference Between async and defer Attributes in the <script> Tag?"
Where Should You Place the <link> Tag in an HTML Document?
Generally, the <link> tag should be placed in the <head> section of the HTML document. It tells the browser about external resources of the webpage, such as CSS files, fonts, and icons.
Here is a simple example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Page content -->
</body>
</html>
By placing <link> in the <head>, the browser can load required external resources before rendering the webpage content, so the style won't have any strange changes when the user first sees it.
If you place the <link> tag at the bottom of the page, the browser loads the page content first, and then loads the CSS. Therefore, the style will initially be the browser's default, and then change to the expected style.