In <head>, which comes first: <meta> or <title>?

HtmlTitleMeta Tags

Html Problem Overview


In head, which comes first: meta or title?

I was reading this:

> This [meta] tag should be the first in the > HEAD section, because the server will > process the text above as ASCII with > no specific format that it only known > once the tag is analyzed.

http://www.xul.fr/en/html5/html.php

Does the standard specify the order?

Are there disadvantages in either order?

Html Solutions


Solution 1 - Html

As all of the other answers have already indicated, it usually doesn't matter. Here's a bit more about when it matters and why.

First of all, since you asked about standards, you might like to know that the text you are quoting comes from the W3C recommendations for HTML 4:

http://www.w3.org/TR/html4/charset.html#h-5.2.2

There is a similar discussion in the HTML 5 draft standard:

http://dev.w3.org/html5/markup/syntax.html#encoding-declaration

The underlying issue here is that the browser has to use some character set encoding to start processing the document it receives from the server. So, what happens if starts with one character set and then the <meta> tag tells it to use something else? The answer is, it depends...

The server should specify the character set in the Content-Type field of the HTTP response header. If it does, the browser is supposed to use that character set and ignore any character set that may be indicated in a <meta> tag in the document being served.

Unfortunately, many servers don't provide this information. In that case, the browser has to assume something to get started. The something has to be "ASCII-compatible", meaning that it agrees with ASCII for any characters in the ASCII range. If the document specifies the character set in a <meta> tag, the browser will start using that character set. So, if your title came before that, it has already been interpreted as ASCII, which could be wrong, depending on what was in the title.

To sum up: if the server does not specify the encoding, and the title is encoded in something other than ASCII, then you need to put the <meta> tag that specifies the charset first. Otherwise, it doesn't matter. So, to be safe, it makes sense to put the <meta> tag for the character set first.

Solution 2 - Html

The order of the tags is almost completely irrelevant.

That quote is talking about <meta http-equiv="content-type">.
If you use that tag, it should come first, so that the browser knows which encoding to use to parse the rest of the document.

As long as you don't have any non-ASCII characters before it, its location doesn't matter.

Solution 3 - Html

It does not matter unless you deal with IE and want to use the X-UA-COMPATIBLE

<meta http-equiv="X-UA-Compatible" content="IE=7" />

This should be the first one in the head, if it is to be evaluated by IE... (otherwise it ignores it)

Solution 4 - Html

In most cases, it doesn't matter at all. Usually I put <title> first, but it is completely up to your preference.

Solution 5 - Html

@Gaby aka G. Petrioli -

For a long time, I too, thought that the "X-UA-Compatible" meta tag needed to come first or it is ignored by IE. It should be noted that the <title> tag can come first. Additionally, there can be no other types of tags (<link> or <script>) before the IE compatible meta tag.

Please see https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx and note:

> The X-UA-Compatible header isn't case sensitive; however, it must > appear in the header of the webpage (the HEAD section) before all > other elements except for the title element and other meta elements.

So, to keep on topic with the OP's question; again, it doesn't matter if the meta tag is first or the title tag is first. The only real caveat being the character set meta tag (as noted in Joel Lee's answer above).

I would add that a solid practice to follow would be to place the Character Set meta tag first within the <head>, followed immediately by the IE Compatible meta tag, followed then by the <title>. Like this:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <title>Cool Page</title>

Any additional tags that live in the <head> could follow the <title>.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionXP1View Question on Stackoverflow
Solution 1 - HtmlJoel LeeView Answer on Stackoverflow
Solution 2 - HtmlSLaksView Answer on Stackoverflow
Solution 3 - HtmlGabriele PetrioliView Answer on Stackoverflow
Solution 4 - HtmlvoidzmView Answer on Stackoverflow
Solution 5 - HtmlJon RyserView Answer on Stackoverflow