Where should I put the CSS and Javascript code in an HTML webpage?
JavascriptHtmlCssJavascript Problem Overview
While designing a webpage, where should I put the following code?
<link rel=stylesheet type="text/css" href="css/layout.css">
Should I put it in the <head> or should I put it in the <body>?
Please clarify the following questions:
- What difference does it make if I put it in
<head>or anywhere else around the HTML code? - What if I am having two CSS (or Javascript) files? Since I can only include one file before another one, which file will be used by the web-browser to display the webpage?
Javascript Solutions
Solution 1 - Javascript
In my opinion the best practice is to place the CSS file in the header
<head>
<link rel="stylesheet" href="css/layout.css" type="text/css">
</head>
and the Javascript file before the closing </body> tag
<script type="text/javascript" src="script.js"></script>
</body>
Also if you have, like you said two CSS files. The browser would use both. If there were any selectors, ie. .content {} that were the same in both CSS files the browser would overwrite the similar properties of the first one with the second one's properties. If that makes sense.
Solution 2 - Javascript
Put Stylesheets at the Top Links to discussion
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
Front-end engineers that care about performance want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched and documented. In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.
The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.
The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.
Put Scripts at the Bottom
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
Solution 3 - Javascript
- You should put the stylesheet links and javascript
<script>in the<head>, as that is dictated by the formats. However, some put javascript<script>s at the bottom of the body, so that the page content will load without waiting for the<script>, but this is a tradeoff since script execution will be delayed until other resources have loaded. - CSS takes precedence in the order by which they are linked (in reverse): first overridden by second, overridden by third, etc.
Solution 4 - Javascript
You should put CSS in the <head> because that's what the specification says do to.
If you have more than one CSS file, they will be loaded in the order you put them in the code. If there is style in the second CSS file, it overwrites the style in the first; That will happen by design. Thus, Cascading Style Sheets.
Most browser will still effectivly render CSS files out of the head, but your code is not semantically correct.
You can use JavaScript file links anywhere on the document. There are different reasons to use some in the <head> and some elsewhere on the page. (For example, Google analytic code is instructed to be put at the bottom.)
Solution 5 - Javascript
CSS includes should go in the head before any js script includes.
Javascript can go anywhere, but really the function of the file could determine the location. If it builds page content put it on the head. If its used for events or tracking, you can put it before the </body>
Solution 6 - Javascript
In my opinion best way is
- place the CSS file in the header part in between head tag reason is first page show the view for that css require 2)and all js file should place before the body closing tag. reason is after all component display js can apply
Solution 7 - Javascript
You should put it in the <head>. I typically put style references above JS and I order my JS from top to bottom if some of them are dependent on others, but I beleive all of the references are loaded before the page is rendered.
Solution 8 - Javascript
Regarding <link /> and <style />, you don't have a choice, they must be in the <head /> section (see one and two).
Regarding <script /> it can appear both in <head /> and <body /> (see three), usually it is best practice to put them in the <head /> since they are not really "content" (where "content" is what the user sees on screen), they are more something which "works on" the "content".
W3C's HTML4 specification FTW!
Solution 9 - Javascript
And if you have more than one .css or .js file to call, just include them one after another, or:
<head>
<link href="css/grid.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.animate-colors-min.js"></script>
</head>
Solution 10 - Javascript
AS per my study in css place always inside .like:-
<head>
<link href="css/grid.css" rel="stylesheet" />
</head>
and for script its depen :-
- If inside the script document. write present then it will be in the head tag.
- If script contain DEFER attribute, BECAUSE defer downloaded all in parallel
Solution 11 - Javascript
Regarding your responses, the CSS link is written akin to other head elements.
<head>
<link href="css.script " rel="stylesheet" />
</head>
1.Most popularly put in the head as it will augment compiling proficiency. 2.Placed in the body or later in the HTML text primarily for convenience.