Important Tips on jQuery - script tag in head or body?

In an HTML file, you can refer to your JavaScript at two places - within the head tag, or just before the closing close body tag. The web browser processes an HTML page from top to bottom, and executes any JavaScript that it finds between script tags, along the way. Due to this, the loading of the page is blocked if one of your scripts takes time to execute. Therefore, it's better to put the scripts just before the closing tag of body element, which ensures that your script is run, after the DOM is loaded.

In some of my articles and even my book, I often chose to put the script inside the head tag, but this is only for the sake of readability. But I also make sure to use $(document).ready() or the shortcut $(function(){ }) which ensures that the script will be executed only when the browser has loaded all of the content in the HTML document. Hence I am achieving the same effect as that of putting the script just before the closing close body tag.

Having said that, keep in mind that by having your scripts at the bottom of the page, you can completely avoid the use of $(document).ready(). In fact, in all my production ready applications, I use my scripts at the bottom of the page.