HTML5: pour mieux présenter vos pages Web
Page 2: Comment écrire un document HTML5?
Toutes les pages 
HTML5: pour mieux présenter vos pages Web
Page 2
Comment écrire un document HTML5?
Comment écrire un document HTML5?
Contenu d'un document HTML5
L'apparence d'un document HTML5 ne diffère en rien de celle d'un document HTML classique. En effet, il contient tu texte constitué principalement de balises. Cependant il y a une ligne spéciale qui s'ajoute au début d'un document HTML5 qui n'apparaissait pas dans une page écrite en HTML4. Il s'agit du Doctype.Le Doctype: Document Type Declaration
Le Doctype qui signifie Document Type Declaration ou simplement Document Type (traduite Type de Document) est une instruction qui apparaît obligatoirement au début de documents XML, XHTML et HTML5 pour informer le validateur de la version du langage utilisé.En HTML5, l'absence de la déclaration du Doctype n'empêche pas l’exécution du document par le navigateur. Mais pour que votre code soit conforme, et d'autant plus, pour faire valider votre page auprès du validateur de W3C, il faut prendre le soin de toujours la déclarer.
En HTML5 la déclaration du Doctype a été remarquablement simplifiée par rapport à ce qui se faisait en XHTML. Pour avoir une idée sur le Doctype d'un document XHTML, il ressemble à ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Compliqué non? Heureusement en HTML5 la déclaration du Doctype devient:
<!DOCTYPE html>
C'est tellement simple qu'on ne peut pas s'empêcher de le déclarer à chaque fois qu'on en a l'occasion!
Mais qu'est ce que cela signifie? La réponse saute aux yeux: "Le type du document est HTML" et cela sous entend la version 5 de HTML.
Spécification du jeux de caractères (encodage)
Nous avons vu qu'en HTML (c'est aussi le cas pour XHTML) la déclaration du jeux de caractères (ou spécification de l'encodage du document) se fait à l'aide de la balise META content-type avec une syntaxe qui ressemble à ceci:<meta http-equiv="content-type" content="text/html;charset=UTF-8">
En HTML5 cela devient:
<meta charset="UTF-8" />
C'est encore plus simple. En moyenne, le code écrit en HTML5 est moins volumineux que celui écrit en HTML/XHTML pour avoir le même résultat.
Vous avez certainement remarqué quelque chose à la fin de la balise <meta>. En effet, il s'agit bien du slash précédé d'un espace. Quand les balises sont orphelines il faut les finir par un espace suivi d'un slash, c'est le cas des balises <meta />, <br />, <img />...
Pour mieux comprendre à quoi ressemble un document HTML5, nous allons éditer une page en HTML4, puis nous allons la modifier pour qu'elle devienne conforme HTML5.
Code HTML4:
<html>
<head>
<title>Titre du document</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
<h1>Titre de niveau 1</h1>
<img src="http://www.chiny.me/images/footerlogo.png" alt="Logo">
<br>
Texte non formaté.
</body>
</html>
Et maintenant le code HTML5:
<head>
<title>Titre du document</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
<h1>Titre de niveau 1</h1>
<img src="http://www.chiny.me/images/footerlogo.png" alt="Logo">
<br>
Texte non formaté.
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Titre de niveau 1</h1>
<img src="http://www.chiny.me/images/footerlogo.png" alt="Logo" />
<br />
Texte non formaté.
</body>
</html>
Dans les deux cas, le résultat sur le navigateur ressemblerait à ceci:
<html>
<head>
<title>Titre du document</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Titre de niveau 1</h1>
<img src="http://www.chiny.me/images/footerlogo.png" alt="Logo" />
<br />
Texte non formaté.
</body>
</html>
Titre de niveau 1
Texte non formaté.
Page 2
Comment écrire un document HTML5?
Comment écrire un document HTML5?
