5036 sujets

Sémantique web et HTML

Bonjour à tous
On peut parfaitement mettre une balise stylée "inline-block" dans une balise <p>... à condition de lui donner un nom du genre <span> ou <img>.
Ainsi une balise <figure> n'est pas acceptée dans un <p> par le navigateur, qui ferme la balise <p> lorsqu'il renctonre <figure>
Le seul contournement que j'ai trouvé c'est quelque chose comme:

<p>......
   <span class="figure"><img...><span class="figcaption">contenu de figcaption</span></span>
</p>

en les stylant convenablement en CSS.

Question: connaissez vous un moyen moins barbare de faire ça?
JENCAL a écrit :
Salut

J'imagine que tu n'a d'autres choix que de passer par des éléments <p></p> ?

Quand j'ai le choix, bien entendu je mets une balise <figure>

J'ai découvert ce problème par un biais détourné: j'ai une balise
<abbr>texte</abbr>

Pour faire apparaître la signification de cette abréviation autrement par un tilte="" un peu obsolète dans le monde des mobiles, j'ai écrit
<abbr>texte<span>le texte explicatif</span></abbr>

en stylant ça correctement, on ne voit le texte explicatif que quand on clique sur la balise.
J'ai stylé le <span> sous forme d'un inline-block;position:absolute; qui va s'afficher au dessous de la ligne qui contient le texte d'appel.
upload/1559040805-48769-abbrev.png
C'est tout à fait ce que je veux, mais je me suis demandé si je ne pourrais pas aller plus loin et mettre une image dans le texte explicatif.
Pas de problème pour une image, mais pas possible de mettre une figure.
J'ai cherché une solution, j'ai trouvé celle que j'ai exposée plus haut et je me suis simplement demandé si on pouvait faire autrement.
J'ai également un mécanisme beaucoup plus lourd qui consiste à avoir une <aside> après le </p> qui suit l'appel.
upload/1559040926-48769-dfn.png
Ce serait tout de même plus simple pour la personne qui écrit la page de mettre le texte explicatif dans la balise <abbr> ou juste après </abbr>, mais on tombe sur la limite des balises qu'on peut mettre dans un <p>
Cette liste avait un sens avant CSS3 et display:inline-block; mais maintenant on peut se poser la question. C'est bien sûr lié au fait que le moteur du HTML et celui du CSS sont traités de façon séparée dans les navigateurs.
Modifié par PapyJP (28 May 2019 - 12:55)
Administrateur
Bonjour,

on est loin, très loin de l'usage attendu de l'élément abbr qui est plutôt pour l'exemple :
<abbr title="Société par Actions Simplifiée">SAS</abbr>

et pas la moitié d'une fiche Wikipedia Smiley ravi

Je conseillerais plutôt d'utiliser une modale (càd pop-up, pop-in) pour afficher l'explication tellement elle est riche. Et pour afficher cette modale un bouton du genre :
<button type="button" title="En apprendre plus sur (reprendre les termes qui vont être définis)" data-params-de-la-modale="truc">?</button>

Avantage du bouton : on peut le déclencher également en utilisant le clavier (tabulation et maj-tabulation, Entrée et/ou Espace pour le "clic")
Comme script de modale, van11y de N. Hoffmann a ça en stock Smiley smile (simple à configurer et styler AMHA)

EDIT : l'inconvénient si j'ai bien compris c'est que le rédacteur de contenu va devoir jongler entre intitulé et définition ; là j'ai pas de solution toute faite faute de connaître suffisamment et l'existant et la personne…
Modifié par Felipe (29 May 2019 - 14:34)
Meilleure solution
Merci de ta réponse
En fait les "grosses" choses sont appelées par <dfn> et activent une <aside> modale, mais pour qu'elle soit affichée juste au dessous il faut un script qui aille
1) retrouver la bonne <aside>
2) la positionner au bon endroit dans la page
3) la rendre visible
ça marche très bien, je voulais simplement si on pouvait faire plus simple

Les "petites" choses, à mon avis, relèvent de <abbr>, sauf qu'on ne peut pas faire de mise en page sur les title='..." et que les title ne marchent pas sur mobile.
<abbr>Pharaon<span>Désignant originellement la "grande maison" le mot "per-aâ" <img src="https://www.universalis.fr/data/medias/formule/ev171016a.png" alt="per-aâ"> est utilisé pour désigner le souverain à partir de la période Amarnienne <i>(vers 1370 avant J.-C. )</i></span></abbr> 

Il suffit de styler

abbr span {
   position:absolute;
   ....
  display:none;
}
abbr.active span {display:table;}

et d'ajouter un eventLIstener à tous les éléments <abbr> pour activer/déactiver ces balises sur clic.
Sauf à utiliser des <span class="defitition"> et <span class="abbreviation">, ou <a class=..;"> je ne vois pas de balises plus appropriées que <dfn> et <abbr> pour traiter ces situations. De plus c'est plus facile pour la personne qui écrit le texte et pour la personne qui écrit les scripts si ces objets peuvent être désignés par une balise spécifique.

Autant que j'aie compris, <button> n'a pas sa place dans <p>, et par ailleurs, pour moi, <button> est sémantiquement un objet identifiable comme tel et pas un simple bout de texte avec une présentation particulière.

On pourrait sans doute inventer une nouvelle balise, c'est théoriquement possilbe, mais à mon avis ça créerait encore plus de confusion pour le lecteur.
Modifié par PapyJP (29 May 2019 - 18:34)
Bonjour à tous
Je réactive ce fil, car en poursuivant mes essais je tombe sur une situation étrange et j'aimerais votre opinion.

Mon objectif, c'est d'avoir à l'intérieur d'un <p> une zone de texte cliquable, telle qu'un clic sur cette zone fasse apparaître au dessous un popin <aside>.

Si j'écris

<p>le début du texte <dfn>la zone cliquable<aside>la zone popin</aside></dfn> la fin du texte</p>

comme <aside> est une balise de type bloc, le navigateur ferme la balise <p> et génère

<p>le début du texte <dfn>la zone cliquable</dfn></p>
<aside>la zone popin</aside>
la fin du texte
<p></p>


Pour contourner ce comportement (parfaitement normal) j'ai donc développé deux solutions
1) une pour les popin ne contenant que des balises de type inline, dans laquelle le popin se trouve à l'intérieur de la zone cliquable, son positionnement étant géré par CSS
2) une dans laquelle le popin est un <aside> (en dehors du <p> bien entendu).
- un script JS apparie la zone cliquable et le popin
- quand on clique sur la zone cliquable, le script met la valeur du "top" à la valeur du bas de la zone cliquable.
Comme on doit prévoir que l'utilisateur puisse changer la taille ou l'orientation de cette fenêtre, cette valeur doit être recalculée sur onsize et onorientationschange, ce qui est un peu lourd

Pour essayer de faire gérer la position du popin par CSS j'ai fait l'essai suivant :
Lorsque le script apparie la zone cliquable et la popin,, il met le popin à l'intérieur de la zone cliquable, c'est à dire que je fais en JS ce que le navigateur n'accepte pas si je le fais directement en HTML: un <aside> dans un <p>
Et de façon très étonnante, cela semble marcher du moins sous FireFox.

Avant de tester si cette solution "hérétique" fonctionne sous d'autres navigateurs, j'aimerais votre avis.
Felipe avait proposé d'utiliser la balise <button>.
Je n'avais pas saisi que <button> est une balise qui est considérée comme "inline" mais qui est en fait un "inline-block" à l'intérieur de laquelle on peut mettre un <aside>
C'est effectivement la bonne solution: en écrivant

<p>début du texte
  <button class="note">texte d'appel
      <aside>le contenu à afficher</aside>
   </button>
fin du texte</p>

Avec un peu de CSS pour styler ça et un addEventListener sur la balise <button> ça donne ce que je veux.
Merci à tous pour votre aide, et en premier lieu à Felipe.

Note: intéressant de noter que la balise <button> ne contenait initialement que du texte. Le fait que maintenant elle puisse contenir autre chose n'a pas changé le fait que les navigateurs la considèrent toujours comme inline
Modifié par PapyJP (05 Jun 2019 - 10:52)