Where To Include JS & CSS In The HTML Page And Why?
A common question new JS Developers ask a lot is:
Where should I include my JavaScript and CSS code in the HTML page – inline or external file?
The typical answer is:
- Add JavaScript code by the end of the
</body>tag and - Add CSS code in-between the
<head>tags
But why?…
When an .html file is executed in the browser, the HTML parser start parsing HTML code.
As soon as the HTML Parser encounters JavaScript code, it will stop parsing HTML and hand it over to JavaScript engine to execute JavaScript code.
In this process, JavaScript code will throw an error if it could not find an HTML element that has not yet parsed.
Let’s take a look at JavaScript code first.
Add JavaScript Code By The End Of The </body> Tag
By adding the Javascript code by the end of the body tag, it will make sure that the DOM elements are fully loaded and accessible when the Javascript code starts executing.
Here is an example:
🛑 Bad Code
<body>
<script>
var box = document.getElementById("box");
box.innerHTML = "I'm a box"; // Can not set a property of null
</script>
<div id="box"></div>
</body>In the above example, the box DOM element won’t be accessible by the time the interpreter is trying to access it’s innerHTML property.
This is because the box div element is declared after the Javascript code.
As you know, the code is being executed from the top to the bottom, line by line in general.
✅ Good Code:
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
box.innerHTML = "I'm a box"; // Can not set a property of null
</script>
</body>In the above example, the box DOM element is declared first.
So it will be accessible when the interpreter starts executing the Javascript code at the bottom.
Pretty straight forward!
Wait…
Is that the only option?
Well …the answer is No.
Alternatively, you can insert the Javascript code at the beginning of the body tag or anywhere in the HTML page as long as the onload method on the window object executes first, before running any JavaScript code.
✅ Good Code:
<body>
<script>
window.onload = function() {
var box = document.getElementById("box");
box.innerHTML = "I am a box!";
};
</script>
<div id="box"></div>
</body>In the above example, the onload method waits until the DOM (all of the HTML on the page) is fully loaded before starting to execute the Javascript code inside.
You could use DOMContentLoaded instead of the onload method on the window object.
The main difference between them is:
The DOMContentLoaded event fires when the document is loaded and the DOM tree is fully constructed.
The onload method fires when all subframes such as images, stylesheets, scripts, etc. have been downloaded.
Add CSS Code In-Between The <head> Tags
Unlike JavaScript, the CSS code must be included before the HTML code (DOM) gets loaded on the browser.
You may wonder why… because you could add the CSS code by the end of the body and it will work fine.
Like the code below … right?
🛑 Bad Code:
<body>
<div id="box"></div>
<style>
#box {
border:1px solid red;
background:yellow;
}
</style>
</body>The above code works fine because it has a small amount of DOM elements in the page.
When the DOM grows, you can see a quick flip that the HTML code on the browser without CSS loads first, then quickly after the CSS will be applied to the page.
To avoid this behavior, always include the CSS code, whether inline or from an external file, in-between the head tags.
<head>
<style>
#box {
border:1px solid red;
background:yellow;
}
</style>
</head>
<body>
<div id="box"></div>
</body>Use Defer
Alternatively, if you would like use external JavaScript file using script tags, you could included before the ending </body> tag.
This works pretty much all the time including some old browsers.
<body>
<div id="box"></div>
<script src="app.js"></script>
</body>But there is better way which is use defer attribute.
Defer makes the linked JavaScript code wait to execute once:
- The linked JavaScript file is completely downloaded and
- Browser finishes DOM construction and rendering process.
<script defer src="app.js"></script>Use Async
When using async attribute to the script element, the external linked JavaScript file will only be executed when its fully downloaded.
It does not block DOM construction when it’s being downloaded.
<script async src="app.js"></script>
There you have it!
Let me know if you have any questions in the comments section below.
Happy Coding!