Reputation: 19207

Order of tags in <head></head>

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.)

Upvotes: 49

Answers (14)

nitind

Reputation: 20003

For the purposes of validation as XHTML, yes. Otherwise you're probably going to care about the optimization answers.

Upvotes: 1

Trevor

Reputation:

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.

Upvotes: 1

Tamm

Reputation: 282

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)

Upvotes: 1

Joe Lencioni

Reputation: 10511

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.

Upvotes: 43

Konrad Rudolph

Reputation: 545488

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.

Upvotes: 16

Shadow2531

Reputation: 12170

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).

Upvotes: 2

Keith Williams

Reputation: 507

One important thing to note: if you're using the Internet Explorer meta X-UA-Compatible tag to switch rendering modes for IE, it needs to be the first thing in the HEAD:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
</head>

Upvotes: 8

Benno Richters

Reputation: 15673

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.

Upvotes: 11

Raithlin

Reputation: 1764

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.

Upvotes: 2

JacquesB

Reputation: 42639

If you declare the charset in a meta element, you should do it before any other element.

Upvotes: 2

Adhip Gupta

Reputation: 7163

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!

Upvotes: 2

dguaraglia

Reputation: 6028

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.

Upvotes: 1

p4bl0

Reputation: 3906

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 :-/).

Upvotes: 0

Randy Sugianto 'Yuku'

Reputation: 73365

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.

Upvotes: 5

Order of tags in &lt;head&gt;&lt;/head&gt;

Answers (14)

Related Questions

Order of tags in <head></head>