Posted by & filed under HTML, Javascript, jQuery, Website Development.

Whenever I want to quickly make a webpage, I don’t want to have to build the whole page everytime. Here is my starter code for an HTML5 page. The key points are :

  • HTML5 Doctype – Ready
  • Viewport and Mobile – Ready
  • Title tags, Character Set, Keyword and Description Meta, Favicon, Stylesheet tags – Ready
  • Google Font – Ready
  • Javascript and jQuery – Ready
  • jQuery CDN for lastest version of jQuery – Ready
  • HTML5 Shiv for IE9 and less – Ready
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTML Starter Template</title>

<meta name="keywords" content="HTML5,quickstart,template">
<meta name="description" content="HTML5 Quickstart Template">
<meta name="author" content="GetPowers Coding">

<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link href="" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/quickstyle.css">

/* Your CSS3 styling here */


<!--[if lt IE 9]>
<script src=""></script>

<!--- Observable Content Here --> 

<script src="" type="text/javascript"></script>

/* Javascript and jQuery here */



It’s useful to have some quick CSS, but not something bloated. Here is my CSS template as well. I set the width to 90% so that it will quickly work on mobile or full screen.

/* quickstyle.css */

body {
margin:10px auto;
font-family:'Open Sans',verdana,arial;

If you want to make your site feel more like a web application. Try adding the following:

<meta name="apple-mobile-web-app-title" content="DriversTestInfo">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" href="/startup-image.png">

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> 
<link rel="icon" sizes="196x196" href="nice-highres.png">
<link rel="icon" sizes="128x128" href="niceicon.png"> 

For Chrome and iOS web application details try the following: