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

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
curiouswebsterSoftware EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Devin BeckerIdentity Management and SecurityCommented:
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
Bill PrewIT / Software Engineering ConsultantCommented:
<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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
curiouswebsterSoftware EngineerAuthor Commented:
thanks
leakim971MultitechnicianCommented:
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.
Julian HansenCommented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.