HTML5 - Pour mieux présenter vos pages Web

Auteur: Mohamed CHINY Durée necessaire pour le cours de HTML5 - Pour mieux présenter vos pages Web Niveau recommandé pour le cours de HTML5 - Pour mieux présenter vos pages Web Supports vidéo non disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz disponible pour ce cours

Page 2: Comment écrire un document HTML5?

Toutes les pages

HTML5 - Pour mieux présenter vos pages Web

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éclaraion 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

Nous avons vu qu'en HTML (c'est aussi le cas pour XHTML) la déclaration du jeux de caractères 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:
<!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:

Titre de niveau 1

Logo
Texte non formaté.
Vous avez compris que HTML4 et HTML5 font quasiment la même chose. Cependant, HTML5 a apporté d'autres fonctionnalités que nous allons découvrir dans les pages à venir.