Bonnes pratiques

Avant de vous lancer tête baissée dans la création de vos premiers documents Web, il convient d'adopter un certain nombre de bonnes pratiques afin de :

faciliter la lecture de votre code source
s'assurer que vos documents soient conformes aux standards HTML5 et CSS3
utiliser chaque langage pour ce quoi il a été conçu

Indentation du code

Un document Web est composé d'éléments organisés en arborescence : un élément (appelé parent) peut contenir plusieurs éléments (appelés enfants). Afin de rendre compte visuellement de cette hiérarchie, il est recommandé d'indenter son code source. L'indentation consiste à décaler vers la droite (à l'aide d'une tabulation) l'ensemble des éléments enfants d'un élément parent.

Le code source HTML ci-dessous n'est pas indenté : il est difficile d'en comprendre la structure.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bad Web document</title>
</head>
<body>
<h1>Bad Web document</h1>
<p>A list of items :</p><ul>
<li>Fist item</li>
<li>Second item</li>
<li>Third item</li></ul>
</body>
</html>

Le même code source HTML, cette fois-ci correctement indenté, est plus lisible et permet de détecter plus facilement une erreur de syntaxe : un oubli de balise fermante ou une mauvaise imbrication d'éléments par exemple.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Good Web document</title>
  </head>
  <body>
    <h1>Good Web document</h1>

    <p>
      A list of items :
    </p>

    <ul>
      <li>Fist item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
  </body>
</html>

Info

Visual Studio Code

Il possible d'indenter tout un document à l'aides des touches

ctrl shift I (Linux)
shift alt F (macOS, Windows)

Brackets

Je vous conseille l'extension Indentator qui permet d'indenter automatiquement un document avec ctrl alt I.

HTML5 vs. XHTML5

Version après version, le langage HTML a évolué pour déboucher sur deux variantes :

HTML 4.01 dont la syntaxe est basée sur SGML
XHTML 1.1 dont la syntaxe est basée sur XML

HTML5 réconcilie ces deux frères ennemis en autorisant l'une ou l'autre syntaxe. À vous de choisir si vous voulez concevoir vos documents Web en HTML5 ou XHTML5.

Document Web rédigé en HTML5

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>My first HTML5 document</title>
  </head>
  <body>
    <h1>My first HTML5 document</h1>

    <p lang="fr">HTML5 est vraiment super !

    <hr>

    <input type="checkbox" checked>
  </body>
</html>

Document Web rédigé en XHTML5

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <title>My first XHTML5 document</title>
  </head>
  <body>
    <h1>My first XHTML5 document</h1>

    <p lang="fr">XHTML5 est vraiment super !</p>

    <hr />

    <input type="checkbox" checked="checked" />
  </body>
</html>

La syntaxe XHTML5 est plus contraignante car elle doit respecter les règles de rédaction d'un document XML. Au sein d'un document Web rédigé en XHTML5 :

Le DOCTYPE doit être écrit en majuscules
L'élément html doit définir la valeur de l'attribut xmlns
Toute balise ouvrante est systématiquement associée à une balise fermante. En HTML5, la balise fermante de certains éléments est optionnelle. Pour plus de détails, vous pouvez consulter la liste des balises optionnelles sur le site du W3C
Une balise auto-fermante doit systématiquement se terminer par />.
Tous les attributs doivent avoir une valeur, même les attributs booléens

Validation des documents Web

Afin de vous assurer que vos documents Web ne contiennent pas d'erreurs de syntaxe et soient conformes aux standards, il est important de les faire valider. Le W3C met à disposition des outils en ligne de validation du code HTML et CSS :

Info

Dans la mesure où votre URL http://identifiant/ n'est pas visible sur internet, vous devrez procéder à la validation de vos documents Web par téléchargement de fichier (File Upload) ou bien par copier-coller (Direct Input).

Exercice

Corrigez le code HTML ci-dessous en vous aidant du validateur du W3C.

<!doctype html>
<html lang="en"
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>My first HTML5 <strong>document</h1></strong>

    <p lang="fr">HTML5 est vraiment super !</p>

    <input type="checkbox>
</html>

Correction

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first HTML5 document</title>
  </head>
  <body>
    <h1>My first HTML5 <strong>document</strong></h1>

    <p lang="fr">HTML5 est vraiment super !</p>

    <input type="checkbox">
  </body>
</html>

Séparation du fond et de la forme

Comme indiqué précédemment, il convient de respecter scrupuleusement une séparation du fond (HTML) et de la forme (CSS). Le langage HTML est uniquement en charge de la structuration et de l'annotation du contenu alors que le langage CSS est en charge de la présentation et de la disposition de ce même contenu.

Non

L'utilisation des éléments i (texte en italique), b (texte en gras), u (texte souligné), center (centrage du texte) est à proscrire. Les modifications de présentation du texte peuvent et doivent être réalisées avec une feuille de style CSS.

Oui

L'utilisation d'une feuille de style CSS, éventuellement commune à plusieurs documents Web, facilite la mise à jour de la charte graphique sans toucher à une seule ligne du code HTML. Je vous invite à consulter le site CSS Zen Garden pour vous convaincre de l'importance de séparer le fond de la forme : tous les designs présentés sur le site utilisent le même fichier HTML !

Il est temps maintenant de commencer l'inventaire des éléments HTML et des propriétés CSS. J'ai choisi d'aborder ces deux langages simultanément en procédant par un classement thématique : texte, listes, hypertexte, couleur, images, etc.