Table of content

HTML5 starter template

For all your needs.

Recommended helpers



The starter file includes HTML5shiv.js. HTML5Shiv is a JavaScript workaround, invented by Sjoerd Visscher, to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9, which do not allow unknown elements to be styled without JavaScript.

Noscript stylesheet


The <noscript> tag defines an alternate stylesheet for users that have disabled scripts in their browser or have a browser that doesn't support script: noscript.css

Print stylesheet


The <link href="" rel="stylesheet" media="print"> code defines an alternate stylesheet for printers.

Head structure

Inside the head tag


The starter file includes calls to CSS libraries and scripts from the hipertextos framework.

Inside the Head tag:

  • Basic metadata
  • Geolocation metada
  • Screen styles
  • Print styles
  • No script styles
  • Old iExplorer hack
  • Site feed
  • Page icons

We recommend this interesting tools:

HTML5 Starter

	<!DOCTYPE html>
	<html lang="en">
			<meta charset="utf-8">
			<!-- Metadata: Basic -->
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<meta name="description" content="PageDescription">
			<meta name="keys" content="PageKeys">
			<meta name="author" content="PageAuthor">
			<!-- Metadata: GeoTags -->
			<meta name="geo.region" content="PageRegion">
			<meta name="geo.placename" content="PagePlacename">
			<meta name="geo.position" content="PageLangitudeLongitude">
			<meta name="ICBM" content="PageLangitudeLongitude">
			<!-- Screen styles -->
			<link href="" rel="stylesheet" media="screen">
			<link href="" rel="stylesheet" media="screen">
			<link href="" rel="stylesheet" media="screen">
			<!-- Print styles -->
			<link href="" rel="stylesheet" media="print">
			<!-- If iexplorer :( -->
			<!--[if lt IE 9]><script src=""></script><![endif]-->
			<!--[if IE]><link rel="stylesheet" type="text/css" href="" /><![endif]-->
			<!-- If JS disabled -->
			<noscript><link href="" rel="stylesheet" media="screen"></noscript>
			<!-- Site Feed -->
			<link rel="alternate" type="application/rss+xml" title="rss" href="SiteFeedLink">
			<!-- Page Icons -->
			<link rel="shortcut icon" href="">
			<link rel="apple-touch-icon" sizes="57x57" href="">
			<link rel="apple-touch-icon" sizes="114x114" href="">
			<link rel="apple-touch-icon" sizes="72x72" href="">
			<link rel="apple-touch-icon" sizes="144x144" href="">
			<link rel="apple-touch-icon" sizes="60x60" href="">
			<link rel="apple-touch-icon" sizes="120x120" href="">
			<link rel="apple-touch-icon" sizes="76x76" href="">
			<link rel="apple-touch-icon" sizes="152x152" href="">
			<link rel="icon" type="image/png" href="" sizes="196x196">
			<link rel="icon" type="image/png" href="" sizes="160x160">
			<link rel="icon" type="image/png" href="" sizes="96x96">
			<link rel="icon" type="image/png" href="" sizes="16x16">
			<link rel="icon" type="image/png" href="" sizes="32x32">
			<meta name="msapplication-TileColor" content="#dddddd">
			<meta name="msapplication-TileImage" content="">
			<meta name="msapplication-config" content="">
			<!-- Page content -->
			<div class="page" id="page">
				<main id="content">
					<div class="content">
					</div><!-- /.content -->
			</div><!-- /#page -->
			<!-- Scripts
			================================================== -->
			<script type="text/javascript">