Where should I put the CSS and Javascript code in an HTML webpage

Question

While designing a webpage  where should I put the following code    lt link rel stylesheet type  text css  href  css layout css  gt   Should I put it in the  lt head gt  or should I put it in the  lt body gt    Please clarify the following questions    What difference does it make if I put it in  lt head gt  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

User · Answer

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

User · Answer

You should put CSS in the  lt head gt  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  lt head gt  and some elsewhere on the page   For example  Google analytic code is instructed to be put at the bottom

User · Answer

You should put it in the  lt head gt    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

User · Answer

Regarding your responses  the CSS link is written akin to other head elements   lt head gt     lt link href  quot css script  quot  rel  quot stylesheet quot    gt    lt  head gt   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

User · Answer

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

User · Answer

Regarding  lt link   gt  and  lt style   gt   you don t have a choice  they must be in the  lt head   gt  section  see one and two    Regarding  lt script   gt  it can appear both in  lt head   gt  and  lt body   gt   see three   usually it is best practice to put them in the  lt head   gt  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

User · Answer

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  lt  body gt

User · Answer

You should put the stylesheet links and javascript  lt script gt  in the  lt head gt   as that is dictated by the formats  However  some put javascript  lt script gt s at the bottom of the body  so that the page content will load without waiting for the  lt script gt   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

User · Answer

In my opinion best way is  1  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

User · Answer

And if you have more than one  css or  js file to call  just include them one after another  or    lt head gt    lt link href  css grid css  rel  stylesheet    gt    lt link href  css style css  rel  stylesheet    gt    lt script src  js jquery-1 4 4 min js  gt  lt  script gt    lt script src  js jquery animate-colors-min js  gt  lt  script gt    lt  head gt

User · Answer

In my opinion the best practice is to place the CSS file in the header   lt head gt     lt link rel  stylesheet  href  css layout css  type  text css  gt   lt  head gt    and the Javascript file before the closing  lt  body gt  tag     lt script type  text javascript  src  script js  gt  lt  script gt   lt  body gt    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

[javascript] Where should I put the CSS and Javascript code in an HTML webpage?

Examples related to javascript

Examples related to html

Examples related to css