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 format/ template whenever you start working on any new project.

Fig. starting template of HTML

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 think why we even do exactly this and not opposite or not any other way..? well, this blog will answer all such questions.

Fig. Updated template of HTML

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

Fig. Inline JS

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 to15).

Fig. JS inside script tag

But it’s not so cleaver way to write JS in HTML file as it create clutter and it may lead 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 link this to our main HTML file. (see line no 13 of index.html below) and write our code in it. Now…

Fig. External JS

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.

Case 1)

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

Fig. CSS at the end

The code runs top to bottom, line by line and when it reach at line no. 11 it prints the heading with normal black text (browser prints “Hello” here) and then script tag hits and we get alert. If we dismiss the 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. So, we always put CSS file at the top (usually below the title)

Case 2)

When we place JavaScript file at top — in Meta tag

Fig. JS 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.’

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. By doing this, all the content of our website gets loaded first which in turn makes our website to load faster.

Thanks for reading !

VAIBHAV

Happy Coding !