19/03/2022

3. Structure d'une page HTML

3.1. Structure de base

Vous trouverez ci-après une version de la structure de base d'un document HTML.

En HTML 5, la première ligne d'un fichier HTML doit être <!DOCTYPE html>. Cette ligne permet au navigateur ou à tout logiciel devant interpréter la page de savoir que la page est écrite en HTML 5.

La suite du code est valable dans toutes les normes.

Un document HTML est structuré en deux parties : en-tête (head) et corps (body). Chaque partie est repérée par des balises. Toutes les instructions de structuration doivent être écrites dans l'en-tête (instructions générales pour le navigateur notamment) ou dans le corps (description de la page).

<!DOCTYPE html>
<html>
  <head>
  EN-TETE
  …
  </head>
  <body>
    CORPS
    …
  </body>
</html>

3.2. Structure de base en HTML 5

Si vous soumettez ce code au validateur en ligne (en enlevant les textes EN-TETE… et CORPS…), vous aurez quelques erreurs qui apparaîtront pour les raisons suivantes :

Il est conseillé d'indiquer en argument de la balise <html> la langue naturelle dans laquelle le texte de la page est principalement écrit.
Dans l'en-tête, il doit y avoir la déclaration du titre (title en anglais) de la page. Attention ! Ce titre n'est pas le titre qui apparaîtra dans le texte mais le titre de l'onglet du navigateur (par exemple, la page que vous lisez a comme titre Structure).

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Titre de l'onglet de la page</title>
    RESTE DE L'EN-TETE
    …
  </head>
  <body>
    CORPS
    …
  </body>
</html>

Observez les décalages réalisés pour montrer la structure de la page. Cette technique de base en programmation s'appelle l'indentation.

3.3. Commentaires

Dans un code HTML tout ce qui est entre  est appelé un commentaire et n'est pas interprété par le navigateur. Cela est utile, par exemple, pour supprimer momentanément d'un affichage des parties d'une page web.

Dans la structure suivante d'une page HTML 5, nous avons mis en commentaire les textes qui sont utiles pour nos explications mais qui sont à remplacer ultérieurement. Cela permet d'avoir un code valide (vous pouvez vérifier en utilisant validateur en ligne) : si on ne met pas RESTE DE L'EN-TETE… en commentaire, le code n'est pas correct.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Titre de l'onglet de la page</title>
    <!--
      RESTE DE L'EN-TETE
      …
    -->
  </head>
  <body>
    <!--
      CORPS
      …
    -->
  </body>
</html>

Observez les décalages réalisés pour montrer la structure de la page. Cette technique de base en programmation s'appelle l'indentation.

3.4. Le corps : principales balises

3.4.1. Principe des balises

Le langage HTML est un langage utilisant des balises. Le texte à afficher sur l’écran est saisi dans le corps du document HTML et structuré à l’aide des balises qui constituent des indications pour le navigateur. La norme d'HTML (HTML 3, HTML, 4, HTML 5) définit les balises utilisables et la manière de les employer.

L’utilisation des balises est très simple : ce sont des mots particuliers (les noms des balises : p , h1…) mis entre chevrons ("<" et ">") pour les différencier du texte à afficher. Les balises vont en général par paires (comme les parenthèses) : une balise ouvre une indication (par ex. : le texte encadré est un paragraphe) et elle est suivie, plus loin, de la balise fermante correspondante. Le texte est placé entre la balise ouvrante et la balise fermante.

Une balise peut en plus avoir des attributs auxquels on fournit des valeurs, on verra des exemples plus loin. Dans ce cas, la syntaxe est :

<élément attribut1="valeur1" att2="val2" …>

et la balise fermante :

</élément>

Nous avons par exemple vu l'attribut lang pour la balise html. Voir aussi la balise meta.

3.4.2. Balises de base

Il existe un (pas très long) catalogue de balises pour les textes dont les plus communes sont :

<p> pour indiquer qu’un bloc de texte forme un paragraphe. Chaque paragraphe est ainsi marqué par sa propre balise. La balise fermante correspondante est </p>.
<h1> pour indiquer un titre de niveau hiérarchique 1 (le plus haut) - ("h" pour "header"). La balise fermante correspondante est </h1>.
<h2> ou <h3> pour indiquer un titre de niveau 2 ou 3 (un sous-titre ou une section). La balise fermante correspondante est </h2> ou </h3>. On peut aller jusqu'à 7 niveaux de titre.
<ul> pour définir une liste à puces ("ul" pour "unordered list"). La balise fermante correspondante est </ul>.
<ol> pour définir une liste numérotée ("ol" pour "ordered list"). La balise fermante correspondante est </ol>.
<li> pour définir un item de liste. La balise fermante correspondante est </li>.
<strong> et <em> pour mettre une emphase forte ou simple (ce qui se traduit généralement au niveau de la forme par une mise en gras ou en italique). Les balises fermantes correspondantes sont </strong> et </em>

3.4.3. Exemple

Ci-suit un extrait du code de cette page. En survolant les balises en gras, vous aurez de l'information sur son rôle.

<h3>Principe des balises</h3>
<p>Le langage HTML est un <em>langage utilisant des balises</em>.
Le texte à afficher sur l’écran est
<em>saisi dans le corps du document HTML et structuré</em>
à l’aide des balises qui constituent des
<em>indications pour le navigateur</em>.
La norme d'HTML (HTML 3, HTML, 4, HTML 5) définit les balises
utilisables et la manière de les employer.</p>

Pour voir le code complet de la page, affichez le code source.

3.4.4. Imbrication

Les balises peuvent être imbriquées. C’est le cas dans l’exemple ci-dessus: les balises <em> et </em> sont imbriquées dans la paire de balises <p> et </p>.

L’imbrication des balises est à surveiller, certains navigateurs réagissent mal aux balises mal imbriquées et vont parfois jusqu’à refuser d’afficher la page. D’autres sont très tolérants et "réparent au mieux" les erreurs d’imbrication (le mieux étant parfois l’ennemi du bien !).

En cas d’erreur d’imbrication on dit que le document est mal-formé.

Par ailleurs la norme HTML précise que certaines imbrications sont obligatoires et d’autres interdites : les balises <li> et </li> doivent être imbriquées dans la paire de balises <ul> et </ul> qui définit la liste à puces. Exemple :

<h2>mes animaux préférés</h2>
<ul>
<li>cheval</li>
<li>chat</li>
<li>chien</li>
</ul>

Autre exemple : ceci est interdit : <p>bla bla <p>bla bla </p>bla bla </p> (alors que c’est "bien formé"); lorsqu’un document respecte une norme html on dit qu’il est valide.

3.5. Codage des caractères (retour sur l'en-tête)

3.5.1. Codage des caractères

Vous avez peut être remarqué dans le code html des mots particuliers qui commencent par "&" et finissent par ";". Ce sont des références de caractères qui permettent d’afficher des caractères qui ne sont pas dans le codage de base de la page ou qui sont normalement réservés au langage HTML (" et < par exemple); à quoi cela sert-il ?

Les pages HTML que vous créerez peuvent être affichées sur des ordinateurs partout dans le monde. Ces ordinateurs ne sont pas nécessairement équipés avec des systèmes francophones : les accents, les alphabets, les systèmes d’écriture (alphabétique ou pas)… peuvent être différents.

Comme dans tout document informatique, les caractères que vous saisissez au clavier sont codés dans le fichier informatique sous forme de suite de 0 et 1 (cf cours des niveaux antérieurs…). À l’origine du web, les documents html ne devaient contenir que des caractères ASCII non accentués.

Pour que les navigateurs puissent afficher des caractères accentués, chaque caractère accentué devait être saisi sous une forme spéciale appelée "entité html" dans le code source (on parle parfois d'échappement de caractères). Par exemple :

"é" devait être saisi "é" ;
"à" … "à" ;
"ô" … "ô" ;
"©" … "©" ;
…

On trouve facilement sur internet la liste de ces codages.

3.5.2. Déclaration du codage des caractères

Actuellement, nous ne sommes plus obligés d'utiliser les entités pour les caractères fréquents comme les caractères accentués si nous avons déclaré dans l'en-tête la table de codage de caractères utilisés grâce à la balise <meta>. Une fois cette balise insérée, les caractères accentués (et d'autres) peuvent être saisis normalement.

Il est fortement conseillé d'encoder ces pages en UTF-8, encodage permettant des alphabets différents comme ci-dessous :

russe : Не имей сто рублей, а имей сто друзей ;
chinois : 子曰’君子求諸己、小人求諸人’ ;
grec : Γνῶθι σεαυτόν.

Dans ce cas, vous rajouterez dans l'en-tête de votre page HTML, le code

Attention ! Il faut être bien sûr que l'encodage de la page correspond à la déclaration sinon les caractères seront mal interprétées. Certains éditeurs de texte encodent encore par défaut les caractères iso-8859-1 ou latin-1 (extension de l'ASCII) ou en windows-1252 (autre extension de l'ASCII). Si c'est le cas, votre logiciel devrait vous permettre de changer l'encodage de vos caractères en UTF-8 (si ce n'est pas le cas, il est peut-être préférable de changer de logiciel)

3.5.3. Structure d'un document

Ci-après, vous retrouverez la structure de base d'un document HTML avec l'insertion de la balis meta.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Titre de l'onglet de la page</title>
    <meta charset="UTF-8">
    <!--
      RESTE DE L'EN-TETE
      …
    -->
  </head>
  <body>
    <!--
      CORPS
      …
    -->
  </body>
</html>

Conseil. Si vous devez écrire une nouvelle page web, repartez d'une page valide existante (par exemple, à partir du code précédent).