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" />
<!-- Pour que l'affichage s'adapte bien sur les smartphones -->
<!-- https://www.alsacreations.com/astuce/lire/1177-Une-feuille-de-styles-de-base-pour-le-Web-mobile.html -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
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>
Quand tous les navigateurs n'étaient pas compatibles avec le HTML5, on pouvait faire appel à un script Js html5shiv qui tentait de rattraper le coup
<!DOCTYPE html>
<HTML lang="fr">
<HEAD>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if !IE]><!--><!--<![endif]-->
</HEAD>
</HTML>Article(s) en relation(s)