What are best practices to order elements in <head>?
Asked Answered
H

7

104

can use anything in any order? does placing of <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> is important before <title>

this is most used, is it best way?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title Goes Here</title>
    <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
    <link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

        $("#wmd-input").focus();
        $("#title").focus();
        $("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });

    });        
</script>


</head>

<body>
<p>This is my web page</p>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>

</html>

this site http://stackoverflow.com doesn't have any encoding and <meta>

I use a CMS which has SEO component which adds every <meta> for SEO after all js and css. files. can placing of any elements in any order which are allowed in <head> affect document compatibility and encoding?

Hyperbole answered 31/12, 2009 at 20:49 Comment(8)
Where did all the comments go?Leandra
This site (stackoverflow.com) does have its encoding set (to UTF-8), it's just in the HTTP headers where it belongs. Defining the charset in a meta tag is kind of a hacky workaround.Schlemiel
Right. It's preferable to define the charset in the HTTP headers, but in some situations you can't set those (such as loading files off of your local disk), so the <meta> tag is a workaround for those cases, but not essential.Proprietor
There was a bunch of comments right here, at least nine or ten. They were nothing special but there was nothing offensive in them, either. Where did they all go? Who has the power to delete comments and why?Leandra
We all have the power to delete our own comments; did some people delete their own? I never saw the comments on this question, as I was busy composing my answer. Are you sure you're not thinking of another question?Proprietor
I'm 100% sure, there was one from NSD, one from Jitendra, and two of my own that I didn't delete and that don't show up in my activity tab any more, either. I know this was the same question because I had it upvoted to even out the two downvotes (if you will check you will see that it has three downvotes total), and my orange upvote was in place. It's not that those comments were in any way important but I would like to know why they were removed.Leandra
Huh, that is odd. Maybe post a question on meta.stackoverflow.com to ask about it? It could be a bug, or a mistake made by an admin; it sounds like something worth asking about.Proprietor
Done. meta.stackexchange.com/questions/34268/…Leandra
P
114

In HTML, the DOCTYPE must come first, followed by a single <html> element, which must contain a <head> element containing a <title> element, followed by a <body> element. See the description of the global structure of an HTML document in HTML 4.01 and the HTML5 draft; the actual requirements are mostly the same other than the DOCTYPE, but they are described differently.

The actual tags (<html>, </html>, <head>, etc) are optional; the elements will be created automatically if the tags don't exist. <title> is the only required tag in HTML. The shortest valid HTML 4.01 document (at least, that I could generate) is (needs a <p> because there needs to be something in the <body> to be valid):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>

And the shortest valid HTML5 document:

<!DOCTYPE html><title></title>

Note that in XHTML, all tags must be specified explicitly; no elements will be inserted implicitly.

Browsers perform content type sniffing in some circumstances to determine the type of a resource that hasn't been specified using a Content-Type HTTP header, and also character encoding sniffing if the Content-Type header hasn't been supplied or doesn't include a charset (you should generally try to include these headers, and make sure that they are correct, but there are some circumstances in which you cannot, such as local files not transferred over HTTP). They only sniff a limited number of bytes at the beginning of the document for these purposes, though, so anything that is intended to affect the content sniffing or character encoding sniffing should be near the beginning of the document.

For this reason, HTML5 specifies that any meta tag which is used to specify the character set (either <meta http-equiv="Content-type" content="text/html; charset=..."> or simply <meta charset=...>) must be within the first 1024 bytes of the file in order to take effect. So, if you are going to include character encoding information within your document, you should put the tag early in the file, possibly even before the <title> element. But recall that this tag is unnecessary if you properly specify a Content-type header.

In CSS, later style declarations take precedence over earlier ones, all else being equal. So, you should generally put the most generic style sheets that may be overridden earlier, and the more specific style sheets later.

For performance reasons, it can be a good idea to put scripts at the bottom of the page, right before the </body>, because loading scripts blocks the rendering of the page.

Obviously, <script> tags should be ordered so that scripts that depend on each order have the dependencies loaded first.

On the whole, other than the constraints I have already specified, the ordering of tags within <head> shouldn't matter too much, other than for readability. I tend to like to see the <title> towards the top, and put the other <meta> tags in some sort of logical order.

Most of the time, the order you should put things into the body of an HTML document should be the order they should be displayed in, or the order they should be accessed. You can use CSS to rearrange things, but screen readers will generally read things in source order, search indexes will extract things in source order, and so on.

Proprietor answered 31/12, 2009 at 21:46 Comment(8)
That TITLE is mandatory was news to me and seems a little strange. But checking the official spec you're absolutely correct of course. Live and learn!Traylor
What surprised me is that it's the only mandatory tag... I've actually argued that it should be made optional as well in HTML5 (as it's not really necessary for things like gadgets that will always be in an iframe and never have a visible title), but they decided not to change that this time around.Proprietor
@Brian - thanks brian for this nice explanation. SO never disappointed me. this site has masterminds. and one more thing U understands question very well then u give answer very well. great work.Hyperbole
@Brian - i expect you to answer my this question #1963197Hyperbole
@Jitendra Ha ha! I have answered a bunch of your recent questions, haven't I? I'm a bit drunk from a new year's party. But I can try... I just won't guarantee that my answer will be as good as the last couple, though.Proprietor
Actually, you can take advantage of SHORTTAG, shrinking that <title></title><p> to <title//<p> for the shortest valid HTML 4.01 document ;)Mraz
@Mraz Technically valid, but SHORTTAG doesn't actually work in any browsers that I know of, so I consider that more of a bug in the spec than an actual feature. But yes, if you're just considering what is a valid HTML 4.01 document, you can indeed use a SHORTTAG abbreviation.Proprietor
The modern approach is to put <script> tags with an async or defer attribute in <head>. See #436911Jourdain
F
35

This is the template I use, just delete whatever you dont need for a new project.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <meta name="robots" content="index, follow">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="scss/style.css" />

    <!-- http://realfavicongenerator.net/ -->

    <meta property="fb:page_id" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:site" content="">

    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
  </body>
</html>
Fulmis answered 10/6, 2015 at 19:54 Comment(5)
X-UA-Compatible must be first tag in head due to #3449786Wehrle
@Wehrle do you know what is <html class="default"> mean ?Hambrick
@stom do you mean why there are class attribute? It requires additional JavaScript code to remove that class once page loads. Doing this - you will know is JavaScript is enabled in browser. If this attribute still exists - this means JavaScrips is disabled so you can show some message to user using CSS, if you needWehrle
@Wehrle use <noscript></noscript> to check for javascript enabledDeonnadeonne
Could you comment, please, on your reasoning for this order?Hyalite
K
9

Adding a few performance suggestions to Brian's answer, highest priority should logically be things that will need to be downloaded, so the browser can start downloading them asap, and things that will affect how the page is presented. So I'd suggest:

  • Metas affecting appearance, such as charset (required early by the spec too), viewport, apple-mobile-web-app-capable
  • Title near the top so the browser can render it asap and user has a sense something is happening
  • Favicon and touch icons
  • CSS (at least CSS for above-the-fold; other CSS can be loaded in the footer if you want to get fancy). This step typically blocks everything else from proceeding, which is why I put the previous items above it, as they provide some feedback during the CSS delay.
  • Critical scripts (such as user-agent sniffing that may affect layout) which can't be loaded in the footer
  • Everything else (e.g. necessary metadata in the form of links and meta tags)

You might also consider inlining whatever CSS and JS is loaded in head, especially if its small and the external script/sheet is unlikely to be cached according to your typical visitor's profile. And if you do inline it, you'll ideally want to compress it.

Last thing: The user has to wait around for head - and any blocking resources it loads - so it's best to put as much as possible in the body or footer.

Kegler answered 30/8, 2014 at 10:4 Comment(0)
C
9

According to W3 should be:

  • Meta charset
  • Title
  • Meta name="descripition"
  • Meta name="keywords"
  • Stylesheet
  • JavaScript Files
Christner answered 22/10, 2014 at 10:45 Comment(2)
Linked article is redirecting, and it doesn't seem to say anything about order.Hyalite
Stylesheets are render-blocking, rather load js async before CSS.Sienese
H
6

Most browsers don't mind how you order your elements, but you should always specify charset first.

Best practices for IE7+ require that the charset, X-UA-Compatible, and base declarations occur before anything else in the head, otherwise the browser starts over and re-parses everything that came before.

Housen answered 24/3, 2012 at 23:18 Comment(0)
S
5

You want your content-type first as this denotes the character encoding, otherwise if it comes later on, some browsers attempt to guess the encoding. (I can't remember the specifics, but I think IE will guess if it doesn't find an encoding in the first 75 characters of the document?)

Most webservers send the encoding in the HTTP headers, but if a user saves your page, the headers aren't saved with it.

I'd put CSS references second so the browser downloads them as soon as possible.

JavaScript I wouldn't put in the head, it should go at the bottom of your pages as downloading them blocks rendering of pages.

Sorrel answered 31/12, 2009 at 21:48 Comment(0)
C
0

IIRC, some browsers will re-load the document upon encountering a content-type element. So that element should probably come first within the head element of the document.

Clatter answered 31/12, 2009 at 22:23 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.