Best IT Recipes

Tag Order in <head> </head>

it doesn't matter in which order the <link> or <script> or <meta> are in <head></head> ?

(stupid question, but one of those things that I have never thought of so far.)

+45
html xhtml
Oct 10 '08 at 11:23
source share
14 answers

The accepted answer is incorrect, depending on the encoding of the document. If the encoding is not sent in the HTTP header, the browser must determine the encoding from the document itself.

If the document uses the declaration <meta http-equiv="Content-Type" … to declare its encoding, then any ASCII character (character code <128) that appears before this statement must be an ASCII value, according to the HTML 4 specification . Therefore, it is important that this meta declaration meta before any other element that may contain non-ASCII characters.

+13
Oct 10 '08 at 15:02
source share

Optimization

According to people at Yahoo! you must put CSS at the top and scripts at the bottom because scripts block concurrent downloads. But this is mainly a matter of optimization and is not critical for a truly working page. Joeri Sebrechts pointed out that the Cuzillion is a great way to test this out and see speed improvement for yourself.

Several styles

If you link multiple style sheets, the order associated with them can 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:

Style Sheet 1:

 h1 { color: #f00; }

Style Sheet 2:

 h1 { color: #00f; }

In this example, the h1 elements will have color #00f because it was defined last with the same specificity:

Some scripts

If you use multiple scripts, the order in which they are used may be important if one of the scripts depends on something in another script. In this case, if the scripts are connected in the wrong order, some of your scripts may cause errors or may not work properly. This, however, depends heavily on which scripts you use.

+40
Oct 10 '08 at 11:28
source share

It is recommended that you place the meta tag with character encoding as high as possible. If the encoding is not included (or differs from) the response header of the requested page, the browser will have to guess what the encoding is. Only when he finds this meta tag does he know what he is dealing with, and he will need to read everything that it has already analyzed again.

See for example Ways to Specify a Character Set .

+9
Oct 10 '08 at
source share

Important to note: if you use the Internet Explorer meta X-UA-Compatible tag to switch rendering modes for IE, this should be the first in HEAD:

 <head>
   <meta http-equiv = "X-UA-Compatible" content = "IE = 7" />
   <title> Page title </title>
   ... etc
 & lt / head>
+8
Oct 10 '08 at 11:51
source share

meta doesn't matter, but the link (for css) and the script matter.

The script blocks most browsers from rendering the page to loading scripts. Therefore, if possible, place them not in the head, but in the body.

The css link will not block the display of the page.

+5
Oct 10 '08 at 11:27
source share

It is generally recommended that you have the <script> as low as possible on the page (not in the head, but in the body).

Other than that, I don’t think it matters much, because the body cannot be analyzed unless you have fully loaded the <head> section. And you want the <link> be in your head, since you want your style to be executed when the browser displays your page, and not after that!

+2
Oct. 10 '08 at 11:29
source share

If you declare a charset in a meta element, you must do this before any other element.

+2
Oct 10 '08 at 11:35
source share

Not a stupid question.
CSS above Script tags for already mentioned reasons.

CSS is applied in the order you place the tags — a more specific style sheet than the lower the order it should be.

The same goes for scripts - scripts that use functions declared in other files must load after dependencies are loaded.

+2
Oct 10 '08 at 11:41
source share

Put a meta tag that declares the encoding as the first element in the head. The browser only searches for the tag. If you have too much material in front of the meta element, the encoding may not apply.

If you are using a BASE element, place it in front of any elements that load the URI (if desired).

+2
10 Oct '08 at 14:45
source share

It would be important if one of the linked files (CSS / Javascript) depended on the other. In this case, all dependencies must be loaded first.

Say for example you download the jQuery plugin, you need to download jQuery first. The same when you have a CSS file with some rules that extend other rules.

+1
Oct 10 '08 at 11:28
source share

As already indicated, the meta-description of the encoding contents must be the first, otherwise it could be a security hole in a certain situation. (sorry, I don’t remember this situation well enough to describe here, but it was shown to me on the course on Internet security)

+1
Oct 10 '08 at 15:45
source share

I recently had a problem with the draggable jquery ui element. This works correctly in Firefox, but not in Safari. After tons of trial and error, the fix was to move my css links over javascript links in my head. Very strange, but it will now become my standard practice.

+1
Oct 11 '08 at 5:57
source share

For validation purposes as XHTML, yes. Otherwise, you are likely to care about optimization responses.

+1
Oct. 15 '08 at 21:26
source share

No, it doesn’t matter, except to bind or enable CSS due to CSS inheritance and the fact that it overwrites what has already been written (sorry for my English, I think my sentence is not entirely clear: - /).

0
Oct 10 '08 at 11:28
source share


More articles:


All Articles