Best place to include script tags in HTML

While embedding JavaScript in an HTML and putting the script tags i.e. included in JavaScript, where is the best place?

Let’s see what happens when browser loads a website:

1. First it fetch the HTML.
2. Starts persing the HTML.
3. Encounters a <script> tag referencing an external script file.
4. Browser requests the script file.
5. Script is downloaded and executed subsequently.
6. Parser continues parsing the other HTML.

Most developers no longer manipulate the DOM when the document is loading rather they wait until the document has been loaded before modifying it.

<!DOCTYPE>
 <html>
 <head>
 <title>My Title</title>
 <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 <div>Hello Kitty!</div>
 </body>
 </html>

You can put any number of scripts in your HTML document and scripts can be placed in a <body>, or in a <head> section of an HTML page, or in both.

JavaScript in <head>:

You can place your javaScript function in the <head> section of an HTML page.

<!DOCTYPE>
 <html>
 <head>
 <title>My Title</title>
 <script>
 function myFunction() {
 console.log("Hi there!");
 }
 </script>
 </head>
 <body>
 <div>Hello Kitty!</div>
 </body>
 </html>

JavaScript in <body>:

You can place your javaScript function in the <body> section of an HTML page.

 <!DOCTYPE>
 <html>
 <head>
 <title>My Title</title>
 </head>
 <body>
 <div>Hello Kitty!</div>
 <script>
 function myFunction() {
 console.log("Hi there!");
 }
 </script>
 </body>
 </html>

Read Also: Difference between section and div in HTML

Now, browsers support the “async” and “defer” attributes on scripts which tell the browser that it is safe to continue parsing while the scripts are being downloaded.

async:

<script type="text/javascript" src="script-1.js" async></script>
<script type="text/javascript" src="script-2.js" async></script>

So, scripts with the “async” attribute are executed asynchronously that means the script is executed as soon as it is downloaded without blocking the browser in the meantime.
That implies , it is possible “script-2.js” is downloaded & executed before “script-1.js”.

defer:

<script type="text/javascript" src="script-1.js" defer></script>
<script type="text/javascript" src="script-2.js" defer></script>

Scripts with the “defer” attribute are executed in order i.e. first “script-1.js”, then “script-2.js”. So, this also does not block the browser in the meantime.

So, unlike “async” scripts, the “defer” scripts are executed just after the entire document has been loaded completely.

The current stage in the HTML development is to put the scripts in the <head> tag and use “async” or “defer” attributes which allows your scripts to be downloaded asap without blocking your browser in the meantime.