I don’t know if it goes without saying, or if it simply remains unsaid, because it is automated, but orderly HTML is still important even in this CMS age that we live. I am going to re-consider the order of a well-formed document here. I intend for this to be a somewhat ‘opinionated’ document. It may not be a perfectly standards-based approach, but my version of an optimal solution with some assumptions and likely caveats (one among them is that our purpose is to optimize for speed with a mind to ‘organic SEO’¹). And it is likely to be a work in progress. So, here goes nothing….

A funny thing happened on the way to writing this article. I had meant to do some research to make sure that I was writing the head of my html documents optimally. However, along the way I found many questions too. So on the Webmaster Stack Exchange site, I answered my own question (or a fair approximation of it). And what follows is an embellished version of the same.

First things first, while the focus of the document is the head, I am still going to address the foregoing doctype declaration and the opening of the html tag. Here is the new highly-effective, and equally brief doctype declaration:

<!doctype html>

Next, the HTML tag. It is important to declare the language (and I personally prefer to further declare the region). English and Spanish are both regions with a number of variants.

<html lang="en-US">

It is a good idea to order your page’s head roughly thus (presuming HTML5 for syntax):


So far in the document, you should have only used ASCII² characters, so character encoding is not an issue yet. But the likelihood of using non-ASCII characters goes up markedly once you open that head tag. Accordingly, you should make the next statement your character-encoding declaration³. This also satisfies parsers/browsers/agents that would be sniffing for character encoding statements:

      <meta charset=“utf-8”>

For those of you that may be reasonably concerned that that doesn’t look like the tried and true meta tag of yore (e.g. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″> shudder), it is both correct in accordance with the HTML5 specification, and thoroughly-tested and proven cross-browser for some time now to be effective, notwithstanding its off-putting brevity.

I am not going to spell the following out in this document, because I lack the credentials. At this point, I will let it suffice to say that it is the assertion of the good folks in Bootstrap land (as recently as version 3.3.4) that we put those two meta declarations before the title also. I will assume at this point that they are relatively easy to process, and are unlikely to inhibit a browsers ability to rapidly display a title element, while simultaneously offering some very important information that the waiting user agent (usually a browser) would like to get its grubby little mitts on in short order.

      <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

If you are thinking about device-agnostic design/development (inclusive of smaller, non-desktop user agents), you should include the following:

      <meta name=“viewport” content=“width=device-width, initial-scale=1”>

Finally, the title. But first some unsolicited advice, because, why else would you be reading my blog? Given all the things that a title can be used for, places that it may be stored, and modes through which it may be transmitted, it may be wise to avoid the use of non-ASCII characters in the title. For instance if you use a Gmail extension or bookmarklet to pass a page (and content) to another page, the receiving page may not handle those decoded characters well. Similarly, if you use a Twitter-y add-on to send a tweet of a link to a page where the page’s title is passed, those tweets may be consumed by a device that doesn’t like right [double] angle quotes (i.e. “»”) or maybe (for all of its style) those em dashes or middle dots (“—” and “·” respectively) cause your well-intentioned browser to go klunk. You get the idea. Like I tell my kids, “Do what you can afford”:

      <title>Ingenious Page Title</title>

Next, you offer the CSS as soon after the title as possible (no ‘daylight’ between them):

      <link rel=“stylesheet” href=“stylesheet-1.css”>
      <link rel=“stylesheet” href=“stylesheet-2.css”>

If you are using page-level styles, they would go here. This is largely because of the ‘cascading’ nature of CSS: namely the last style declaration of identical levels of specificity (such as two statements that target a paragraph p). In order to make overriding external styles easier (i.e. without using greater specificity, or !important), you should put page-level styles after external styles (<link>s). Also, it is generally inadvisable to use the @import directive in page-level styles, because it will impede the concurrent downloading of other style assets:


This is the point where it seems most appropriate to put meta tags, favicons, and other cruft. It is arguable that favicons or similar assets (e.g. iOS app images) would be loaded before most meta tags, because it gets the downloading of those assets started marginally sooner.

      <link rel=“shortcut icon” href=“favicon.ico”>
      <link rel=“apple-touch-icon” href=“apple-icon.png”>
      <meta name=“description” content=“Some information that is descriptive of the content”>
      <meta name=“generator” content=“Microsoft FrontPage 2002”>

Because it blocks/delays rendering, if you intend to require scripts, load them as late as is reasonable. If they must be in the head, you might load them before the close of the head (</head>). If you can load them later, put them before the close of the body tag (</body>).

      <script src=“script-1.js”></script>
      <script src=“script-2.js”></script>

It seems unimportant in most cases to order your meta tags for SEO purposes, given that they are going to consume the whole page. Otherwise, how would they index a page’s content, or update that index later?

Lastly, it is notable to me that for all that we think we know, and all the recommendations that we find on the web (even from places like Google and Bing Webmaster Tools, etc.), sites like Amazon, Google and other folks who clearly care about such minuscule performance gains don’t follow these rules.


¹Organic SEO – that ‘search engine optimization’ that grows naturally out of good content and the reasonable application of best practices, rather than the stilted and purposeful implementation of strange non-intuitive, measures whose only end is to “bubble up” in a search engine’s ranking.

²ASCII is the 7-bit/128-character set which includes all Roman/Latin/English letter characters in the upper-case (A-Z) and lower-case (a-z), Arabic numerals (0-9), special characters (˽!”#$%&'()*,-./:;<=>?@[\]^_`{|}~), and some special non-printing characters which include things like NULL, DEL, TAB, etc.

³This of course assumes that you have not declared the character set in a ‘header’ or using your server, similar to any of the following Apache httpd directives …

  • AddDefaultCharset UTF-8
  • AddCharset UTF-8 .js
  • AddType 'application/javascript; charset=UTF-8' js*