My ultimate HTML startup template

I used to copy the head element and its content from my old projects but that got tedious and sometimes it didn’t work, so I made this template.

This template has pretty much everything I need to get started when it comes to IE exceptions, meta elements and links to iOS icons.

The script in the very top is to detect Internet Explorer 10 as it cannot be detected by using conditional comments like [if IE 10]. In fact it cannot read them at all (Thanks Microsoft!).

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<script>  
if (/*@cc_on!@*/false && document.documentMode === 10) {
   document.documentElement.className+=' ie10';
}
</script>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="white" />
    <meta name="googlebot" content="index,archive,follow,noodp" />
    <meta name="robots" content="all,index,follow" />
    <meta name="msnbot" content="all,index,follow" />
     
    <!--[if lt IE 9]>
     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
   <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144.png">
    <link rel="apple-touch-startup-image" href="images/apple-touch-startup-image.png">

    <title>Title</title>
  </head>
  <body>
     
  </body>
</html>

Updated

I’ve updated the template to include CDJS links to html5shiv and respond.js

Do you have anything else in your startup template?

Thoughts and comments

  1. This will get me started, it seems that I keep making mistakes by copying old programs too. My inspiration that keeps me going is to someday make a mobile app that everybody wants.

Share your thoughts on this

Your email address will not be published.