L'En-tête d'un document
<p>
Pour la conception j'utilise une grille de mise en page que je peux afficher par le biais du script hasgrid. Ce script hasgrid est le seul à ne pas figurer dans le head mais à la fin du body. Ainsi lorsque le site ne sera plus en développement, il suffira d’effacer ces dernières lignes</p>
<pre>
<head>
<meta charset="utf-8">
<meta name="viewport" content="">
<title>Gabarit Site en Html5 - Responsive webdesign - médias queries</title>
<meta name="description" content="maxi 200 caractères pour décrire la page." />
<meta name="keywords" content="mots-clés" />
<meta name="author" content="auteur" />
<!-- Affichage d'une icone dans la barre d'adresse du navigateur-->
<link rel="icon" type="image/png" href="http://simplegeek.fr/img/favicon.png" />
<!-- Feuille de styles génériques -->
<link href="http://simplegeek.fr/css/styles.css" rel="stylesheet" />
<!-- Permettre aux ancienens versions d'IE de reconnaître les balises Html5 -->
<!--[if lt IE 9]>
<script src="http://simplegeek.fr/js/html5shiv.js"></script>
<![endif]-->
<!-- Permettre à IE d'interpreter les css3 fluides: max-width, min-width, etc.. -->
<!--[if lt IE 9]>
<script src="http://simplegeek.fr/js/respond.min.js"></script>
<![endif]-->
<!-- Permettre une compatibilité des anciens navigateurs avec tous les anciens navigateurs -->
<!-- Prend la suite là où respond.js s'arrête -->
<!-- [if (It IE 9) & (!IEMobile)]>
<script type="text/javascript" scr="js/css3-mediaqueries.js"></script>
<![endif]-->
<!-- Création des flux rss -->
<link rel="alternate" type="application/rss+xml" title="Fil Rss des articles" href="http://www.mondomaine/rss" />
<link rel="alternate" type="application/rss+xml" title="Fil Rss des commentaires" href="http://www.mondomaine/rss/commentaires" />
<!-- Utiliser la dernière version de jQuery : 1.10.1 -->
<script type="text/javascript" src="http://simplegeek.fr/js/jquery.min.js"></script>
<!-- Statistiques Google analytics -->
<script src="http://simplegeek.fr/js/ga.js"></script>
</head></pre>
<pre>
<body>
<div="wrapper"><!-- Enveloppe globale pour centrer et taille fixe du site -->
</div><!-- fin Wrapper -->
<!-- Script uniquement dans le code du site en cours de developpement -->
<!-- Permet d'afficher une grille de mise en page -->
<!-- Include le hashgrid script -->
<script type="text/javascript" src="http://simplegeek.fr/js/hashgrid.js"></script>
<!-- Mettre en action hashgrid -->
<script type="text/javascript">
var grid = new hashgrid({ numberOfGrids: 2 });
</script>
</body></pre>