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 :

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 :

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 :

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.