Tout comme ses prédécesseurs HTML 5 est un langage de balisage c’est à dire qu’on utilise des balises qui ont des valeurs sémantiques pour annoncer des éléments. Une balise est délimitée par des chevrons ouvrants (‹) et fermants (›).
<balise>
Les balises peuvent être simples ou doubles (=paires), dans ce cas la deuxième commencera par un slash /.
Balise simple
<balise>
Balises doubles
<balise></balise>
Voici une page HTML 5 vide.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titre</title>
</head>
<body>
<!-- Ici il y aura le contenu de votre page. -->
</body>
<html>
Le type de document (DOCTYPE)
Ceux qui ont travaillé avec les doctype d’autres versions de HTML ou de XHTML que HTML 5 savent combien cette déclaration est simple. Il ne faut pas se le cacher, la plupart d’entre nous étaient incapables de déclarer de tête un document en XHTML 1.0 Strict par exemple. Voyez vous-même :
DOCTYPE HTML 5
<!DOCTYPE html>
DOCTYPE HTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
L’élement html
<html lang="fr"></html>
‹html› indique au navigateur l’endroit où votre document HTML commence et ‹/html› l’endroit où il se temine. L’attribut lang permet de spécifier la langue du document HTML mais il n’est pas obligatoire. L’attribut lang peut être appliqué sur tous les autres éléments HTML.
L’élement head
<head></head>
L’élément head contient tous les en-têtes envoyés au navigateur comme :
- Le type de contenu de la page :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- Le titre de la page :
<title>Titre</title>
De nombreuses autres informations peuvent être spécifiées dans l’élément head, ce sera l’objet d’autres chapitres.
L’élément body
<body></body>
L’élément body constitue le corps de votre page HTML. On y trouvera à l’intérieur tout le contenu affiché à l’utilisateur.
Les commentaires
<!-- Ceci est un commentaire -->
Les commentaires permettent d’ajouter de l’information à un morceau de code. Cette information ne sera visible que dans le code source de la page. En aucun cas il ne sera affiché au visiteur de la page HTML.
Conseil : Même si on l’oublie vite quand on est penché sur son code, il est important d’y intégrer des commentaires un tant soit peu. Non seulement cela pourrait servir si quelqu’un d’autre doit lire votre code mais vous pourrez également vous repérez dans votre code 6 mois, 1 an, 5 ans… plus tard.