Where To Include JS & CSS In The HTML Page And Why?

HTML & CSS Javascript

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?

Lets 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 hello = 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 hello = 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>

There you have it!

Let me know if you have any questions in the comments section below.

Happy Coding!

You may also like this: