Introduction au HTML 5 : structure de page
Cela fait un certain temps maintenant que l’on parle de HTML5, et je ne m’y étais encore jamais vraiment intéressé. Cependant, dans un but de veille constante, nous nous devons, développeurs, de suivre les évolutions des différents langages. C’est pourquoi je profite de la refonte d’un site pas très important pour me pencher sérieusement sur les possibilités offertes par cette nouvelle version.
La première nouveauté, que nous allons aborder aujourd’hui, concerne la structure des pages. Celle-ci est considérablement simplifiée par rapport aux versions antérieures, et l’accent est mis sur la sémantique des différents éléments. Si vous en avez assez de mettre une div à la fois pour votre footer et pour votre article (qui ont tout de même deux niveaux d’importance bien différents), le HTML 5 est fait pour vous ! :)
HTML 5 : une structure de page simplifiée
On commence avec le doctype. Pour rappel, le doctype permet d’indiquer au navigateur quel jeu de règles utiliser. En son absence, le navigateur se mettra en mode Quirks (rien à voir avec le capitaine… :p), qui correspond à un mode de compatibilité maximale, et produit donc des surprises de tailles. Le doctype est donc un élément à ne surtout pas oublier. Voici le doctype HTML 5 :
<!DOCTYPE html>
Comparé à l’ancien doctype, celui-ci est plutôt très simple, non ? Vous pouvez même vous payer le luxe de l’apprendre par coeur, ce qui était quasi-impossible avec la version précédente. ;)
On simplifie également la balise html, qui n’a plus besoin des paramètres xmlns ou xml:lang pour être valide. Ainsi, elle devient tout simplement :
<html lang="fr">
A l’intérieur, on retrouve comme dans les versions antérieures les mêmes balises, à savoir head et body. Peu de modifications, si ce n’est au niveau des attributs de balisage :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Hello World en HTML 5</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello world!</p>
<script src="script.js"></script>
</body>
</html>
Comme on peut le constater, on simplifie au maximum : on supprime les types des balises link et script qui sont respectivement du CSS et du Javascript, et on abrège au maximum la balise méta de définition de l’encodage.
A titre de comparaison, et juste pour le fun, voici la même page mais en XHTML Strict 1.1 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Hello World en HTML 5</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<p>Hello world!</p>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Les nouvelles balises sémantiques de HTML 5
Comme je l’indiquais plus haut, le HTML 5 confère plus de sens au balisage, en introduisant de nouvelles balises réservées à une utilisation bien précise.
Tout d’abord, la balise header, nav et footer, qui vous permettront respectivement d’indiquer l’emplacement de votre header, de votre menu principal (une seule balise nav par page) et de votre footer. Ainsi, notre page devient :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Hello World en HTML 5</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Jonathan Petitcolas en HTML 5</h1>
<nav>
<ul>
<li><a href="/">Accueil</a></li>
</ul>
</nav>
</header>
<h1>Hello World!</h1>
<p>Ceci est un hello world! en HTML 5.</p>
<footer>
<p>Tous droits réservés - Jonathan Petitcolas</p>
</footer>
</body>
</html>
Les experts en référencement doivent s’interloquer de voir deux balises h1 sur la même page. Et pour cause : cela est actuellement une hérésie : cette balise indiquant le titre principal de la page, il ne doit y en avoir qu’une seule. Néanmoins, dans cette nouvelle version, il peut y en avoir plusieurs. Il y a le titre du header, qui aura bien moins d’importance que le titre du contenu, ici Hello World!. ;)
Tout est structuré, sauf notre contenu, qui est directement à la racine de notre body. Pas très sexy. Heureusement, HTML 5 a pensé à nous, esthètes du code, et a introduit également d’autres balises : section, aside et article.
La première, section, est un peu l’équivalent des div actuelles. Elle va nous permettre d’indiquer une partie autre que le header ou le footer. Les divs sont ainsi reléguées à leur rôle primaire, la mise en page. Elles ne seront donc utiles que pour mettre un peu de CSS.
La balise article, comme son nom l’indique, servira à contenir les articles de votre blog, ou plus généralement, les parties pouvant être complètement indépendante du reste de la page.
Enfin, la balise aside permet d’indiquer du contenu lié à l’article, mais non essentiel à celui-ci. On pourra par exemple y mettre les sources utilisées, les méta-informations (date, auteur, etc.) ou tout autre élément en rapport. Elle ne sert pas, comme j’ai pu le lire sur certains forums, à mettre une barre de menu latérale à votre site. Dans ce cas, il faudrait plutôt utiliser la balise nav.
Appliquons donc ces quelques balises à notre page d’exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Hello World en HTML 5</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Jonathan Petitcolas en HTML 5</h1>
<nav>
<ul>
<li><a href="/">Accueil</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h1>Hello World!</h1>
<p>Ceci est un hello world! en HTML 5.</p>
<aside>
<p><strong>Auteur :</strong> Jonathan Petitcolas</p>
</aside>
</article>
</section>
<footer>
<p>Tous droits réservés - Jonathan Petitcolas</p>
</footer>
</body>
</html>
Il existe également quelques autres balises (notamment pour l’audio ou la vidéo), mais nous ne traiterons pas de celles-ci dans cet article, réservé à la structure de la page. Il en va de même pour les nouveaux champs de formulaire (téléphone, date, etc.) que nous verrons plus tard.
A présent, essayons de lancer cette page dans notre navigateur. Pour vous simplifier la vie, voici le lien de notre exemple : Hello World en HTML 5.
Si vous désirez valider votre page, il vous faudra impérativement passer par le validateur officiel du W3C. En effet, l’extension HTML Validator de Firefox par exemple ne semble pas (encore) prendre en compte cette nouvelle version du langage.
Comments
Trackbacks
There are no trackbacks on this entry.
Bon petit résumé d’introduction.
Par contre tu as oublié de fermer ta balise nav dans tes exemples. ^^
Merci de ta vigilance ! Coquille corrigée ! :)
Ca ressemble un peu au XML non?
bonne intro au HTML5, merci !
par contre, HTML XML: rien à voir (sauf que ce sont des SGML tout deux)
HTML: organiser des données « pour affichage ». Navigateur obligatoire pour affichage
XML: organiser des données « pour échanges »: flux RSS par ex. Peux ne pas être afficher.
Sauf erreur de ma part je n’aurais pas inclus la balise « aside » dans la balise « article »…