5568 sujets

Sémantique web et HTML

[Résolu] Sémantique d'une image esseulée

Pages :
Modérateur
Bonsoir,

Lorsque je désire mettre une image esseulée dans mon document en tant que bloc, dois-je l'écrire comme ceci:
<div> <img src="" alt="" /> </div>
ou bien comme celà:
img { display: block; }
<img src="" alt="" />
?

J'aurais tendance à opter pour la première solution puisqu'il me semble qu'il s'agit plus d'un problème de structure plutôt que de mise en page...

Confirmer vous ces dires? Smiley smile
Modifié par koala64 (06 Jul 2005 - 09:44)
J'ai absolument rien compris !!!!

Quel rapport avec la sémantique ?

<div><img /></div>

ne correspond pas à
<img style="display: block" />


Je comprend pas Smiley sweatdrop

C'est pour quoi faire ?

C'est quoi une image esseulée ?
Modifié par Olivier (06 Jul 2005 - 00:13)
Modérateur
bah en gros j'ai une image que je souhaite centrer au sein de mon document. Je me demandais si le fait de me servir d'un div était judicieux ou bien si je devais passer par la propriété "display: block;", le rapport avec la sémantique étant quant à l'utilisation du "div".
koala64 a écrit :
bah en gros j'ai une image que je souhaite centrer au sein de mon document. Je me demandais si le fait de me servir d'un div était judicieux ou bien si je devais passer par la propriété "display: block;", le rapport avec la sémantique étant quant à l'utilisation du "div".


Il n'y a aucune question de sémantique là-dedans Smiley lol

Un simple problème de validité selon ton doctype :
- DTD transitional (HTML ou XHTML) : le contenu anonyme est autorisé dans l'élément body. Il peut contenir directement aussi bien des éléments de type inline que des éléments de type bloc : <body><img ...></body> est valide.

- DTD stricte (HTML ou XHTML) : le contenu anonyme n'est pas autorisé dans l'élément body. Il ne peut contenir directement que des éléments de type bloc : <body><img ...></body> est invalide.

Maintenant, qu'une image seule soit dans un <p> ou un <div> n'a aucune conséquence sémantique : le balisage du conteneur n'apporte pas d'information exploitable sur le contenu dans le cas d'une image isolée. Ce qui est sémantique, en revanche, ce sont les informations apportées par les attributs de l'image, ou ses métadonnées EXIF...

<div> est très bien Smiley cligne

Enfin, bien-sûr, le display:block CSS n'a rien à voir avec tout cela, malgré la confusion créée par la présence du mot block dans la valeur de la propriété. Dans un cas, il s'agit du modèle de contenu (X)HTML, et dans l'autre du modèle de mise en forme CSS
Modifié par Laurent Denis (06 Jul 2005 - 05:59)
Modérateur
Salut,
Laurent Denis a écrit :
Il n'y a aucune question de sémantique là-dedans Smiley lol
Bon faut que je ressorte mon dico alors... Smiley rolleyes Je n'ai pas du comprendre réellement le terme sémantique d'où la réaction d'Olivier.

Laurent Denis a écrit :
Un simple problème de validité selon ton doctype :
- DTD transitional (HTML ou XHTML) : le contenu anonyme est autorisé dans l'élément body. Il peut contenir directement aussi bien des éléments de type inline que des éléments de type bloc : <body><img ...></body> est valide.

- DTD stricte (HTML ou XHTML) : le contenu anonyme n'est pas autorisé dans l'élément body. Il ne peut contenir directement que des éléments de type bloc : <body><img ...></body> est invalide.
Ah! Voilà ce que je voulais entendre... Je m'en doutais mais je n'étais pas sûr... Smiley smile

Laurent Denis a écrit :
Ce qui est sémantique, en revanche, ce sont les informations apportées par les attributs de l'image, ou ses métadonnées EXIF...
Quesako? EXIF??! Smiley confus

Laurent Denis a écrit :
<div> est très bien Smiley cligne

Enfin, bien-sûr, le display:block CSS n'a rien à voir avec tout cela, malgré la confusion créée par la présence du mot block dans la valeur de la propriété. Dans un cas, il s'agit du modèle de contenu (X)HTML, et dans l'autre du modèle de mise en forme CSS
Bah oui, j'ai commis cette erreur d'où ma question. Smiley confused

Merci bien. Smiley ravi
koala64 a écrit :
Salut,Bon faut que je ressorte mon dico alors... Smiley rolleyes Je n'ai pas du comprendre réellement le terme sémantique d'où la réaction d'Olivier.


Il y a beaucoup de flou sur la notion de sémantique dans kle petit monde des standards du Web Smiley cligne

Disons qu'une approche un peu rationnelle consiste à se dire : la sémantique est l'information disponible sur le contenu, exploitable par la machine qui va traiter ce contenu.

Dans le cas de ton image esseulée, la nature de son conteneur HTML (<p>, <div>) n'apporte aucune information sur cette image. Il n'est là que pour la validité dans la DTD visée.

Il en serait autrement dans le cas d'une collection d'images : une liste, par exemple, apporterait diverses informations telles que:
- ces images forment une collection
- ces images forment une collection ordonnée (ul)
- chacune de ces images est "définie" (dl)

Un tableau aurait également une valeur sémantique pour d'autres types de contenus avec des images, etc.

koala64 a écrit :

Quesako? EXIF??! Smiley confus


Format normalisé de métadonnées incluses dans le fichier image, exploitées par divers applications graphiques et services en ligne, Opera 8.0, ainsi, sauf erreur, qu'une extension Firefox
Modifié par Laurent Denis (06 Jul 2005 - 10:05)
Dans tous les cas, si tu dois positioné ton image, je trouve ça plus simple de lui mettre un display: block et de la positionner avec des marges plutot que de l'imbriquer dans un div et de positionner celui ci Smiley smile
TriadPtale a écrit :
Dans tous les cas, si tu dois positioné ton image, je trouve ça plus simple de lui mettre un display: block et de la positionner avec des marges plutot que de l'imbriquer dans un div et de positionner celui ci Smiley smile


Oui, mais ce n'est possible que:
- si l'image n'est pas enfant de <body> dans une DTD stricte
- ou quelque-soit le parent dans une DTD transitional
Modifié par Laurent Denis (06 Jul 2005 - 11:03)
Oui, tu lui as bien expliqué le pourquoi, mais je lui donnais mon avis sur un cas pratique Smiley smile

edit : ok je comprends. La seule restriction dans mon cas concerne un doctype strict : si l'image doit être placée dans le body, justement ce n'est pas faisable et tu dois passer par un div
Modifié par TriadPtale (06 Jul 2005 - 11:05)
Petite question..

Mettre un display : block ; pour style de l'image n'a de conséquence uniquement sur la mise en forme, le comportement de l'élément ?

Elle ne deviendra pas un block et donc directement valide dans le body ?

J'ai honte de poser la question mais ainsi, je serais fixé.
(je crois savoir la réponse bien sur mais croire ne suffit pas)

Voilà, je suis fixé. Je m'en doutais fortement evidemment mais bon..
Après je m'en serais voulu de ne pas avoir demandé Smiley langue
Modifié par Dark elf (14 Jul 2005 - 17:58)
Administrateur
Non, les CSS ne font que leur boulot : la mise en forme.
Ils n'ont pas pour mission de modifier la structure.

En clair, un élément <a> reste de type en-ligne, même si son affichage est en display block. Il ne pourra pas contenir d'éléments blocks par exemple.
Modifié par Raphael (14 Jul 2005 - 18:10)
Dark elf a écrit :
J'ai honte de poser la question mais ainsi, je serais fixé.


Pas de honte Smiley cligne
La question est au contraire parfaitement justifiée par une ambiguité dont seules les specs sont responsables.

D'un côté, en (X)HTML, nous avons les types de contenu des éléments : ça s'appelle %block et %inline (entre-autres) dans les DTD. Donc, on dit que <p> est un élément block parce qu'il peut contenir des éléments %inline. On ne devrait pas qualifier <p> d'élément bloc HTML, ça ne veut rien dire, mais c'est ce qu'on fait un peu partout, hélas.

D'un autre côté, en CSS, nous avons deux types de boîtes (entre-autres) : les boîtes blocs et les boîtes en-ligne. Pas grand rapport, mais ça porte le même nom.

D'où la confusion : si je modifie le statut d'une boîte CSS (la boîte d'un lien devient une boîte bloc), est-ce que ça modifie son statut d'élément HTML (l'élément de la catégorie %inline passe dans la catégorie %block) ?

Non. Un changement de display CSS n'a aucune influence sur le statut HTML. En termes plus précis, un changement de modèle de formatage visuel ne modifie par l'arbre du document (Celui-ci a été établi une bonne fois pour toute avant toute opération CSS par le navigateur, et n'est plus modifiable à ce niveau).


Bref : display:block n'a aucun rapport avec le HTML, c'est juste de la CSS
Modifié par Laurent Denis (14 Jul 2005 - 18:22)
Voilà qui est clair et qui ote tout flou.

Là ou j'ai honte, c'est surtout que ça fait quand même un moment que je code en (x)html/css...Et qu'au fond, je sais très bien que css=style != contenu/structure Smiley biggrin

Mais l'auteur de ce topic avait peut-être lui aussi du mal à comprendre et maintenant, je suppose que pour lui aussi, tout est OK dans sa tête Smiley smile
a écrit :
On ne devrait pas qualifier <p> d'élément bloc HTML, ça ne veut rien dire


Et pourquoi donc?

J'avoue ne pas trop comprendre l'argumentation. Que display:block n'aie aucune influence sur la nature d'un élément HTML, soit (et je suis parfaitement d'accord), mais sur quoi se base-t-on pour dire qu'on ne peut pas dire qu'un élément P n'est pas de type bloc?
Administrateur
Normand Lamoureux a écrit :
J'avoue ne pas trop comprendre l'argumentation. Que display:block n'aie aucune influence sur la nature d'un élément HTML, soit (et je suis parfaitement d'accord), mais sur quoi se base-t-on pour dire qu'on ne peut pas dire qu'un élément P n'est pas de type bloc?

(interprêtation personnelle)
C'est un élément %block, mais dire que c'est un "élément block HTML" est une redondance. En tout cas je crois que c'est ce que Laurent a voulu dire.
En clair : un élément a une nature, point. Pas "une nature HTML" (sous-entendu qu'il existerait d'autres natures)
On ne devrait parler que d'élément de niveau bloc, et d'élément de niveau en ligne (ou de niveau texte), en reprenant les termes employés par la spécification HTML. Ce serait déjà un peu moins ambigu, quoique pas encore suffisamment net :
- ce n'est pas la nature de l'élément lui-même qui est décrite : bloc ne me dit rien sur l'élément p.
- ce qui est défini, selon la DTD, ce sont ses relations avec son élément parent et ses éléments descendants : p est admis comme descendant d'éléments acceptant le contenu de type %block. Dans son propre contenu, il n'admet pas de contenu de type %block.
- ces relations ne sont d'ailleurs pas définies, pour divers éléments, à l'aide de ces notions de "bloc" et d'en ligne : HTML, HEAD et BODY, par exemple, ou encore l'élément TITLE (défini comme %head.content), etc.
- enfin, ces relations ne sont pas figées pour tous les éléments, alors que leur nature, elle, ne peut pas changer : dans ce jeu de relations, INS figure à la fois comme élément de niveau bloc et comme élément de niveau en ligne (de manière exclusive).

Parler de p comme d'un élément bloc ne fait que créer la confusion avec CSS, sans décrire le fait qu'il ne s'agit que des relations de p avec les autres éléments, de sa place dans l'arbre du document, et non de sa nature.

En espérant avoir été plus clair Smiley cligne
Modifié par Laurent Denis (16 Jul 2005 - 17:40)
Je me permets, pour essayer de bien faire sentir cette distinction, de prendre comme exemple l'article de Raphaël (par ailleurs fort utile) sur les éléments blocs et les éléments en ligne ( http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne ) :
On peut comprendre assez facilement la différence fondamentale entre ces deux structures d'éléments : les éléments "bloc" servent à distinguer les parties entières de texte, comme des titres, des paragraphes, des listes, des citations, etc. ; les éléments "en-ligne sont prévus pour rester dans le texte pour l'enrichir (lien hypertexte, emphase, renforcement, etc.).


Parti de ces fichus "bloc" et de "en ligne", l'article dérive immédiatement sur la nature des éléments. Ce qui est tout de même assez gênant pour :
- OBJECT et SCRIPT, ainsi que les contrôles de formulaires, tous de niveau en ligne : auraient-ils une nature ou une fonction comparable à SPAN, EM, etc ?
- FORM, NOSCRIPT, HR, de niveau bloc : auraient-ils une nature ou une fonction comparable à P, H1, etc ?

On voit bien ici, je crois, que les éléments de niveau bloc ne "servent" pas spécifiquement à tel ou tel usage. Et qu'il faut garder à l'esprit que ces termes n'ont de sens que pour définir une modèle de relations entre eux, c'est à dire la structure du document.

Voilà, voilà... Smiley cligne
a écrit :
bloc ne me dit rien sur l'élément p


Si, au contraire. Ça ne dit pas tout, soit, mais comme le comportement d'un paragraphe est de type bloc et que ce n'est pas accessoire, on ne peut pas dire que ça ne dit rien.

Quand même...
a écrit :
ces termes [bloc et en ligne] n'ont de sens que pour définir une modèle de relations entre eux


Pas d'accord. Parent et enfant sont des termes de relation. Pas bloc et en ligne. Je crois que vous confondez là.
Pages :
Sujet clos
Aller à