Where to place the <script> tag on the HTML page?

curiouswebster
curiouswebster used Ask the Experts™
on
Where to place the <script> tag on the HTML page?

I know there are different places you can put this, depending on the behavior you want and also depending on the type of scripts you need to load.

So, what are the different places on theHTML page and what factors govern your decision? And are these script always Javascript?

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Devin BeckerIdentity Management and Security
Distinguished Expert 2018

Commented:
curiouswebster,

The <script> tag goes in the body, however, it really depends on what you're trying to do that would determine where you would put it. For example, Bootstraps JS goes at the very end of the <body> before the closing </body> tag.

Specifically, the <script> tag is for javascript, as I believe PHP has it's own tag.

EDIT: I did forget about the head tags for scripts, of course they can be in the head section since you can call an entire script(Javascript) file from there, sorry for my quick, incomplete response

Hope this helps
Test your restores, not your backups...
Top Expert 2016
Commented:
<script> blocks can be in either the <head> or <body> sections of the page.  And you can have any number of <script> blocks.  They are most common for including javascript code, but are also used to include vbscript.  I think the standard allows additional extensibility as well so is not limited to those two, but those are the common ones.

The actual javascript code can be right inline in the html page, or the <script> can reference an external file where the code is pulled in from.

Often the content of the script block is procedures that are executed based on events or other actions, and the location of those in the html file is less critical.  However the code in the <script> can be not in a procedure, so it will execute as soon as it is hit in the html file.  In this case location can be important if you are adding content to the page via that script code, since you want it to appear at the right place.

The other thing that I have been told / taught is that keeping the script procedure at the bottom, after all the html stuff, improves page load time slightly, since interpreting the script code takes some time and can slow down the initial html rendering if not at the bottom.

A little more info here:

JavaScript Placement in HTML File


»bp
curiouswebsterSoftware Engineer

Author

Commented:
thanks
leakim971Multitechnician
Top Expert 2014

Commented:
you can put it in the head or body section.
some code like document.write have not really sense in head section when some other have no sense in body

https://www.w3.org/TR/html4/interact/scripts.html

The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
The location of <script> tags is an ongoing source of discussion. As described above your options are
<!doctype html>
<head>
<!-- include -->
<script src="..."></script>
<!-- or script block -->
<script>
// HERE
</script>
</head>
<body>
...
<!-- include -->
<script src="..."></script>
<!-- or script block -->
<script>
// All over the place here - which (in my view) is a bad practice
</script>
...
<!-- include -->
<script src="..."></script>
<!-- or script block -->
<script>
  // before the closing body tag
</script>
</body>
</html>

Open in new window


Where you put it is ENTIRELY dependent on your project. You have to take into account script dependencies
In the above code the include <script> tags come before the script blocks - but depending on your rendering process it could happen that script code comes out before its dependencies. So while there is merit to putting your script includes at the bottom of the page this might not always work because of a dependency that needs to be included first.

For example this will generate a script error
<!doctype html>
<html>
<body>
a
b
<br>
a
<script>
 $('body').click(function() {
  alert('bing');
 });
</script>
<script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>

Open in new window

Because jQuery is being used before the library has been loaded.

So, there are many places a script can go
There are fewer places where a script can go where it will work
And even fewer places where a script should go.

You need to work with the above in the context of your project to get the best results.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial