javascript - Should I write script in the body or the head of the html?

Question

This question already has answers here:

Answer 1

I would answer this with multiple options actually, the some of which actually render in the body.

• Place library script such as the jQuery library in the head section.
• Place normal script in the head unless it becomes a performance/page load issue.
• Place script associated with includes, within and at the end of that include. One example of this is .ascx user controls in asp.net pages - place the script at the end of that markup.
• Place script that impacts the render of the page at the end of the body (before the body closure).
• do NOT place script in the markup such as <input onclick="myfunction()"/> - better to put it in event handlers in your script body instead.
• If you cannot decide, put it in the head until you have a reason not to such as page blocking issues.

Footnote: "When you need it and not prior" applies to the last item when page blocking (perceptual loading speed). The user's perception is their reality—if it is perceived to load faster, it does load faster (even though stuff might still be occurring in code).

EDIT: references:

• asp.net discussion: http://west-wind.com/weblog/posts/154797.aspx and here: http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
• jQuery document ready discussion: http://encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Encosia+%28Encosia%29
• the other answers on this question present valid information as well.
• use www.google.com and www.bing.com to search for related information (there are a lot of references)

Side note: IF you place script blocks within markup, it may effect layout in certain browsers by taking up space (ie7 and opera 9.2 are known to have this issue) so place them in a hidden div (use a css class like: .hide { display: none; visibility: hidden; } on the div)

Standards: Note that the standards allow placement of the script blocks virtually anywhere if that is in question: http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html and http://www.w3.org/TR/xhtml11/xhtml11_dtd.html

EDIT2: Note that whenever possible (always?) you should put the actual Javascript in external files and reference those - this does not change the pertinent sequence validity.