5546 sujets

Sémantique web et HTML

Bonsoir,

Je constate un bug d'affichage sur mes navigateurs de test (Chrome et Firefox) lorsque je tente d'insérer un élément <address> dans un <p> parent :
<p>
  <address>
    <a href="/page/person.html">Jeanne d'Arc</a>
  </address> aujourd'hui à <time datetime="2023-03-07 09:31:17">9h31</time>
</p>

Le code source est bien tel quel, mais les navigateurs produisent quelque chose d'assez différent dans leur inspecteur respectif :
<p></p>
<address>
  <a href="/page/person.html">Jeanne d'Arc</a>
</address> aujourd'hui à <time datetime="2023-03-07 09:31:17">9h31</time>

Vous voyez que la balise p a comme "éjectée" son contenu. Il en est malheureusement de même pour le rendu de la page web qui est visuellement impactée de la même manière.

Si je remplace address par un span je n'ai plus aucun soucis :
<p>
  <span>
    <a href="/page/person.html">Jeanne d'Arc</a>
  </span> aujourd'hui à <time datetime="2023-03-07 09:31:17">9h31</time>
</p>

Pourtant la possibilité de mettre address dans p est décrite par MDN : "Parents autorisés : tout élément qui accepte un contenu de flux... (lien)". Et de même, le code passe sans problème à la validation W3C. Ça me rend fou cette histoire...

PS : j'oubliais le Pen : CodePen
Modifié par Olivier C (07 Mar 2023 - 23:30)
Modérateur
Salut,

parsimonhi a écrit :

C'est le comportement normal.


+1 <address> est de type block. Moi même, j'aurais pu tomber dans le panneau (écrire comme tu l'as fait Olivier pensant que c'est du inline).

À une époque, je consultais une page similaire à celle-ci. Cependant, vu que maintenant le doctype est plutôt orienté html5, cette page est un peu moins intéressante. Mais...
Modifié par niuxe (08 Mar 2023 - 01:52)
Merci à vous.

Il me semblait que c'était un problème lié à un type bloc inclu.dans l'élément p, mais si la documentation MDN est très claire du côté de l'élément p, elle m'avait induite en erreur du côté de l'élément address que j'avais seul consulté. Quant au validateur W3C...

Je suis en train de créer/réactualiser quelques templates pour mes besoins, lorsque j'en aurai à peu près terminé, je ferai critiquer leur structure - ainsi que leur style - ici sur Alsacreations. Comme toujours, le plus dur n'est pas de coder mais de savoir ce que l'on veut Smiley smile

Sujet résolu. Merci encore.
Modifié par Olivier C (08 Mar 2023 - 07:42)