HTML Crib Sheet

  • view-source URI Schema
    • <a href="view-source:#">View the Source of this page.</a>
  • Use either of the following two to create a link (relative to the application’s root):
    In the cases below, link creates a full anchor (<a>) tag/element, whilc createLink only returns/prints the URL/href/src.
    • View the Source of this page: you will have to enter the address into the address bar manually (copy-paste will suffice): view-source:https://fun.wd2.us/reference/language/html.html

Optimal Meta Layout of HTML

From a Stack Exchange write-up.

The purpose of this document is chiefly to outline some best practices when writing the head of an HTML document HTML, and related non-content considerations.

When I began writing this, it was intended to cover the optimal order of the head of an HTML5 document. Even that is not exclusively focused on the head, e.g. moving the JavaScript to the end of the body, and addressing just a little about the doctype declaration and html tag. I have lots of opinions about HTML, but I won’t outline them all here now. Since most of our work in this arena is focused on applications (which are not especially friendly to search engines), we will not focus on SEO. However, (and this is a sincere however), even if our focus was chiefly sites and not apps, I would still advocate for so-called 'organic' (or white-hat) SEO: namely, write good content, and good code, and you will 'organically' bubble up.

With all of that pedantry out of the way, here are my lofty opinions about the headmeta tags, and more.

The doctype in HTML5 is famously brief (at least for those old-timers that are accustomed to them HTML4 and XHTML doctype declarations):

<!doctype HTML>

The html (object/element/document) should begin directly after, being careful also to declare the language code (preferably with region):

<html lang="en-US">

Now, … it is a good idea to order your page’s head roughly thus:

  <head>

So far in the document, you should not have used any non-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 (and assuming that you are not declaring your character encoding programmatically or at the server level), 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">

The following two meta tags (X-UA-Compatible and viewport) are recommended by the folks at Bootstrap (as recently as v3.3.4). While I am nearly positive that their recommendation to put them so early in the head are based on performance, most of what I would say would be speculative. The first statement (directed at IE) indicates that it should not fallback to compatibility mode, but should instead use the most up-to-date version of its (Trident) rendering engine:

    <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. It tells the browser (especially mobile user agents) to use all of the space available (generally pushing the layout to the edges):

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

Finally, the title:

    <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 (links). Also, it is generally inadvisable to use the @import directive in page-level styles, because it will impede the concurrent downloading of other stylesheets:

    <style>body{color:black;}</style>

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. If you can load them later, put them before the close of the body.

    <script src="script-1.js"></script>
    <script src="script-2.js"></script>
  </head>

Lastly (at least for now), 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 those search engines index a page’s content, or update that index later?

Lastly-er, 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.