Menu
An IBM website talking about rapid web development here mentioned a useful skeleton HTML. In the template, the script inclusion is inside body rather than head. Is it a good practice? Isn't it better to put any library inside head instead?
<html>
<head>
<title>Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<!-- The main HTML will go here -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
VS
<html>
<head>
<title>Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- The main HTML will go here -->
</body>
</html>
779
The best practice is to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of your HTML. The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body.
You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that you should keep it within the <head> tag or <body> tag.
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
While embedding JavaScript on a webpage, it may appear almost anywhere within the HTML file. However, the code is usually written either under the head tag or the body tag. Usually, the code written in the head will load before the code written in the body. This is mainly due to the order of the loading.
It is now standard for script tags to be included just before the closing of the body tag so that the script loading does not block the rest of the page loading.
<script src="myScript.js"></script>
</body>
With this, the user will not have to wait as long to see something on the page, then the javascript functionality is added.
However, there are more and more sites and "web apps" that are javascript/ajax heavy and may require the scripts to be loaded before anything is shown on the page anyway. That is less common, but that is a case where the script could be included in either location, since the visual result would be the same if javascript is responsible for creating/loading the content.
To verify: here is Google's recommendation: https://developers.google.com/apps-script/guides/html/best-practices#load_javascript_last
Also consider loading libraries from a CDN, so that you can take advantage of browser caching.
120
Yes it is good practice as the page will load faster if the code is in the ending...
It waits for the whole page to load and then loads the scripts.
There was this site i visited, which quickly responded to my browser's request. but when i got the response, it was some white page with some boxes and some text. and it was taking ages for the page to load. After some time some images appeared in the boxes and the text got styled.
Why?
When the page loaded the script was placed in the head. So, the script was loading and the images and the styles were in the queue. So i had to witness an ugly page while the script loads.
Alternative:
If the script was placed in the ending of the page, just before the </body> tag, the styles and images would have loaded faster so i wouldn't have to see an ugly site, then the page would load.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
