5568 sujets

Sémantique web et HTML

Imbrication des balises

Bonjour à tous
Je viens de dépanner un ami qui avait écrit

<h3>Titre de paragraphe 1<h3>
<p>contenu du paragraphe</p>
<h3>Titre de paragraphe 2</h3>
...

Comme il avait écrit <h3> au lieu de </h3> le navigateur a "traduit":

<h3>Titre de paragraphe 1</h3><h3>
<p>contenu du paragraphe</p></h3>
<h3>Titre de paragraphe 2</h3>
...

c'est à dire que le paragraphe s'est trouvé à l'intérieur d'un <h3> et avait donc la présentation d'un titre de paragraphe et pas celle d'un alinéa.

Je croyais avoir compris qu'un <p> ne peut pas se trouver dans un <h3>, ce qui aurait dû donner


<h3>Titre de paragraphe 1</h3><h3></h3>
<p>contenu du paragraphe</p>
<h3>Titre de paragraphe 2</h3>
...

pouvez vous éclairer ma lanterne sur ce qu'on peut ou non mettre dans une balise <hx>?
Administrateur
Bonjour,

Jean-Pierre > attention il s'agit d'attributs universels, comme class="ma-classe" et non d'éléments.

PapyJP > les règles de parsing des navigateurs sont très complexes avec HTML 5. Ce qui est une bonne nouvelle parce que maintenant elles existent : tout est codifié, y compris et surtout les erreurs. Avec HTML 4.01 et XHTML 1.0, les navigateurs "faisaient des trucs". Rien de standard, rien de commun entre 2 navigateurs…
edit : c'était et ça reste du code HTML invalide ("le validateur HTML trouve des erreurs") mais la manière dont chaque navigateur moderne doit parser le code et traiter l'erreur est standardisée.

La mauvaise c'est que ça fait des pages et des pages et que c'est écrit pour les vendors : Apple, Chrome, Mozilla, MS et cie ainsi que pour le validateur du W3C. (*)

Sachant que HTML est très gentil avec les dévs et accepte une palanquée d'erreurs (j'aurais dû commencer par là), contrairement à XML. C'est donc pas étonnant AMHA (l'explication par contre…)

La spec dit que hN est un élément qui accepte du "phrasing content" (typiquement span, strong, label et aussi A, etc). Un élément p n'est certainement pas du phrasing content donc dans ce cas précis, je ne sais pas pourquoi il ne fait pas comme attendu.
Je viens de vérifier dans les DevTools de Firefox, onglet Accessibilité (il est pas forcément présent par défaut à côté de l'Inspecteur, Console, etc) et le texte du paragraphe apparaît bien comme ayant la sémantique d'un paragraphe dans un titre de section : DOM, rendu visuel et accessibility tree sont cohérents.

(*) "introduction" How Browsers Work: Behind the scenes of modern web browsers, section parsing algorithm
En suivant le lien vers la spec du WHATWG, je vous laisse admirer la longueur du truc et les cas particuliers "si on avait pas encore la balise ouvrante <html>, si on est dans un élément script, etc" Smiley biggol
Encore qu'il y a 2 exemples presque compréhensibles 12.2.9 An introduction to error handling and strange cases in the parser / misnested tags, plutôt le 2e plus proche du cas ici.
Modifié par Felipe (23 Sep 2019 - 17:57)
Merci de vos réponses
J’avais regardé lesdits documents avant de poser la question et c’est effectivement incompréhensible.
Noter que le même comportement se trouve avec Chrome et FireFox.
Je n’ai pas testé avec les autres navigateurs et au fond ça n’a pas beaucoup d’importance.

Ce qui m’intéressait, c’est de savoir si j’avais mal compris et qu’on pouvait mettre un <p> dans un <h3>

C’est fou le nombre de choses que je découvre au hasard de mes recherches et qui peuvent simplifier la vie.
Très récemment j’ai découvert qu’un <button> dans un <p> ouvrait des perspectives intéressantes, car un <button> est un inline-block et on peut donc y mettre des choses qui n’entrent normalement pas dans un <p>. D’un seul coup j’ai pu virer une bonne vingtaine de lignes de JavaScript de ma bibliothèque
Sujet clos
Aller à