does it matter at all what order the <link> or <script> or <meta> tags are in in the <head></head>?
(daft question but one of those things i've never given any thought to until now.)
views:
964answers:
14
+4
A:
meta does not matter, but link (for css) and script matters.
script will block most browser from rendering the page until the scripts are loaded. Therefore, if possible put them not in the head, but the body.
css link will not block page rendering.
yuku
2008-10-10 11:27:29
A:
Nope, it doesn't matter, except for CSS linking or inclusion, because of CSS inheritance and the fact that it overwrite what was already styled (sorry for my english, i think my sentence is not really clear :-/).
p4bl0
2008-10-10 11:28:02
It does matter. If you <link> to two stylesheets, for example, the later will override the first on statements with the same CSS Specificity.
Atømix
2008-11-26 21:23:17
That's exactly what I said... Please read before you comment...
p4bl0
2009-02-02 11:42:05
+30
A:
Optimization
According to the folks over at Yahoo! you should put CSS at the top and scripts at the bottom because scripts block parallel downloads. But that is mostly a matter of optimization and is not critical for the page actually working. Joeri Sebrechts pointed out that Cuzillion is a great way to test this and see the speed improvement for yourself.
Multiple Stylesheets
If you are linking multiple stylesheets, the order they are linked may affect how your pages are styled depending on the specificity of your selectors. In other words, if you have two stylesheets that define the same selector in two different ways, the latter will take precedence. For example:
Stylesheet 1:
h1 { color: #f00; }
Stylesheet 2:
h1 { color: #00f; }
In this example, h1 elements will have the color #00f because it was defined last with the same specificity:
Multiple Scripts
If you are using multiple scripts, the order they are used may be important if one of the scripts depends on something in another script. In this case, if the scripts are linked in the wrong order, some of your scripts may throw errors or not work as expected. This, however, is highly dependent on what scripts you are using.
Joe Lencioni
2008-10-10 11:28:26
The best way to test this is to use cuzillion (http://stevesouders.com/cuzillion/). It lets you construct a page structure and test how it affects page load performance. You can easily verify for yourself that putting scripts before stylesheets instead of after takes longer to load.
Joeri Sebrechts
2008-10-10 14:40:19
Cuzillion... awesome! Up vote for that! :) Nicely written/compiled post Joe! :)
Adhip Gupta
2008-10-10 20:14:11
+1
A:
It would only matter if one of the linked files (CSS/Javascript) depended on another. In that case, all dependencies must be loaded first.
Say, for example, you are loading a jQuery plugin, you'd then need to first load jQuery itself. Same when you have a CSS file with some rules extending other rules.
dguaraglia
2008-10-10 11:28:43
+2
A:
It is usually recommended to have the <script> tag as lower down the page as possible (not in the head but in the body).
Other than that, I don't think it makes much of a difference because the body cannot be parsed unless you have the <head> section completely loaded. And, you want your <link> tag to be in the head as you want your styling to occur as the browser renders your page and not after that!
Adhip Gupta
2008-10-10 11:29:20
+2
A:
If you declare the charset in a meta element, you should do it before any other element.
JacquesB
2008-10-10 11:35:36
+2
A:
Not a daft question at all.
CSS above Script tags for reasons already mentioned.
CSS is applied in the order you place the tags - the more specific the stylesheet, the lower down the order it should be.
Same goes for scripts - scripts that use functions declared in other files should be loaded after the dependency is loaded.
Raithlin
2008-10-10 11:41:59
+9
A:
It's recommended to put the meta tag with the character encoding as high as possible. If the encoding is not included in (or differs from) the response header of the requested page, the browser will have to guess what the encoding is. Only when it finds this meta tag it knows what it is dealing with and it will have to read everything it has already parsed again.
See for instance Methods for indicating the character set.
Bno
2008-10-10 11:42:32
+2
A:
Put the meta tag that declares the charset as the first element in head. The browser only searches so far for the tag. If you have too much stuff before the meta element, the charset might not get applied.
If you use the BASE element, put it before any elements that load URIs (if desired).
Shadow2531
2008-10-10 14:45:03
+2
A:
The accepted answer is kind of wrong, depending on the encoding of the document. If no encoding is sent by in the HTTP header, the browser has to determine the encoding from the document itself.
If the document uses a <meta http-equiv="Content-Type" … declaration to declare its encoding, then any ASCII-valued character (character code < 128) occurring before this statement must be an ASCII value, as per HTML 4 spec. Therefore, it's important that this meta declaration occurs before any other element that may contain non-ASCII characters.
Konrad Rudolph
2008-10-10 15:02:14
+1
A:
As already pointed out meta describing content charset should be the first otherwise it could actually be a security hole in a certain situation. (sorry i dont remember that situation well enought to describe here but it was demostrated to me at web security training course)
Tamm
2008-10-10 15:45:47
+1
A:
I recently was having a problem with a draggable jquery ui element. It was behaving properly in Firefox, but not Safari. After a ton of trial and error, the fix was to move my css links above the javascript links in the head. Very odd, but will now become my standard practice.
+1
A:
For the purposes of validation as XHTML, yes. Otherwise you're probably going to care about the optimization answers.
nitind
2008-10-15 21:26:41