Balisage sémantique pour les survols de légende d'image?

Je travaille sur un effet de survol de la légende de l'image pour mon site et c'est à peu près terminé. J'utilise une combinaison de CSS et jQuery.Balisage sémantique pour les survols de légende d'image?

Il ressemble à quelque chose comme ça ...

enter image description here

Il fonctionne bien. La légende apparaît à gauche de l'image lorsque vous passez la souris sur l'image.

Toutefois, j'obtiens un avertissement dans Visual Studio indiquant qu'une balise h2 ne peut pas être placée à l'intérieur d'une étiquette conformément à XHTML 1.0 Transitional.

Voici le balisage Je travaille avec ...

<ul> 
    <li> 
     <a href="/controls/27/saturation-rollover-effect"> 
      <label class="info"> 
       <h2>Saturation Rollover Effect</h2> 
       <p>Product description here...</p> 
      </label> 
      <img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" /> 
     </a> 
    </li> 
</ul>

J'ai aussi essayé un span à la place du label, et je reçois le même message. J'ai également essayé un div, mais les div ne sont pas supposés être à l'intérieur de la balise a.

Je préfère garder tout cela à l'intérieur du lien comme je l'ai pour que le SEO profite du texte. Mais j'aimerais aussi être XHTML Transitional conforme, et sémantique/significatif en même temps. Des idées?

Source

2011-07-03 Steve Wortham

Je ne pense pas qu'un 'label' soit l'élément auquel vous songez, ce sont des éléments 'form', pour associer le [label étant défini avec un autre contrôle] (http://www.w3.org /TR/html4/interact/forms.html#h-17.9.1): [DTD XHTML Transitional] (http://www.w3.org/TR/xhtml1/dtds.html). Aussi, c'est un élément en ligne, et ne devrait pas contenir (pour autant que je sache, bien que sans référence externe) des éléments au niveau du bloc. –

@David - J'avais d'abord essayé un 'span 'en premier.Le 'label 'était juste moi en train de saisir les pailles, mais je ne devrais probablement pas l'utiliser de toute façon. –

Vous ne pouvez pas placer un 'h2' ou un' p' n'importe où dans une balise 'a' non plus, pas simplement' div' – BoltClock

Un label est pour les éléments de formulaire - pas d'images.

Un h2 est acceptable, bien que vous souhaitiez généralement l'utiliser pour des blocs de contenu plus volumineux.

HTML5 a introduit figure et figcaption qui pourrait être appropriée dans cette situation:

http://html5doctor.com/the-figure-figcaption-elements/

Quant à l'envelopper dans une balise a, qui n'a probablement pas de sens à moins que le href décide de valide URI sans JavaScript. Comme il s'agit d'un roll-over, cliquer sur un lien ne sera pas applicable.

Source

2011-07-03 17:11:07

Après un peu rethink je suis venu avec quelque chose qui fonctionne et est logique, je pense ...

<ul> 
    <li> 
     <div class="info"> 
      <h2><a href="/controls/27/saturation-rollover-effect">Saturation Rollover Effect</a></h2> 
      <p>Product description here...</p> 
     </div> 
     <a href="/controls/27/saturation-rollover-effect"><img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" /></a> 
    </li> 
</ul>

je devais briser la légende loin du lien autour de l'image. Puis j'ai ajouté un lien autour du titre du produit (qui est probablement plus utile pour le référencement de toute façon). Et ceci est valide XHTML. Merci à David Thomas et BoltClock pour les commentaires.

MISE À JOUR:

C'est maintenant en ligne sur mon site. C'est fonctionnel dans IE8, mais pas aussi joli que dans IE9, Chrome ou Firefox. Et puis je pourrais faire les vignettes en niveaux de gris pour un look plus propre. Dans l'ensemble, il semble plutôt bien fonctionner ... http://www.silverlightxap.com/

Source

2011-07-03 17:08:04

Cela semble certainement mieux. – BoltClock

Balisage sémantique pour les survols de légende d'image?

Répondre

Questions connexes