Editions ENI Livres | Vidéos | e-Formations
Le document HTML
Les objectifs
Dans ce chapitre, nous commencerons dans un premier temps par appréhender la syntaxe HTML, avec les éléments et les attributs des balises. Cette syntaxe est commune à tous les constituants des pages web.
Ensuite, seront abordés les éléments HTML qui permettent de construire les pages web. Ces éléments devront être présents dans toutes les pages des sites web, afin d’avoir des pages web valides et interprétables par tous les navigateurs.
Les éléments HTML
Le langage HTML s’écrit avec des éléments HTML constitués de trois parties constitutives : la balise d’ouverture, le contenu et la balise de fermeture.
La balise d’ouverture commence par le caractère < et est immédiatement suivie par le nom de l’élément et se termine par le caractère >. Par exemple, l’élément qui permet d’insérer un paragraphe de texte est nommé p, la syntaxe de sa balise d’ouverture est la suivante : <p>.
La deuxième partie détermine les contenus rédactionnels. Cela concerne les éléments HTML qui contiennent du texte, comme les titres, les paragraphes, les citations... Le texte est alors écrit de manière usuelle, sans aucune mise en forme.
La plupart des éléments HTML ont une balise de fermeture. La syntaxe reprend le principe de la balise d’ouverture, mais avec en plus le caractère / qui précède le nom de l’élément. Ce caractère indique la fin de l’élément. En reprenant l’exemple du paragraphe, voici la balise de fermeture : </p>.
Voici un exemple complet pour l’élément HTML insérant un paragraphe :
<p>Le texte de mon paragraphe.</p> Donc l’ensemble de ces trois parties...
Les attributs des balises
Les attributs permettent de modifier le comportement standard des balises HTML. Les balises HTML peuvent ne contenir aucun attribut, ou un seul et parfois plusieurs. Certains attributs sont obligatoires, d’autres sont facultatifs. La plupart des attributs ont des valeurs, mais pas tous. Les attributs qui ne nécessitent pas de valeur sont qualifiés de booléens. Dans tous les cas, les attributs se placent dans la balise d’ouverture des éléments.
Il faut noter que chaque balise HTML peut avoir des attributs qui lui sont propres. Mais il existe de très nombreux attributs universels (Global attributes en anglais) qui peuvent s’appliquer à toutes les balises HTML. Voici une URL où trouver la liste de ces attributs universels : https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels
Voici quelques attributs couramment utilisés :
-
accesskey : indique la touche clavier permettant d’accéder à un élément de l’interface, sans l’utilisation de la souris. Exemple : accesskey="A".
-
class : spécifie le nom de la classe CSS à appliquer à l’élément. Exemple : class="titre-intro".
-
dir : indique la direction de l’écriture, de gauche à droite ou de droite à gauche. Exemple : dir="ltr", pour Left...
La déclaration du type de document
Les pages web doivent toutes commencer par une déclaration de type de document pour indiquer quel est le langage utilisé. En effet, il faut savoir que l’HTML est une application d’un langage de plus au niveau qui s’appelle le SGML (Standard Generalized Markup Language, https://fr.wikipedia.org/wiki/Standard_Generalized_Markup_Language). Le SGML permet de créer des langages à balises, comme l’HTML.
C’est pour cela que la toute première ligne d’une page web, doit afficher cette déclaration de type de document : <!doctype html>. Il faut noter que cette déclaration de type de document n’est pas un élément HTML.
L’élément <html>
L’élément <html> est l’élément racine des pages HTML. La balise d’ouverture, <html>, fait immédiatement suite à la déclaration de type de document et la balise de fin, </html>, termine la page.
Parmi les attributs globaux, l’attribut lang, n’est pas obligatoire, mais il est très fortement recommandé de l’utiliser. Cela permet tout simplement d’indiquer au navigateur quelle est la langue utilisée dans la page web. Cet attribut est aussi exploité pour l’indexation par les moteurs de recherche et pour les navigateurs à synthèse vocale pour les personnes souffrant d’un handicap visuel.
Voici la syntaxe usuelle :
<html lang="fr"> L’élément <head>
1. Les éléments enfants de l’en-tête
L’élément <head> est vraiment très important. Il contient tout une série d’éléments enfants essentiels pour la page, sachant que ces éléments enfants et leurs attributs ne sont indiqués nulle part ailleurs qu’ici.
2. Les éléments <meta>
L’élément <meta> permet de renseigner plusieurs métadonnées, dont certaines sont importantes comme l’encodage des caractères.
Il est important d’indiquer l’encodage des caractères juste après la balise d’ouverture <head>, car cet encodage va concerner tous les autres éléments à venir. Actuellement, l’encodage utilisé est l’UTF-8 (Universal Character, Set Transformation Format, sur 8 bits). Voici la syntaxe de la métadonnée d’encodage des caractères :
<meta charset="UTF-8"> Les métadonnées sont aussi utilisées pour renseigner des informations exploitées par les robots d’indexation des moteurs de recherche. Voici quelques exemples :
<meta name="description" content"La description de ma page">
<meta name="keywords"...L’élément <body>
L’élément <body> va contenir tous les éléments de contenu de la page web. Sa balise d’ouverture, <body>, est placée juste après la balise de fermeture de l’en-tête </head>. Sa balise de fermeture, </body>, est située juste avant celle du document, </html>.
Les commentaires
Comme dans tout langage informatique, il est vivement conseillé de commenter son code, que ce soit pour le développeur qui code en premier, ou pour un autre développeur qui viendra reprendre ces pages. Les commentaires peuvent se placer n’importe où dans la page. Voici la syntaxe d’un commentaire : <!-- Le texte de mon commentaire -->
Exemple d’une structure d’une page web
Pour terminer ce chapitre, voici un exemple d’une structure d’une page web contenant les différents éléments HTML vus précédemment :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Le titre de ma page</title>
</head>
<body>
<p>Le contenu de ma page.</p>
</body>
</html>