Skip to content

Instantly share code, notes, and snippets.

@neilrenicker

neilrenicker/understanding-head.mdown

Last active December 15, 2015 16:09
Show Gist options
  • Save neilrenicker/5287578 to your computer and use it in GitHub Desktop.
Save neilrenicker/5287578 to your computer and use it in GitHub Desktop.
Download ZIP
This is me write-thinking through the <head> element.
Raw
understanding-head.mdown

It's all in your <head>

You know all of those questions about your html <head> element that have kept you lying awake at night? Right. We're going to address each one, clear them up, and have you sleeping soundly night after night in no time at all.

1. Elements that must be in your <head>:

  • Character encoding specification: This declaration, contained within a <meta> tag, tells the browser which character set you want your site to be rendered with. Failing to declare this on every page can lead to security vulnerabilities. Standard practice is to use UTF-8 encoding, and the declaration should be placed near the top of the <head> tag:

      <meta charset="utf-8">

  • Title tag: The <title> tag should be included to give an overarching description of the page's content. It displays as the title in search engine results, and in the browser tab in most browsers:

      <title>Our Menu - Snoopy's Bar and Grill</title>

  • Description meta The description meta will populate the content of search engine result previews, as well as describe to search engines the content of your page:

      <meta name="description" content="Snoopy's Bar and Grill is the last food joint you'll ever need to know about. Cold drinks and hot sandwhiches served around the clock.">

  • Mobile viewport: The viewport meta tag allows you to define the width of your viewport. You'll want to set the width of your site to be equal to the device width, to ensure that your site fits completely within the viewport area. Additionally, you'll probably want to set an initial scale of "1.0" to prevent mobile browsers from zooming your design on initial page load:

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

  • Favicon: If you create a custom favicon (you should!), you'll need to link to it in your <head>. The favicon will be displayed near the title of your page in most browsers, providing visual identification of the site for your visitors. Designating a "link relation" (rel="") explains the purpose and type of link that is being used.

      <link rel="icon" href="favicon.ico">

  • External stylesheets (if you have them): If you've written your CSS in an external stylesheet (and you probably should have), you'll load that up in your <head> as well. Also, don't forget to load your normalize.css or reset.css first if you have one:

      <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/base.css">

2. Elements that aren't required, but should be considered.

  • Link to Modernizr.js: If you're using Modernizr, you'll need to link to it in your <head>. All of your other Javascript files can (and should) be linked to at the bottom of each page, right before the closing </body> tag for quicker page loading.

    By the way, if you're writing your markup in HTML5, and plan to use CSS3 and Javascript, you'll almost certainly want to include Modernizr. It includes a version of HTML5 Shiv, which will allow new HTML5 elements to display properly in old versions of IE. Also, it will apply appropriate classes to the <html> element that will give you handles to gracefully degrade your CSS3 and JS enhancements for older browsers.

      <script src="js/modernizr-2.6.2.min.js"></script>

  • X-UA-Compatible meta: Modern versions of Internet Explorer (IE8 and IE9) are capable of rendering sites with outdated rendering engines. We can ensure that IE will always render with its latest engine by setting the following meta tag. Adding this to the head will make your HTML invalid, so it might be worth considering adding the functinality with your .htaccess file instead. Here's the tag as you'd add it within your <head>:

      <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome-1">

  • Touch icons Adding touch icons allow you to determine the icons that will be used if an iOS user saves a shortcut to your website on their mobile device. You need to create PNG files of these icons, and link to them in your <head>.

    Designating "precompressed" in the link will ensure that default iOS styles are not applied to the icon (like shadows and glossy effects), and listing the links from large to small ensures that older iOS devices will only download the smallest icon for use. Actually, for iOS devices, Safari will automatically look in your root directory for these files, so there's no need to link to them. Most Android device browsers won't automatically look for these, however, so you'll want to link to them for Android support.

      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x144" href="apple-touch-icon-114x114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

  • RSS Feed Link If your site features syndicated content, you'll probably want to add a link to your RSS feed location within your header. This isn't required, but it will tell feed syndicators (like Google Reader) to quickly capture your feed if users want to follow along with RSS. Note: this link tag uses a "link relation" of alternate - this is required for Feed Links to function properly.

      <link rel="alternate" type="application/atom+xml" title="Snoopy's Daily Specials Feed" href="/feed/" />

3. Way above your <head>: old IE, CSS, and Javascript support

Conditional <html> classes: One way of dealing with the lack of Javascript support and bad CSS support in old versions of Internet Explorer is to set up conditional comments just above the head. These conditinal comments will determine the classes that get set on the <html> - which you can then use to target specific versions of IE.

By default, your <html> tag should have a class of of no-js to give you a hook for styling for browsers that don't support JavaScript. Modernizr will overwrite this class with js (among others) in browsers that do support Javascript. The last conditional comment is the default <html> tag:

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

4. Making <head>way: old IE and media query support

Using Breakpoint: For those of us who write our CSS from a mobile-first perspective, older browsers that don't support media queries pose a real problem. If nothing is done to address this, these old browsers will always serve up the CSS aimed at small device-widths.

Breakpoint solves this problem well by allowing you to easily build a separate stylesheet for browsers without media query support. Supporting these browsers actually becomes simple! Just place conditional comments like this in your <head>:

<link rel="stylesheet" href="css/base.css">
<!--[if (lte IE 8)&(!IEMobile)]> <link rel="stylesheet" media="screen" href="css/no-mq.css"> <![endif] -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment