29/03/2021

2. Structure d'un document HTML

Découvrons à travers un exemple ce qu'est la structure d'un fichier au format HTML

2.1. Pour débuter


2.2. Code source ?

HTML signifie HyperText Markup Language. Il s'agit d'un langage informatique permettant de décrire (on utilise souvent le terme coder) la structure et le contenu (texte, images, tableaux, etc.) d'un document destiné à être affiché sur le web.

Un fichier au format HTML est avant tout un fichier au format texte seulement (c'est-à-dire juste une suite de caractères sans possibilité de mettre du gras, des numéros de page, …). Le texte contenu dans le fichier est écrit en langage HTML. Il s'agit d'un langage de balisage. Les balises servent à indiquer au logiciel (souvent un navigateur web) comment il doit interpréter le texte pour l'afficher comme attendu (avec du gras par exemple).

Comme le texte est codé en langage HTML, on parle de code source.

Même s'il s'agit d'un fichier au format texte seulement, l'extension d'un fichier HTML n'est pas txt. Les extensions autorisées pour un fichier contenant un texte HTML sont htm et html. Notez que l'extension peut ne pas correspondre au nom du format.

La plupart des navigateurs webs vous permettent de visualiser le code source de la page HTML couramment affichée. Le plus simple pour cela, est souvent d'ouvrir le menu contextuel et de sélectionner l'entrée Code source de la page (le texte peut changer d'un navigateur à un autre).

Avec cette technique, visualisez le code source de cette page du TD.


2.3. Balises

  • Une balise se distingue du texte affiché par le navigateur par le fait qu'elle est toujours encadrée par < et > ; exemples : <html>, <body>, <p>.
  • Beaucoup de balises fonctionnent par paires (comme les parenthèses) ; on parle ainsi de balise ouvrante (par exemple <p> pour paragraphe) et de balise fermante (par exemple </p>) ; la balise s’applique alors à la partie qu’elle encadre (par exemple, les balises <p> et </p> délimitent un paragraphe).

2.4. Structure générale

Le langage HTML a connu plusieurs versions depuis sa création en 1989 au commencement du web. Nous en sommes à la version 5 du langage. Chaque version correspond à une norme de rédaction définissant des règles d'écriture et leur interprétation. Si ces règles ne sont pas respectées, le navigateur web affichant la page peut ne pas savoir interpréter correctement le code.

La structure minimale d'un document au format HTML 5 est la suivante.

<!doctype html>
<html>
<head>
…
</head>
<body>
…
</body>
</html>

Vous pouvez l'observer dans le code source de l'exemple puisque le reste du texte est décalé à droite par rapport à cette balise. Cette technique de décalage, appelée indentation, est facultative dans la rédaction d'un fichier HTML.

Signification des balises

  • La première balise (doctype) indique la norme HTML utilisée : ici HTML 5.
  • Les balises <html> et </html> délimitent le document. à l'exception de la balise doctype et d'éventuels commentaires, il ne devrait rien y avoir à l'extérieur de ces balises
  • Les balises <head> et </head> délimitent un en-tête de fichier contenant des instructions au navigateur web (titre de document, encodage de caractère).
  • Les balises <body> et </body> délimitent le contenu à afficher de la page web.

2.5. Observez

Parcourez le code source de la page TDB4-NOM-exemple.html (que vous avez récupérée en début de cette page de TD).

Observez au moins :

  1. l'endroit où s'affiche le texte entre les balises "title" et "/title".
  2. qu'il y a dans le code source des textes qui ne s'affichent pas dans le navigateur. En plus des contenus ou noms des balises, les textes entre <!-- et --> ne sont pas affichés : il s'agit de commentaires destinés au développeur de la page (explications sur le code ; texte conservé mais non affiché). Pour le fichier TDB4-NOM-exemple.html, ces commentaires vous sont destinés pour vous aider à comprendre les balises utilisées. Lisez-les.

flèche page précédente flèche page suivante