Je vous explique comment est structuré une page HTML et comment choisir les balises HTML les plus adaptées. Je vous présenterai aussi un outil permettant de tester la validité de vos pages Web.

Regarder la vidéo sur YouTube

Cet article est la première partie d'une série qui explique comment réaliser un site Internet de A à Z. Vous n'avez pas besoin d'avoir lu ou vu les parties précédentes pour comprendre cette partie. Les autres épisodes sont disponibles ici.

Si vous ne pouvez pas regarder la vidéo, un compte rendu est proposé plus bas.

Résumé de la vidéo

Avant de créer la page HTML, prenons un moment pour comprendre les différentes parties que composeront nos pages.

Comme la majorité des sites, les pages de notre site seront composées de trois sections : Un en-tête, un corps et un pied de page.

L'en-tête et le pied de page seront communs à toutes les pages, tandis que le corps sera spécifique pour chacune des pages.

Dans le détail :

  • L'en-tête sera situé en haut de page et contiendra un logo avec le nom du site, permettant de retourner facilement à la page d'accueil du site. Par la suite, on pourra aussi ajouter une barre de navigation pour pouvoir naviguer le site facilement.
  • Le contenu contiendra le texte, l'article, la vidéo, la timeline, et tout ce qu'on veut afficher sur la page.
  • Le pied de page, qui est l'inverse de l'en-tête, et contiendra des liens utiles, des mentions légales ou certaines informations communes à toutes pages.

Balises HTML

On peut maintenant passer au code HTML.

Notre objectif est de sélectionner les balises HTML les plus appropriées. On pourrait utiliser que des balises div ou span, qui sont les balises les plus génériques, et cela fonctionnerait très bien, mais il y a plusieurs avantages à créer une page HTML avec des balises adaptées :

  • Les pages sont mieux référencées (SEO) par les moteurs de recherche comme Google, DuckDuckGo, Ecosia ou Bing. Tous ces moteurs possèdent des bots qui scanneront toutes vos pages pour les référencer. Mieux ils arriveront à comprendre vos pages, mieux votre site sera référencé. Vos visiteurs trouveront donc plus facilement notre site.
  • Les pages sont plus accessibles, notamment pour les personnes avec des déficiences visuelles. On estime qu'entre 2 et 5% des personnes sont concernées. Ces personnes peuvent recourir à des outils comme des assistants vocaux qui permettent de lire à voix haute les pages Web. Ces assistants fonctionnent mieux si les pages sont bien structurées rendant l'expérience plus agréable.
  • Les pages sont plus faciles à maintenir si elles sont bien structurées. Elles peuvent donc être corrigées plus facilement et peuvent évoluées plus aisément. Les autres personnes qui travaillent peut-être sur le site auront aussi plus de faciliter à comprendre les pages et à intervenir.
  • Les pages sont mieux affichées par les navigateurs, car ils proposent des expériences spécifiques pour certaines balises. C'est le cas par exemple pour l'affichage amélioré des articles, la sélection de couleurs ou la saisie de nombres. Si les pages sont bien structurées, on pourra aussi bénéficier des fonctionnalités futures sans avoir à modifier la page.

Structure de la page

Passons maintenant à la partie pratique. Pour commencer, on va partir de cette base :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma page</title>
  </head>
  <body>
  </body>
</html>

Une balise DOCTYPE suivie d'une balise html, dans laquelle on met une balise head et une balise body.

La balise DOCTYPE est obligatoire en début de chaque page. Elle est présente pour dire aux navigateurs d'afficher la page selon les spécifications HTML, car historiquement il existait plusieurs affichages différents. Aujourd'hui, on utilise exclusivement cette balise.

La balise html est aussi obligatoire. Un attribut lang a été ajouté avec la valeur fr pour indiquer que le contenu de la page est en langue française. C'est important d'un point de vue du référencement. Cela permet aussi aux navigateurs et assistants vocaux de mieux comprendre vos pages.

La balise meta permet de spécifier l'encodage des caractères pour que la page puisse correctement s'afficher. UTF-8 permet d'afficher les caractères latins utilisés en français, mais aussi d'autres caractères comme les caractères cyrilliques et chinois, et les émojis.

Une balise title, important et obligatoire, est ajouté. C'est ce texte qui s'affiche en premier dans les résultats des moteurs de recherche, mais on y reviendra.

On peut compléter maintenant le corps de notre page.

Contenu de la page : header, main, footer

Comme on l'a vu, on va mettre trois parties, un en-tête, un corps, et un pied de page.

Pour l'en-tête, on peut utiliser la balise header qui représente une balise d'introduction et est normalement située avant le contenu principal de la page.

Si on veut entrer dans le détail, on peut lire les spécifications HTML de la balise qui mentionnent par exemple qu'une balise header peut être utilisée plusieurs fois : d'abord en élément d'introduction global, puis en introduction de chaque section de la page.

Notre balise header contiendra un texte pour le moment, qu'on insère dans un lien :

<header>
  <a href="lien-vers-accueil">Accueil</a>
</header>

Pour le contenu principal, on peut utiliser une balise main. La documentation explique qu'elle représente le contenu dominant du corps du document, c'est-à-dire le contenu qui est spécifique à chacune des pages.

On peut insérer dans notre balise main un titre et le contenu de nos derniers articles par exemple :

<main>
  <h1>Derniers posts</h1>
  <p>Timeline contenant les posts</p>
</main>

À noter que les spécifications indiquent qu'il ne peut y avoir qu'une seule balise main par page.

Pour le pied de page, on peut utiliser une balise footer dans laquelle on peut mettre des mentions légales, certaines informations sur l'auteur, ou des liens intéressants comme les autres projets sur lesquels on travaille :

<footer>
  <p>Autres projets :</p>
  <ul>
    <li><a href="lien-youtube">Abonnez-vous à ma chaîne YouTube</a></li>
    <li><a href="lien-twitter">Suivez moi sur Twitter</a></li>
  </ul>
</footer>

Aperçu de la page

La page peut maintenant être affichée dans le navigateur : 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma page</title>
  </head>
  <body>
    <header>
      <a href="lien-accueil">Accueil</a>
    </header>
    <main>
      <h1>Derniers posts</h1>
      <p>Les derniers articles</p>
    </main>
    <footer>
      <p>Autres projets :</p>
      <ul>
        <li><a href="lien-youtube">Abonnez-vous à ma chaîne YouTube</a></li>
        <li><a href="lien-twitter">Suivez moi sur Twitter</a></li>
      </ul>
    </footer>
  </body>
</html>

On y retrouve tous les éléments que l'on a mis sur notre page.

Aucun style n'a été ajouté à la page pour le moment. Ce sont donc les styles par défaut du navigateur qui sont utilisés. On les modifiera dans les prochaines vidéos, mais pour le moment on peut se contenter de cela et même publier la page en l'état.

Vérifier que la page est conforme

Il existe un site mis en ligne par le W3C, organisme en charge de réaliser les standards du Web, qui permet de vérifier la validité de la page : validator.w3.org

On peut l'utiliser pour vérifier que notre page est correctement structurée. Dans notre cas, aucune erreur n'est détectée.

On peut aussi introduire une erreur volontaire pour voir le résultat, en enlevant la balise title par exemple, ou en supprimant la dernière balise </html>.

Les pages qui contiennent des erreurs peuvent quand même être affichées par les navigateurs, car ils sont tolérants et corrigent automatiquement certaines fautes. La meilleure façon de s'assurer qu'une page est valide est donc d'utiliser ce type d'outils.

Note: Le prochain épisode est disponible ici.