5568 sujets

Sémantique web et HTML

[Résolu] Mettre un lien lié à (dans?) une <figure> ?

Bonjour à tous,

J'ai une petite question de sémantique.
En fait je travaille sur un contenu illustré d'images...
Disons une recette de cuisine. Chaque recette sera illustrée d'une photo pour donner faim Smiley biggrin .

Chaque photo sera dans une <figure>. Je pense que là c'est correcte, vous m'arrêter si je me trompe.

J'utilise sur ce site la syntaxe html 5 suivante (avec <figcaption> pour le titre de la <figure>)
<figure>
<img ... >
<figcaption>Miam miam</figcaption>
</figure>


Maintenant pour donner encore plus faim, je veux que ma photo soit cliquable pour faire un zoom en js (ou target _blank si pas js).
Donc es ce que je met ma figure entièrement cliquable (ce qui d'un aspect graphique sera plus intuitif du fait que ma figure ressemble à un polaroid), ou alors es ce que je "dois" mettre que mon <img> cliquable. Ou alors es ce que c'est carrément mal de mettre un lien dans une figure d'un point de vue sémantique ?
Modifié par MoOx (08 Feb 2010 - 09:35)
Hello et bon anniversaire,

MoOx a écrit :
Donc es ce que je met ma figure entièrement cliquable

Ben oui, pourquoi pas? Sauf si ton «figcaption» fais trois pieds de long, c'est même plutôt pertinent si la légende de l'image fait partie du lien.
Ou alors tu prends le parti de faire un lien sur l'image uniquement, et dans ce cas tu veilles à avoir un texte alternatif qui va bien, du genre:
<figure>
  <a href="image-grand.jpg">
    <img src="image-petit.jpg" alt="[Descriptif court de l'image] - voir l'image en grand">
  </a>
  <figcaption>
    [Descriptif long de l'image]
  </figcaption>
</figure>


Ceci dit, pour ma part je me tiendrais loin de FIGURE en HTML5, vu que la définition de cet élément change tous les trois mois...

MoOx a écrit :
es ce que c'est carrément mal de mettre un lien dans une figure d'un point de vue sémantique ?

Je vois pas trop pourquoi ce serait mal.

Plus généralement, c'est un exemple de collision (pas trop violente) entre un contenu et une fonctionnalité. Le contenu c'est ton illustration et sa légende. La fonction c'est la possibilité de voir l'image en grand (implémentée comme un lien). Ça ressemble au cas classique où on a une liste d'articles avec titre et texte d'accroche, et on veut placer un lien sur le titre: on a un titre de section qui décrit le texte d'accroche, mais qui a aussi la fonction de lien (accès à l'article complet), de manière implicite.

La sémantique HTML permet ce genre de collision. HTML5 le rend encore plus facile en permettant de placer un lien autour de n'importe quel élément, y compris un élément FIGURE:
<a href="...">
  <figure>
    <img ...>
    <figcaption>...<figcaption>
  </figure>
</a>


Après, ce n'est pas parce que c'est une application correcte de la sémantique HTML que c'est une bonne chose. On peut faire un code sémantiquement juste (là encore, s'il s'agit juste de respecter la sémantique HTML), mais inaccessible, par exemple.
Merci pour cette réponse bien fournie.

Pour le fait que <figure> change souvent je suis prêt à m'adapter c'est pour un projet perso.
Je pensais que c'est l'element html le plus adapté, si y'a d'autres propositions je vous écoute Smiley smile

PS: Merci pour l'anniv'. Grâce à lui je passe sur un Mac \o/
MoOx a écrit :
PS: Merci pour l'anniv'. Grâce à lui je passe sur un Mac \o/
Trop sympa ton anniv' ! Smiley langue
MoOx a écrit :
PS: Merci pour l'anniv'. Grâce à lui je passe sur un Mac \o/

Ça va être la merde pour faire un environnement de dev PHP. \o/
Conseil: dual boot ou virtualisation Ubuntu. Smiley smile
Il y a moyen, même avec le serveur intégré, mais il faut utiliser les packages PHP de Marc Liyanage, celui livré ne l'est pas avec toutes les extensions (problème de licence).

C'est moins souple que Linux. Smiley cligne
Modifié par Patidou (08 Feb 2010 - 14:52)
Sujet clos
Aller à