Where should the script tag be placed in html

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss, where should the script tag be placed in the html. Should it be placed in the body or head section of the page. In general the script tag can be placed either in the head or body section.

Let's look at a few examples :

Example 1 : Script tag in the head section
[html]
[head]
[script type="text/javascript"]
alert("Welcome to JavaScript Tutorial");
[/script]
[/head]
[body]
[form id="form1" runat="server"]
[/form]
[/body]
[/html]

Example 2 : Script tag in the body section
[html]
[head]
[/head]
[body]
[form id="form1" runat="server"]
[/form]
[script type="text/javascript"]
alert("Welcome to JavaScript Tutorial");
[/script]
[/body]
[/html]

In Example 1 we placed the script tag in the head section and in Example 2, we placed it in body section. In both the cases JavaScript works as expected.

Example 3 : Sets the background color of the TextBox to red.

[html]
[head]
[/head]
[body]
[form id="form1" runat="server"]
[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
[/form]
[script type="text/javascript"]
[/script]
[/body]
[/html]

Example 4 : This is same as Example 3, except we moved the script tag to the head section. In this case the script will not work as expected. Depending on the browser you are using you get one of the following JavaScript error.
Chrome - Uncaught TypeError: Cannot read property 'style' of null
IE - Unable to get property 'style' of undefined or null reference

To see these JavaScript errors press F12 which launches developer tools. F12 works for all the 3 browsers.

[html]
[head]
[script type="text/javascript"]
[/script]
[/head]
[body]
[form id="form1" runat="server"]
[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
[/form]
[/body]
[/html]

Why did the JavaScript did not work in this case
JavaScript code is present before the textbox control. By the time the JavaScript code is executed, the textbox is still not loaded into browser DOM (Document Object Model). This is the reason JavaScript can't find the textbox and throws a NULL reference error.

In Part 6, we discussed that, in general it is a good practice to store JavaScript in an external .js file. So, if the JavaScript is present in an external file and if you are referencing it on a page using [script] element, where should such [script] element be placed.

To answer this question, first let's understand what happens when a browser starts loading a web page.
1. The browser starts parsing the HTML
2. When the parser encounters a [script] tag that references an external JavaScript file. The parser stops parsing the HTML and the browser makes a request to download the script file. Until the download is complete, the parser is blocked from parsing the rest of the HTML on the page.
3. When the download is complete, that's when the parser will resume to parse the rest of the HTML.

This means the page loading is stopped until all the scripts are loaded which affects user experience.

In general, the suggested good practice is to place the [script] tag just before the closing [body] tag, so it doesn't block the HTML parser. However, modern browsers support async and defer attributes on scripts. These attributes tell the browser it's safe to continue parsing while the scripts are being downloaded. But even with these attributes, from a performance standpoint it is still better to place [script] tag just before closing [body] tag.

According to HTTP/1.1 specification browsers download no more than two components in parallel. So, if the page has several images to download and if you place [script] tags at the top of the page, the script files start to download first which blocks the images download which adds to the total page load time.

[TheUmairkhan]

this is my first comment and it goes to you sir.really hats off to your brilliant way of teaching..you are precious gift for human being..

[buskilamaor]

The best online tutor, very detailed, organized, and explained in such an easy way to understand....just great

[iqbaljournals]

what a explaination.wow!!.so informative.your each word is so clear and perfect..the way you teach just awesome.thanks a lot

[pangiras]

Wow your teaching style and your knowledge is unmatched and is class apart when compared to other youtube videos.Thank you so much.

[mynameischie]

this is a very good tutorial! thank you very much!

[souvickdas]

Really Hats Off.. What a nice technique for teaching. Thank You Sir.

[harishpatidarArdentRailFan]

Thank you very much all are top videos with excellent explanations.

[Vignesh]

Hats off for the efforts you put in to educate others...

[happyplaces]

best explanation..found u very late..thank you

[gabrielklimay]

ahaaa, so that's the difference.Thank you very much!It was a very useful video!!!

[PradeepYadav-wflm]

i always hit like button before started!!!

Thank u brother so so much . I hope someday i can meet u and give u a lot of thanks face to face and work with u in the same company .

[sachinborge]

thank u so much sir... i found this video very helpful for me...

[vaibhavdeshmukh]

Thank You So much Now i am able to learn JS at home..as soon as i get time.... :)

[harshitachambhare]

thank you very much venkat for this precious effort. Me too new to javascript, and will get to learn many more.
Could you please upload some videos on unit testing of Javascript with Jasmine?
Thank you very much:-)

[mahipalkamanchi]

sir i have one question can u please record this one
How to prevent duplicate record/data entry on page refresh in asp.net

[sahilrally]

I have a question, What if user does something on HTML page and the related Java script file is not yet downloaded ? (say validating the password ? ) ?? 

[tejasairmk]

Hello sir, The script tag is disabled in atom text editor, please how to set it

[sourabhkumar]

Sir please made video on Node.js and React.js

[dancostinel]

But, if the javascript can't be applied to the html elements - when the js is present in the <head> (because the DOM is still not rendered), then how comes that the css rules are being applied to the page? As all of us already know, the css can be present in a <style> element in the <head> of the page...