Neural v7.5.3 et le nouveau HTML

Neural respecte les nouvelles recommandations du WHATWG concernant la dernière version « HTML Living Standard » du 5 octobre dernier.
C’est toujours le même HTML5, un tantinet plus simple, moins strict, avec davantage d’exceptions!

Il y a deux aspects qui devront être ajustés pour se conformer à ces nouvelles recommandations.

La conception de site Web

C’est le webmestre qui fait la conception des sites Web, ce n’est donc pas une préoccupation des édimestres. Par contre, il y a certaines recommandations qui retournent déjà un avertissement, en fait une « information ». Ce n’est même pas un avertissement pour l’instant. Mais la conception de site Web devra s’adapter. Mon dernier site bâtit avec Neural « Site d’accueil territorial de la MRC de Rivière-du-Loup - La VRAIE Vie! »,respecte à la lettre les nouvelles recommandations. Et tous les nouveaux sites Web respecteront bien entendu ces recommandations... Les recommandations couvrent le HTML, mais aussi les feuilles de styles CSS et le JavaScript.

La conception de page Web

Même chose, on parle essentiellement d’un message à titre d’information pour l’instant. Mais ça change la formation que je donne. Par exemple, de toujours fermer les balises mêmes si ce n’était pas obligatoire avec le HTML5. Depuis le 5 octobre, ce n’est toujours pas obligatoire, mais on promet qu’éventuellement la validation d’une page HTML émettra un avertissement si on ne respecte pas les nouvelles recommandations...

L’idée était simple, le langage HTML est basé sur des balises. Comme le mot l’indique, balise égal balisage. C’est-à-dire une balise devant le contenu pour indiquer où il s’applique et une balise de fermeture pour indiquer où le code cesse de s’appliquer. La règle du XHTML était fort simple « Dans tous les cas, sans exception ». Point! Le WHATWG derrière les nouvelles recommandations renverse le Web avec cette affirmation « les balises ne sont plus des balises »! ;- ) Bien sûr si elle ne ferme plus, ce n’est plus du balisage. Mais du coup on ajoute des exceptions. En d’autres mots, le code sera plus "simple", mais le codage plus en principe "compliqué". Notez que rien n’a changé derrière, le navigateur, qui interprète le HTML, remplit les trous. Le navigateur ferme lui-même les balises dites facultatives! Alors c’est toujours notre bon vieux XHTML!

Pourquoi? Bonne question, en fait ça pourrait être pour simplifier la programmation, on parle surtout d’optimisation, mais j’en doute. À mon avis, c’est pour accommoder les robots des géants derrière le WHATWG à savoir Apple, Google, Mozilla, Microsoft! Mais la raison officielle est « Cesser de laisser les navigateurs dicter les recommandations du HTML au profit du WHATWG qui dictera à l’avenir les recommandations aux navigateurs. » Héhé, trouver l’erreur, Apple, Google, Mozilla, Microsoft font tous des navigateurs! Mieux encore, la plupart sont basés sur Google Chrome qui lui même est basé sur WebKit de Apple! À part Firefox et Opera, tous les navigateurs courants ont le même noyau! Au moins ça reste un format ouvert et les brevets, libre de droits!

De toute façon, il faut prendre le virage. Alors voilà en résumé les habitudes que vous devrez développer. Sachez d’abord que le gestionnaire Neural a déjà été adapté pour respecter les nouvelles recommandations du 5 octobre 2022. Voilà donc un résumé des points les plus importants :

Formatage

• Tout doit être en minuscule;
• Indenter l’imbrication des balises;
• Une balise par ligne (sauf pour les listes à puces et les lignes de tableaux...);
• Ne pas avoir d’espace inutile à la fin des lignes;
• Toujours utiliser les doubles guillemets pour les attributs...

Exemple :

<p>Texte de mon paragraphe avec balise en MINUSCULE!
<ul>
  <li>Item de la liste à puce avec indentation de deux espaces;
  <li>Autre item;
  <li>Autre item.
</ul>

Fermeture des balises

Il y a une foule d’exception maintenant pour la fermeture des balises. Dans le doute, fermer les balises. Mais il y a trois balises courantes « sans contenu » qui doivent dès maintenant respecter les recommandations. Le saut de ligne, la ligne horizontale et l’image :

<!-- Le saut de ligne -->
/* Non recommandé */
<br />

/* Recommandé */
<br>

<!-- La ligne horizontale -->
/* Non recommandé */
<hr />

/* Recommandé */
<hr>

<!-- L’image -->
/* Non recommandé */
<img src="image.png" />

/* Recommandé */
<img src="image.png" alt="Titre alternatif de mon image">

Balises facultatives

Comme je disais plus haut, dans le doute fermer chacune des balises ouvertes sans vous poser de question. Car ce ne sera pas toujours évident et décrire ici toutes les exceptions n’aiderait pas non plus!

Bien entendu si vous ne fermez pas la balise du caractère gras, le reste de la page sera en caractère gras. Il faut donc fermer toutes les balises pour le caractère gras :

/* Recommandé, fermer la balise */
<b>Mot en gras</b>

Mais les blocs comme le paragraphe (<p>), les items d’une liste à puces (<li>) ou bien les cellules (<td> ou <th>) et même les lignes (<tr>) d’un tableau HTML, peuvent omettre la balise de fermeture :

/* Non recommandé, balise de paragraphe fermée */
<p>Mon premier paragraphe...</p>
<p>Mon deuxième paragraphe...</p>
<p>Mon troisième paragraphe...</p>

/* Recommandé, balise de paragraphe non fermée */
<p>Mon premier paragraphe...
<p>Mon deuxième paragraphe...
<p>Mon troisième paragraphe...

/* Non recommandé, balise de liste (item) à puces fermée */
<ul>
  <li>Mon premier item...</li>
  <li>Mon deuxième item...</li>
  <li>Mon troisième item...</li>
</ul>

/* Recommandé, balise de liste (item) à puces non fermée */
<ul>
  <li>Mon premier item...
  <li>Mon deuxième item...
  <li>Mon troisième item...
</ul>

Et la complexe table HTML

Contenterez votre attention sur les balises en rouge qui sont tout simplement supprimées dans l’exemple recommandé. Noter que l’exemple recommandé de la W3C démontre aussi une généreuse exception, l’autorisation de placer sur la même ligne plusieurs cellules...

<!-- Non recommandé -->
<table>
  <caption>37547 Fonctions du train automoteur électrique TEE (en abrégé)</caption>
  <colgroup><col><col><col></colgroup>
  <thead>
   <tr>
    <th>Fonction</th>
    <th>Unité de contrôle</th>
    <th>Gare centrale</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Phares</td>
    <td>✔</td>
    <td>✔</td>
   </tr>
   <tr>
    <td>Lumières intérieures</td>
    <td>✔</td>
    <td>✔</td>
   </tr>
   <tr>
    <td>Sons de la locomotive électrique</td>
    <td>✔</td>
    <td>✔</td>
   </tr>
   <tr>
    <td>Éclairage cabine conducteur</td>
    <td></td>
    <td>✔</td>
   </tr>
   <tr>
    <td>Annonces des stations - Suisse</td>
    <td></td>
    <td>✔</td>
   </tr>
  </tbody>
</table>

<!-- Recommandé -->
<table>
 <caption>37547 Fonctions du train automoteur électrique TEE (en abrégé)
 <colgroup><col><col><col>
 <thead>
  <tr> <th>Fonction                          <th>Unité de contrôle <th>Station centrale
 <tbody>
  <tr> <td>Phares                            <td>✔                 <td>✔
  <tr> <td>Éclairage intérieur               <td>✔                 <td>✔
  <tr> <td>Sons de la locomotive électrique  <td>✔                 <td>✔
  <tr> <td>Éclairage cabine conducteur       <td>                  <td>✔
  <tr> <td>Annonces des stations - Suisse    <td>                  <td>✔
</table>

Voilà, ça fait le tour des recommandations pour l’édimestre. Le reste s’adresse surtout aux webmestres et concerne la structure et surtout le langage CSS. Si vous souhaitez à en savoir davantage, j’ai écrit un texte pour les professionnelles : « Living Standard pour HTML ».

Références

• HTML Living Standard - Last Updated 24 October 2022, WHATWG
• World Wide Web Consortium, W3C
• Living Standard pour HTML, Trucsweb.com
• Site d’accueil territorial de la MRC de Rivière-du-Loup - La VRAIE Vie!