Why we import CSS & JavaScript files in HTML like this ?

I always wonder?why we do, what we do?and sometimes I try to figure out few things in detail.?JavaScript?is always special when it comes to explore new things. This blog is simply an outcome of my?trial and error methods?when I was playing with the HTML tags. So…let’s get started !

I am sure you might come across this simple template whenever you start working on any new project.

As soon as we get this, we?simply add?styles.css?in meta tag (line 7 in below image) and?app.js?just before the closing of body tag (line 14).

But have you ever thought why we even do exactly this and not opposite or not any other way..? well, this blog will answer all such questions.

1. Firstly we will try?Inline JavaScript?(see line no. 9 below ) where we introduced?onload?and set an alert.

Just like Inline CSS, Inline JavaScript also has few downsides. It’s?not so modular?, it is very?difficult to debug?so it is advised not to practice it.

2.?Internal JavaScript?is one another method to write JS. Here JavaScript is written inside script tag (see line no. 11 to 15 below)

But it’s not so cleaver way to write JS in HTML file as it create clutter and it may lead to ambiguity while debugging the code or updating existing file. so we use -

3. External JavaScript ,?It’s most commonly used method as it separates everything and makes easy to debug. For this, we create a file with?.js?extension eg.?app.js?and simply link this to our main HTML file. (see line no 13 of index.html below) and write our entire JavaScript code in it.

Now, Magic starts… Hang on

The position of script tag and where we link CSS inside the HTML document plays very important role in loading our web page.

let's check HOW ?

Case A)

When we place CSS stylesheet at bottom — before the end of body tag

The code runs top to bottom, line by line and when it reach to <h1> tag and prints the heading with normal black text (browser prints “Hello” here) and then script tag hits and we get an alert showing some message.

If we dismiss this alert then it goes to next line where we linked CSS file, which then gets executed and changes the color of text from black to red.?This entire thing is not what we intended to execute, but it happens because of importing external files at the wrong place.

So, we always put CSS file at the top?(usually below the title)

Case B)

When we place JavaScript file at top - in Meta tag

See line no. 7, here execution context hits?script?tag first while executing, So it look inside JavaScript file (app.js?). In JavaScript code we are just finding <h1> and changing it’s text from “Hello” to “Bye”.

But at this stage it is not able to find <h1> tag, So we get an error in console —?cannot set property ‘innerHTML’ of ‘null.’ (check error message in red lines at top extreme left of above image)

which means <h1> isn’t exists yet. The reason is : execution is happening top to bottom , line by line. We are on line 7 of HTML and <h1> tag is below it (on line 12) so it returns?null.

…So, the best practice is to?put script at the end and just before closing of </body> tag.

The benefit of a separate file is that the browser will download it and store it in its cache. Other pages that reference the same script will take it from the cache instead of downloading it again, so the file is actually downloaded only once. That reduces traffic.

• By doing this, all the content of our website gets loaded first which in turn makes our website load faster.

If you found this article helpful, do let me know !

you can also read my previous article here

Thanks for reading !