8

Possible Duplicate:
Where is the best place to put <script> tags in HTML markup?

Where should I put javascript code?

  <-- Here?
</body>
  <-- Here?
</html>
  <-- Here?

I've always used above </body> just wanted to know if this was "the best"

Community
  • 1
  • 1
obkso
  • 166
  • 1
  • 2
  • 8

8 Answers8

13

If the JavaScript needs to be ready to go before the entire page loads, you put it between <head></head>. If the JavaScript needs to be available right before the user encounters something on the page, you can put it prior to the element in the <body></body> (although people hardly do that for code readability). If the JavaScript just does some enhancements or provides tracking information (it's not a necessity), you can put it right before </body>.

NightHawk
  • 3,633
  • 8
  • 37
  • 56
3

Concensus seems to be that there are two sensible places to put scripts:

  1. In the <head> section:

    • Pro: Scripts are loaded before content, so dynamic behaviors can be applied before the user can interact with the page.
    • Con: users have to wait while scripts are downloaded and applied, which can lead to higher bounce rates and generally poorer performance.

  2. Just before the </body> tag:

    • Pro: content is loaded and visible to the user as soon as possible.
    • Con: dynamic behaviours, effects, etc, are not immediately applied.

You need to decide what your priorities are and what your specific needs are. Personally, I'll put anything absolutely critical to the proper functioning of the page in <head> and anything that is progressive enhancement at the end.

Hamish
  • 22,860
  • 8
  • 53
  • 67
1

Really depends on what you are trying to do.

General rule of thumb would have you put your javaScript code in a seperate file and link that script with something like this

<script type="text/javascript" src="your/source/here.js"></script>

Then again, having your script inline within the page, you can have it where you want. Within the headsection of the page, it loads beforehand, and therefore can pre-process if needed. If you have it let's say during the body portion of the page, it will load with the normal flow of the page.

Having everything on the same file, I would have the script in the head and, if needed, call functions afterwards in the body.

Hope this helps.

edit

Keep in mind that the main goal should be readability and re-usability of your code. Therefore, whatever makes this happen in the most efficient way, I would have to say is the best way.

Community
  • 1
  • 1
blo0p3r
  • 6,790
  • 8
  • 49
  • 68
1

Putting <script> after </body> or </html> would be invalid, and I'm not sure what it would accomplish. Some scripts, for analytics services for example, are recommended to be loaded at the end of body (just before </body>) because they load synchronously and may hang the page.

JMM
  • 26,019
  • 3
  • 50
  • 55
1

Don't think it's nearly as much about where in the code, it's how you handle checking if you can run code when it triggers. i.e. onload or onready.

HTML5 boilerplate promotes having most if not all scripts as the last elements in the body, but I have yet to ever find time to benchmark this vs having it in the head.

irrg
  • 31
  • 3
0

JavaScript can be added anywhere. Just a basic example below as you are learning things.

<html>
<head>
----- Your Javascript here -----
</head>
<body>
</body>
</html>
Shankar Narayana Damodaran
  • 68,075
  • 43
  • 96
  • 126
0

Inside </html> Inside <body>

That said, from there it's sometimes just preference. Many say at the end of the doc because there's a supposed speed increase. If it's there, it's minuscule.

bpeterson76
  • 12,918
  • 5
  • 49
  • 82
-2

Its better if you put javascript code inside <head> // javascript code here </head> because head section loads before your page appears.

Ramesh Kotha
  • 8,266
  • 17
  • 66
  • 90
  • 1
    You say it's better. I say it depends. I personally don't like to let the user wait for the javascript to load (when it isn't needed). – PeeHaa Jan 30 '12 at 20:02
  • 1
    ...and without a dom listener, you've just fired Javascript on elements that aren't yet rendered in legacy versions of the evil browser (IE) – bpeterson76 Jan 30 '12 at 20:03