Leçon Progress:

Objectifs

Écrire une page HTML conforme
Respecter les bon usages

Avant d’aborder les règles de bon usage, qui ne sont pas obligatoires, voyons les règles de syntaxe qui déterminent si un code HTML est correctement écrit ou non. Ces règles sont édictées par le W3C, l’organisme chargé de normaliser et de promouvoir les langages du web. Actuellement la version majeure qui fait référence est la version HTML 5, qui apporte de nombreuses améliorations et un cap clair par rapport à HTML 4.

Table des matières

Attribut HTML

Nous avons vu comment écrire du texte et des balises. Il nous manque, pour les balises, une façon de préciser des informations ou d’affecter leur comportement par un attribut.

Attributs HTML

Un attribut est défini par un nom et prend une valeur que vous souhaitez lui attribuer. Il est rattaché à une balise et s’écrit : <balise attribut="valeur">...</balise>.

Par exemple , pour définir la langue dans laquelle un paragraphe est écrit, on utilise ....

Chaque balise a des attributs qui lui sont spécifiques et qui sont définis par la norme HTML. Par exemple la balise meta a un attribut content qui lui est propre et n’existe pour aucune autre balise. A l’inverse, certains attributs sont universels au sens où on peut les mettre sur n’importe quelle balise. Voici les principaux que nous utiliserons tout le temps, mais que nous verrons plus tard :

lang : langue du texte contenu dans la balise, utile pour les moteurs de recherche et pour la traduction automatique
id : identifiant unique de l’élément, utile pour les CSS
style : style CSS donné directement
class : classe CSS

Il est possible d’écrire plusieurs attributs dans une balise comme ceci : ....

Hiérarchie

Les éléments HTML peuvent avoir du contenu fait de texte et de balises. Il y a donc des éléments contenant d’autres éléments « enfants ». Cette imbrication d’éléments fait qu’une page HTML peut être vue comme une hiérarchie d’éléments et de bouts de texte (on parle aussi en informatique d’arborescence).

Par exemple, le code Ceci est important  est interprété par le navigateur comme cette hiérarchie :

Nous verrons dans le chapitre consacré aux CSS en quoi cette façon de voir la structure d’une page est utile. Nous emploierons désormais ces termes de racine, enfant, parent, descendant et ascendant qui ont le même sens intuitif qu’en généalogie.

Disons pour l’instant, pour les questions de syntaxe, que l’imbrication parent/enfant doit être bien faites. Le parent englobe bien ses enfants délimités par la balise ouvrante et la balise fermante : <parent><enfant></enfant></parent>.

Structures conformes

Les balises HTML de contenu comme  ou  ne s’écrivent pas directement dans un document HTML. Il est nécessaire de respecter une certaine forme.

Structure simple

Prenons ce simple code HTML qui affiche un titre et un paragraphe :

<h1>Maison en centre-ville</h1>
<p>Maison de 105 m<sup>2</sup> idéalement située.</p>

Vérifions ce code avec le validateur HTML du W3C :

Ouvrez dans le navigateur l’adresse https://validator.w3.org
Allez dans l’onglet Validate by Direct Input, puis copier coller le code dans la grande zone de saisie
Dans les options (ouvrez More Options), devant Use Doctype:, choisissez HTML 5 (experimental), en laissant bien cochée Validate Full Document
Lancez la vérification par le bouton Check

Le validateur nous signale deux erreurs, alors que ce code HTML est correct. Notre code devrait être écrit de la sorte pour passer le test :

<!DOCTYPE html>
<title>Annonce</title>
<h1>Maison en centre-ville</h1>
<p>Maison de 105 m<sup>2</sup> idéalement située.</p>

La première ligne est indispensable pour déclarer que le document est écrit en HTML 5. Dans les versions précédentes, notamment la 4.01, le « Doctype » était assez lourd à écrire. Désormais, en écrivant <!DOCTYPE html> au début, vous dites au navigateur que votre document respecte la norme HTML 5.

La deuxième indique le titre de votre page tel qu’affiché par le navigateur dans un onglet. Cela paraît indispensable pour l’utilisateur !

Pourquoi donc respecter une norme contraignante alors que le navigateur, très laxiste, affiche une page même si ces règles ne sont pas respectées ?

D’abord parce que l’on veut être « dans les clous » et professionnel. Pour allez un peu plus loin, disons que votre page pourra être lue par des « robots » (les bots), comme celui qui référence les sites pour Google (à ce sujet, essayez-donc DuckDuckGo qui respecte votre vie privée et qui est très performant). Les robots sont moins laxistes et ont besoin d’autres informations sur votre page que son simple contenu (les fameuses balises meta qui nous verrons plus tard).

Enfin, votre page sera peut être reprise par une autre personne pour la modifier. Autant que tout le monde soit d’accord sur les règles d’écriture pour que l’on se comprenne.

Structure classique

La forme que nous venons de voir est simplifiée mais elle n’est pas suffisante pour donner toutes les informations utiles au navigateur pour bien interpréter la page.

La structure générale d’une page est la suivante :

<!DOCTYPE html>
<html>
   <head>
      <title>Ma page</title>
   </head>
   <body>
      <!-- ici votre texte et vos balises à afficher -->
   </body>
</html>

Détaillons la :

le DOCTYPE déjà vu
l’élément html qui est le premier juste après DOCTYPE
le premier enfant essentiel est head qui représente l’entête informatif sur le document ; on y placera les « méta » (par exemple des mots-clés pour les moteurs de recherche), le titre et toutes les liens vers des ressources importées comme les feuilles de style
le deuxième et dernier enfant est toujours body dans lequel vous mettez tout le contenu qui devra s’afficher dans le navigateur.

Notez au passage comment insérer un commentaire dans le code HTML : . Le texte à l’intérieur ne sera jamais affiché par le navigateur.

Attention !

Votre code est envoyé intégralement au navigateur qui l’interprète et affiche la page résultante. Il est donc accessible à l’utilisateur (« Code source de la page » dans Firefox). Ne mettez pas n’importe quoi dans vos commentaires, pensant qu’ils sont privés !

Structure recommandée

Ajoutons deux choses à notre page type :

le langage du texte à indiquer par l’attribut lang sur html, de façon à ce qu’il soit valable pour tout le document
l’encodage des caractères, couramment utf-8, à indiquer dans une balise meta, qui sera amplement abordé dans la prochaine leçon

Finalement voici la structure type que nous vous recommandons, et que nous utiliserons systématiquement par la suite.

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

Conformité

Le passage du validateur oblige à respecter toutes les règles de la norme HTML 5 qui est particulièrement longue. A ce propos, la voici HTML 5 W3C, et ce n’est que le plan ! Il y a beaucoup de règles, mais ne fuyez pas elles sont assez intuitives et vous les maîtriserait aisément à l’issue de ce cours. Pour résumé, ce qu’il faut savoir :

il y a des règles de pure syntaxe, comme bien écrire une balise <balise> par exemple et non <balise > avec un espace
d’autres règles imposent ou interdisent certains contenus, nous verrons cela petit à petit mais ces règles relèvent du bon sens ; par exemple :
- il n’est pas possible de mettre un paragraphe (niveau paragraphe) dans une mise en forme en gras (niveau caractère), il faut faire l’inverse : Fort impossible, mais Fort OK
- un <ul> ne peut contenir que des <li> (normal c’est une liste !)

De toute façon, pour vous contrôler et apprendre, n’hésitez pas à passer votre code au validateur W3C.

Bons usages

Terminons cette leçon par les bonnes pratiques d’écriture en HTML.

Le respect des règles de syntaxe que nous venons de voir est sanctionné par une validation qui vous répond « ok le document est conforme » ou non. Le W3C encourage également à adopter des pratiques d’écriture communes à tous les développeurs, avec deux principaux objectifs :

faciliter le traitement automatique des pages, notamment par les moteurs de recherche, pour que vos pages soient bien référencées, classées, traduites, etc
permettre à d’autres développeurs de lire et comprendre votre code et donc faciliter la maintenance et l’évolution de votre site web

Voyons quelques unes de ces règles qui vous paraîtront bien vite évidentes. Nous donnons ici les règles très générales, qui correspondent à la progression de ce cours. D’autres règles plus spécifiques, comme donner un texte alternatif pour une image, viendront plus tard dans le cours.

Règles de syntaxes

1. Balises

Les balises s’écrivent en minuscules :  oui,  non.

2. Attributs

Le nom d’un attribut s’écrit en minuscules et sa valeur entre guillemets (la norme HTML n’impose pas les guillemets, à moins que la valeur contienne un espace). De préférence, écrivez <html lang="fr"> plustôt que <html LANG=fr>, ce qui est tout de même permis.

3. Indentation

Sous ce nom barbare, se cache un alignement décalé vers la droite proportionnel à la profondeur d’un élément. Dis comme cela, ça n’est pas clair, je sais ! Pour écrire un élément qui a du contenu :

la balise ouvrante est écrite, suivie d’un retour à la ligne
toutes les balises ouvrantes et fermantes des enfants, ainsi que le texte, sont écrits sur de nouvelles lignes, décalées vers la droite d’une tabulation ou de quelques espaces

On obtient ceci :

<body>
   <p>
      texte
   </p>
   <b>Gras</b>
   <p>
      texte
   </p>
</body>

Ici, il y a trois espaces d’indentation. Ce nombre est choisi par le développeur et doit être le même pour une page, en général 2, 3 ou 4. La tabulation définit un espacement de taille fixe qui sera affiché différemment selon les éditeurs de texte.

4. Lisibilité et cohérence

Premièrement, évitez les espaces superflu dans les balises. Par exemple ... est préférable à ....

Deuxième aérez le code et commentez le si nécessaire, comme ceci :

<p>
   Ce paragraphe est très
   court
</p>

<!-- Liste de choix -->
<ul>
   <li><b>Accueil</b></li>
   <li><b>Profil</b></li>
   <li><b>Commande</b></li>
</ul>

Troisièmement, si vous allez à la ligne après une balise ouvrante, placez sa balise fermante correspondante seule sur une ligne. Comme exemple, voici un code à éviter :

<ul>
   <li><b>Accueil</b></li>
   <li><b>Profil</b></li>
   <li><b>Commande</b></li></ul>

Et enfin, réservez les imbrications d’enfants sur la même ligne au bloc court ou au texte. Autrement dit, suivez ces exemples :

<!-- Là c'est ok, le texte est sur la même ligne que <p> -->
<p>Ce paragraphe est très court</p>

<!-- Là, c'est pas top -->
<ul><li><b>Accueil</b></li><li><b>Profil</b></li>
</ul>

5. Fermeture des balises

Toutes les balises ayant un contenu doivent être fermées. Cela vous paraît évident, mais en fait certains éléments, comme , pouvant se succéder, ne sont pas obligatoirement fermé. La validation W3C accepte ce code, qui pourtant n’est pas recommandé :

<p>Premier paragraphe
<p>Deuxième paragraphe
<p>Troisième paragraphe

En fait, ces règles relèvent souvent du bon sens. Si vous avez du mal à vous relire ou à faire lire votre code, posez-vous des questions !

Informations recommandées

Il y a deux informations qu’il est fortement souhaitable de donner dans tout code HTML :

le langage du texte à indiquer par l’attribut lang sur html, de façon à ce qu’il soit valable pour tout le document, utilisé par les moteurs de recherche
l’encodage des caractères, couramment utf-8, à indiquer dans une balise meta (ce principe technique sera amplement abordé dans la prochaine leçon), utilisé par le navigateur

Le code suivant montre comment les fournir et nous permet aussi de conclure sur la structure de page recommandée, que nous utiliserons systématiquement par la suite.

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

Exercice 1

Téléchargez la page annonce_mauvais.html et ouvrez-la dans l’éditeur de fichier texte (ou votre éditeur HTML préféré ; nous voyons l’édition dans la leçon suivante)
Corrigez-en les erreurs de syntaxe et rendez aussi le code lisible et conforme à nos recommandation. Vous pouvez vous aider du validateur du W3C pour la syntaxe
Vérifiez bien dans un navigateur que le résultat n’a pas changé. Vous remarquerez que le navigateur est très compréhensif pour vos erreurs !

Type	Nom	Taille

html	Annonce Mauvais	1k

A retenir

1. Règles de syntaxe à respecter absolument

Balises bien écrites et bien imbriquées
Certains éléments on un contenu contraint, par exemple <html> contient <head> et <body> et rien d’autre comme enfant direct
La structure incontournable est <DOCTYPE html><html><head><title></title><head><body></body></html> (bien sûr avec des retours à la ligne pour aérer tout cela !) à connaître par cœur

2. Règles de bonnes pratiques à respecter de préférence

Balises et attributs en minuscules
pas d’espaces inutiles
bonne imbrication parent/enfant pour rendre le code lisible
utilisation des commentaires et aération
Balises toujours fermées

3. Validation W3C

Le validateur qui peut vérifier du texte copier/coller, un fichier téléchargé ou une adresse web.

Ressources utiles

Nom	Adresse	Description
Validateur w3c	https://validator.w3.org	Vérifie la syntaxe d’un document HTML, fourni par copier-coller ou par un fichier, et signale toutes les erreurs

Téléchargements

Type	Nom	Taille

html	Annonce	1k
html	Annonce Mauvais	1k
pdf	Contenu Balises	25k

Sélectionner toutTélécharger

Pour aller plus loin

← Previous Leçon

Leçon 3 – Structure d’un document HTML