Balise html autofermantes, slash et W3C

[saluts92]

Bonjour,
J'ai pris l'habitude de coder un /> à la fin de chacune de mes balises de type bloc : Hx, IMG, INPUT, etc ..

Cependant depuis quelques temps, lorsque je valide mon code avec le W3C validator il m'indique en "INFO" :"La barre oblique finale sur les éléments vides n'a aucun effet et interagit mal avec les valeurs d'attribut non citées."
Alors que W3C n'indiquait rien avant

il faut savoir! Qu'en est il aujourd'hui ?

 

[pomination]

Bonjour,
A ma connaissance, il n'y avait que XHTML qui imposait des balises autofermantes et c'était une liste bien précise de balises, pas toutes.
En HTML il n'y pas cette obligation.
Donc tout dépend du DocType choisi

 

[saluts92]

il n'y avait que XHTML

non non, HTML aussi et c'était une recommandation W3C pour HTML5 en plus

 

[emualliug]

balises de type bloc

Balise "de type bloc" fait plus référence à une notion de mise en page (<div> ou <p> sont des éléments de type bloc alors que <i> non) ; on parle plutôt d'éléments vides, encore que la traduction n'est pas excellente. On trouve parfois une distinction entre les éléments "empty", qui n'ont pas de contenu, et les éléments "void" qui ne peuvent pas avoir de contenu.

Hx, IMG, INPUT, etc

Hx est une typo pour désigner hr ? parce que les balises h1 , h2, h3 etc. ne sont pas des éléments vides.

Les balises auto-fermantes proviennent du XML où toute balise ouverte doit être fermée, ce qui n'est pas nécessairement le cas en HTML (par exemple, la fermeture d'un élément <p> est optionnelle dans un certain nombre de cas).

En HTML à proprement parler, les balises auto-fermantes n'existent pas, ou pas vraiment. Par exemple <p></p> est valable en HTML et en XML, mais <p /> ne l'est qu'en XML.

L'utilisation des balises auto-fermantes pour les pages web provient du XHTML, elle était nécessaire pour les balises vides, mais ce langage n'a pas eu, sur le long terme, un franc succès.

Le HTML5 tranche d'ailleurs nettement, là où le XHTML est aussi strict que le XML, HTML5 est plutôt permissif par nature. Cette permissivité fait qu'il est compatible avec des éléments de XML (dont les balises auto-fermantes), et donc que celles-ci sont autorisées pour les balises vides, sans être pour autant nécessaires.

Deux ressources intéressantes : https://developer.mozilla.org/en-US/docs/Glossary/Void_element et https://blog.novalistic.com/archives/2017/08/optional-end-tags-in-html/

 

[emualliug]

le W3C validator il m'indique en "INFO" :"La barre oblique finale sur les éléments vides n'a aucun effet et interagit mal avec les valeurs d'attribut non citées."

Ah et pour compléter, où est le problème au juste (le message n'étant pas très clair, il faut le dire) ?

En HTML5, la valeur d’un attribut n'a pas nécessairement à être entre guillemets : <hr class=separation> est donc valable, pour reprendre l'exemple du blog que j'ai cité :

<input type=checkbox checked />

Ce bout de code est "inhabituel" pour reprendre les termes de l'auteur, puisqu'il mêle des choses qui ne sont permises que par HTML5, mais s'impose la contrainte de XML qui n'a pas lieu d'être. Inhabituel, mais jusque là, pas problématique.

Par contre, considérons le bout de code suivant :

<img class=foo/>

Faut-il considérer que la classe appelée est foo/ (bien que ce ne soit pas correct du point de vue des règles de nommage) ou bien est-ce foo mais avec une balise auto-fermante ?

J'ai tiré cet exemple d'ici : https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=10809 cité depuis le github de Nu Html Checker https://github.com/validator/validator/issues/1433

 

[saluts92]

le message n'étant pas très clair, il faut le dire

si si

 

[rick38]

Le HTML 5 a toujours été clair que c'est facultatif, donc j'ai tout enlevé les slashs que j'avais en XHTML, ça fait toujours ça de gagné en poids inutile.

 

[emualliug]

si si

Je parlais du message du validator : :"La barre oblique finale sur les éléments vides n'a aucun effet et interagit mal avec les valeurs d'attribut non citées.". Parler de "valeur d'attribut non citées", ne veut rien dire. Qu'est-ce qu'une valeur "citée" ?

Surtout, comme le montrent d'autres échanges, le problème est plus spécifique : il tient aux valeurs d'attributs sans guillemets.

Je serais curieux de voir le message en anglais, parce que, en y réfléchissant, je pense que "non cité" est une mauvaise traduction de ”unquoted".

 

[saluts92]

Je serais curieux de voir le message en anglais,

Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

 

[emualliug]

Ah bin voilà, c'est bien ça : une mauvaise traduction.