Le langage HTML/Bien commencer le HTML

Les navigateurs sont plutôt résistants aux erreurs. Ainsi, si vous faites une faute, la seule conséquence sera en général que vous n'obtiendrez pas le résultat attendu mais le texte s'affichera quand même. Dans le pire des cas, votre contenu ne s'affichera pas, mais vous n'aurez pas de « plantage » comme cela arrive avec la programmation.

Structure de base d'un document HTML

L'en-tête

Du fait de cette tolérance, certains créateurs, ou même logiciels générant du HTML font volontairement des fautes, par exemple ouvrir une balise et ne pas la fermer, par flemmardise. Cela peut sembler sans importance puisque la page s'affichera quand même.

Toutefois,

des erreurs consécutives peuvent engender un effet boule de neige et il devient alors difficile de trouver d'où vient le vrai problème.
cela empêche la traduction automatique vers d'autre langages, par exemple la conversion du HTML en LaTeX ou en syntaxe wiki.
il n'est pas garanti que la page s'affiche correctement sur tous les navigateurs.

Il faut en fait accorder la même rigueur au HTML qu'aux autres langages de programmation, et pour cela utiliser de bons outils et prendre de bonnes habitudes.

Et prendre du recul lorsque l'on s'inspire de pages déjà existantes : la plupart des navigateurs permettent d'afficher le code source de la page, mais celui-ci peut être peu rigoureux.

Un bon exemple vaut mieux qu'un long discours

Nous allons créer notre première page à partir de la page minimale.

Pour cela, ouvrez votre éditeur de texte préféré — nous parlons bien d'éditeur de texte et pas de logiciel de traitement de texte (comme Microsoft Word). Sous Microsoft Windows, le Bloc-Note (Notepad) fait très bien l'affaire. Prenez le texte ci-dessous, copiez-le, et collez-le dans la page vide (ou bien tapez-le).

Exemple

<!DOCTYPE html>

<html>

  <head>
    <title>Premier essai</title>
  </head>

  <body>
    Bonjour le monde.
  </body>

</html>

Puis, utilisez la fonction Fichier | Enregistrer sous, et enregistrez le sous le nom bonjour.html (avec Notepad, il faut choisir « Tous les fichiers » dans le menu déroulant Type de fichier). Si vous double-cliquez dessus depuis l'explorateur de disque (Explorateur Windows, Finder…), cela ouvrira normalement votre navigateur Internet par défaut, et affiche :

« Premier essai » dans la barre de titre ;

« Bonjour le monde. » dans la fenêtre principale.

Réessayez maintenant avec le texte suivant :

 <!DOCTYPE html> <html> <head> <title> Premier essai </title> </head> <body> Bonjour le monde. </body> </html>

(le même texte mais sur une seule ligne, sans mise en forme) — une fois le fichier sauvé, il suffit d'appuyer sur le bouton « rafraîchissement/recharger » du navigateur pour voir la différence. On remarque qu'il n'y en a aucune.

Aucune différence en ce qui concerne le rendu, mais le code source est lui bien moins lisible. Donc moins facilement modifiable, augmentable, corrigible. Il convient donc de prendre des « bonnes habitudes de programmation ».

Bonnes habitudes de programmation

Voici quelques conseils

aérer son code :
- les retours à la ligne n'ont pas d'incidence sur le rendu (si ce n'est une espace) ; n'hésitez donc pas à revenir à la ligne régulièrement afin de structurer votre code ;
- si vous mettez plusieurs espaces, cela est interprété comme une seule espace, on peut donc jouer sur la « mise en forme » du code pour se repérer, et par exemple mettre une ou plusieurs espaces en début de ligne (indentation) ; en général, quand un texte est entre une balise d'ouverture et une balise de fermeture, on décale les différentes lignes de 2 ou 3 espaces par rapport à ce qui précède ;
mettez des commentaires pour pouvoir vous repérer ;
utilisez un éditeur de texte avec
- gestion des indentations : il suffit d'appuyer sur la touche de tabulation pour créer un décalage, et le décalage est appliqué automatiquement aux lignes suivantes ;
- « coloration syntaxique » : les caractères spéciaux et balises sont reconnus et mis en couleur, ce qui facilite la lecture du code.

Voici par exemple un commentaire permettant de se repérer facilement (l'exemple suivant se trouverait au sein d'un code, donc notamment après les balises <!DOCTYPE html> <html> … <body> et avant le </body> </html> final).

…
<!--
*******************
* première partie *
*******************
-->

<h1> Première partie </h1>
…

Le mauvais exemple

Prenez votre traitement de texte favoris. Créez un document vide, et tapez simplement « Bonjour le monde. », puis enregistrez le fichier sous la forme d'un fichier HTML : menu Fichier | Enregistrer sous, et choisissez l'option Page Web (*.htm, *.html) dans le menu déroulant Type de fichier. Appelez ce fichier bonjour1.html.

Ouvrez maintenant ce fichier depuis l'éditeur de texte. Vous voyez que le fichier contient un nombre beaucoup plus important de lignes. Certaines de ces lignes peuvent contenir des informations personnelles, que vous aurez rentrées lorsque vous avez installé votre système d'exploitation, et que vous ne désirez peut-être pas voir figurer sur Internet… Et selon le logiciel (et sa version), vous aurez du code plus ou moins « propre » : dans certains cas, pour un texte long, il redéfinit à chaque paragraphe la police utilisée… Essayez de sauvegarder ainsi au format HTML un texte que vous avez déjà tapé auparavant et constatez les dégâts. Vous remarquez aussi que vous n'avez pas pu définir le titre s'affichant dans la barre de titre.

S'il est simple de générer du code HTML, simple dans le sens « en peu d'opérations et sans connaissance particulières » (« en un clic »), il faut se méfier du résultat, même si le rendu est correct.

Avec quoi écrire un document HTML ?

Comme indiqué plus haut, il existe des éditeurs HTML plus développés, allant de l'amélioration de la présentation du code (exemple : les balises sont distinguées du texte par une couleur spécifique) à l'éditeur WYSIWYG (« What You See Is What You Get », littéralement « ce que vous voyez est ce que vous obtenez », c'est-à-dire que vous voyez directement le résultat apporté par les modifications que vous entreprenez).

Vous devrez tout de même garder en tête la notion (récente) d'encodage des caractères, et faire la différence entre les principaux types (utf-8, ISO-8859-1…), et la nécessité pour votre éditeur de texte de reconnaître et respecter cet encodage, sous peine de voir afficher de drôles de caractères à la place des accents… Voir à ce sujet Caractères spéciaux et entités.

Voici une sélection (à compléter) d'éditeurs libres de qualité :

Notepad++ Coloration syntaxique paramétrable, ouverture simultanée de plusieurs sources, support d'une quarantaine de langages, reconnaissance de l'encodage, macro, plugiciels…
Emacs Coloration syntaxique, affichage de double fenêtre, barre de navigation, un catalogue complet d'extension, de nombreux raccourci clavier
Bluefish
JEdit
Quanta Plus
Atom Coloration syntaxique
Brackets
Sublime Text 2
NVU et Kompozer Ces derniers seraient plutôt des éditeurs WYSIWYG mais permettent d'éditer directement la source d'une page.
SciTE éditeur supportant plusieurs langages de programmation et de balisage dont le HTML et le CSS.
Visual Studio Code éditeur supportant plusieurs langages de programmation et de balisage dont le HTML et le CSS.

Pour choisir, le mieux est de tester. Quelques éléments à prendre en compte pour faire un choix :

Le logiciel permet-il la coloration syntaxique ? Quels langages sont supportés (PHP, CSS, HTML, JavaScript ?) ?
Peut-on ouvrir plusieurs fichiers dans différents onglets ?
Peut-on visionner simplement le résultat ? (par exemple avec une touche voir cette page dans le navigateur)
Est-ce que les encodages de caractères sont bien gérés ?
Y a-t-il une auto-complétion ? (quand vous écrivez une balise : le logiciel écrit directement la balise fermante)
L'indentation est elle facilement modifiable ? Notamment, est-ce que le logiciel comporte une fonction permettant de déplacer tout un bloc de ligne vers la gauche ou vers la droite ?