html.md

   1 ---
   2 title: HTML
   3 category: HTML
   4 layout: 2017/sheet
   5 ---
   6
   7 ### Head stuff
   8
   9     <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  10     <link rel="shortcut icon" type="image/png" href="/favicon.png">
  11     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12
  13 ### iPhone viewport
  14
  15     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
  16     <meta name="viewport" content="width=device-width">
  17     <meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <!-- full example -->
  18
  19 ### Default OpenGraph meta tags
  20
  21     <meta content="..." name="description">
  22     <meta content="..." property="og:description">
  23     <meta content="http://.../preview.jpg" property="og:image">
  24     <meta content="Hello There" property="og:title">
  25     <meta content="Hello There" property="og:site_name">
  26     <meta content="hellothere" property="fb:admins">
  27     <meta content="website" property="og:type">
  28
  29 ### Webfonts
  30
  31     <script>WebFontConfig={    },function(a,b){var c=a.createElement(b);c.src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js",c.async=1;var d=a.getElementsByTagName(b)[0];d.parentNode.insertBefore(c,d)}(document,"script")</script>
  32
  33     // {typekit{id:"..."}}
  34     // {google:{families:['Exo:400']}}
  35
  36 ### Google Analytics
  37
  38     <script>location.hostname.match(/helloworld\.com/)&&(_gaq=[["_setAccount","UA-XXXXX-1"],["_trackPageview"]],function(a,b){var c=a.createElement(b),d=a.getElementsByTagName(b)[0];c.async=1,c.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js",d.parentNode.insertBefore(c,d)}(document,"script"))</script>
  39
  40 ### FB/Twitter
  41
  42     <div id="fb-root"></div><script>fbAsyncInit=function(){FB.init({"appId":"___APPIDGOESHERE___","status":true,"cookie":true,"xfbml":true})};!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=1;js.src='//connect.facebook.net/en_US/all.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','facebook-jssdk');</script>
  43
  44     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=1;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  45
  46 ### HTML5 Shiv for IE8
  47
  48     <!--[if lte IE 8]><script src='//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js'></script><![endif]-->
  49
  50 ### H5BP HTML tag (IE8 and IE9 only)
  51
  52     <!--[if lte IE 8]><html class="ie8"><![endif]--><!--[if IE 9]><html class="ie9"><![endif]--><!--[if gt IE 9]><!-->
  53     <html><!--<![endif]-->
  54
  55 ### Touch icons
  56
  57  * apple-touch-icon-precomposed.png
  58  * apple-touch-icon-57x57-precomposed.png
  59  * apple-touch-icon-72x72-precomposed.png
  60  * apple-touch-icon-114x114-precomposed.png
  61  * apple-touch-icon-144x144-precomposed.png
  62
  63 ### Icons
  64
  65     <link rel="shortcut icon" type="image/png" href="favicon.png">
  66     <link href="apple-touch-icon-precomposed.png" rel="apple-touch-icon">
  67     <link href="apple-touch-icon-57x57-precomposed.png" size="57x57" rel="apple-touch-icon">
  68     <link href="apple-touch-icon-72x72-precomposed.png" size="72x72" rel="apple-touch-icon">
  69     <link href="apple-touch-icon-114x114-precomposed.png" size="114x114" rel="apple-touch-icon">
  70     <link href="apple-touch-icon-144x144-precomposed.png" size="144x144" rel="apple-touch-icon">
  71
  72 Only do this if you're not placing the site in the root!
  73
  74 ### H5BP HTML tag
  75
  76     <!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
  77     <!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
  78     <!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
  79     <!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
  80     <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
  81
  82 ### Google jQuery
  83
  84     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  85
  86 ### Unsupported message
  87
  88     <!--[if lt IE 8]>
  89     <div class="unsupported-browser">
  90       <strong>
  91         You are using an outdated browser.
  92       </strong>
  93       <span>
  94         Please <a class="upgrade-browser"
  95         href="http://browsehappy.com/">
  96         upgrade your browser</a> or <a  class="chrome-frame"
  97         href="http://www.google.com/chromeframe/?redirect=true">activate Google
  98         Chrome Frame</a> to improve your experience.
  99       </span>
 100     </div>
 101     <![endif]-->
 102
 103 ### HTML Compatibility inspector
 104
 105     <script src="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js"></script>
 106
 107 More info here: [microsoft.com](http://ie.microsoft.com/testdrive/HTML5/CompatInspector/)