TUTOS.EU

HTML 5 - Template de page avec les essentiels

La scruture d'une page HTML 5 avec l'essentiels

Le template

<!DOCTYPE html>
<HTML lang="fr">
	<HEAD>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<!--[if !IE]><!--><!--<![endif]-->

		<!-- 
		Faut-il utiliser les META http-equiv?
		D'après http://www.alsacreations.com/article/lire/628-balises-meta.html
		En dehors de l'information sur l'encodage de caractères donnée par l'en-tête HTTP Content-Type, il n'est pas utile de dupliquer les informations de vos en-têtes HTTP en utilisant la balise META équivalente.

		http://validator.w3.org indique que <meta http-equiv="content-language" content="fr-FR" /> est dépassé:
		Using the meta element to specify the document-wide default language is obsolete. Consider specifying the language on the root element instead.

		En cherchant, on trouve cette précision :
		This feature is non-conforming. Authors are encouraged to use the lang attribute instead. (Bref, mettez ceci : <HTML lang="fr">, cf : http://www.alsacreations.com/astuce/lire/1151-langue-du-contenu.html)

		Donc ça, on oublie :
		<meta name="language" content="fr-FR" />
		et ca aussi :
		<meta name="language" content="fr-CA" />

		D'après alsacreations.com, <meta name="robots" content="all" /> ne sert à rien comme instruction, car c'est le comportement de base,cf :
		http://www.alsacreations.com/article/lire/628-balises-meta.html
				
	 	-->


		<title>Titre du site</title> <!-- Très important pour le référencement. Google fera un lien vers votre page avec ceci. C'est aussi le titre donné quand on met la page dans les favoris. Ne doit pas dépasser 70 caractères (pas une règle absolue, mais Google par exemple coupe les titres trop longs entre 65 et 70 caractères dans les pages de résultat). -->
		<meta name="Description" content="Description du site"/> <!-- Utilisé pour le référencement. Ne pas dépasser 200 caractères. -->
		<meta name="author" content="Bob l'éponge" />
		<meta name="Keywords" content="a, b, c"/> <!-- D'après http://www.alsacreations.com/article/lire/628-balises-meta.html, c'est obselète et ce n'est plus utilisé par Google. Mais allez trouver un site qui ne l'a pas. -->

		<!-- déclaration des fichiers de scripts -->
		<script type="text/javascript" src="/js/commonscripts.js"></script>

	</HEAD>
	<BODY>
	
		<?php
			//Tiré de http://www.siteduzero.com/informatique/tutoriels/les-magic-quotes-ou-guillemets-magiques/desactiver-les-magic-quotes
			//Cette option pour virer les magic quotes est importante lorsque l'on poste récupère des valeurs de champs Input et textarea faute de quoi par exemple C'est deviendra C\'est
			function stripslashes_r($var) // Fonction qui supprime l'effet des magic quotes
			{
				if(is_array($var)) // Si la variable passée en argument est un array, on appelle la fonction stripslashes_r dessus
				{
					return array_map('stripslashes_r', $var);
				}
				else // Sinon, un simple stripslashes suffit
				{
					return stripslashes($var);
				}
			}

			if(get_magic_quotes_gpc()) // Si les magic quotes sont activés, on les désactive avec notre super fonction ! ;)
			{
				$_GET = stripslashes_r($_GET);
				$_POST = stripslashes_r($_POST);
				$_COOKIE = stripslashes_r($_COOKIE);
			}
		?>

		<!-- Pour la structure, ce site explique très bien : http://www.siteduzero.com/tutoriel-3-561847-structurer-sa-page.html -->
		<div id="bloc_page">
			<header>
				<div id="titre_principal">
					<h1>Mon Titre</h1> <!-- Très important pour le référencement -->
				</div>

				<nav id="navMenu">
					<ul class="lstMenu>
						<li><a href="#">Accueil</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
			</header>

			<section>
				<article>
					<p>Blabla ...</p>
					<p>Blabla ...</p>
				</article>
				<aside>
					<h1>Notes sur l'auteur etc...</h1>
					<p>Blabla ...</p>
					<p>Blabla ...</p>
				</aside>
			</section>

			<footer>
				<div id="divLiensSociaux">
				</div>
			</footer>
		</div> <!-- div bloc_page -->
	</BODY>
</HTML>
Lien vers le fichier : cliquez ici