A few years ago I was employed to develop web front-ends for client applications to W3C/AA compliant standards. I was told that CSS, JS and other non-visual/non-presentational content should ALWAYS be kept in the head tag.
Example
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="site.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="site.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Code here...
});
</script>
<head>
<body>
<div class="container">
...
</div>
</body>
</html>
This approach has always worked for me, but In my current role I've been asked to move the CSS and JS references all to the bottom of the document for performance/execution reasons
Example
<!DOCTYPE html>
<html>
<head>
...
<head>
<body>
<div class="container">
...
</div>
<link type="text/css" rel="stylesheet" href="site.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="site.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Code here...
});
</script>
</body>
</html>
I was told that doing this didn't break any compliance or acceptability standards and allowed the site to load faster in some cases, however this caused more problems than it fixed.
Therefore I would like to know if I should stick by my decision to keep these resources in the head tag, or, on the other hand if there is any compelling argument for having resource tags at the bottom, or scattered about the document?
linkelements can’t appear in thebodyelement (unless they are used for Microdata or RDFa). So your<link type="text/css" rel="stylesheet" href="site.css" />has to be a child of theheadelement.scriptelements can appear in thebody. It depends on the script and your document if it makes sense to place thescriptelement as last child of thebody. See, for example, the questionsIf the
scriptelement has asrcattribute (i.e., the script is imported from an external file), you could use theasyncanddeferattributes to control its execution:async:defer:default (i.e., neither
asyncnordefer):async+defer: