イメージキャプションロールオーバーのセマンティックマークアップ？

Question

私は自分のサイトの画像キャプションロールオーバーの効果に取り組んでいます。私はCSSとjQueryの組み合わせを使用しています。

それは次のようになりますが...

それはうまく動作します。キャプションは、画像をマウスオーバーするたびに画像の左側に表示されます。

しかし、Visual Studioで、h2タグをXHTML 1.0 Transitionalのラベルの内側に配置できないという警告が表示されています。

は、ここに私が...

<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> 

で働いているマークアップだ私はまたlabelの代わりにspanを試みた、と私は同じメッセージが表示されます。私もdivを試しましたが、divはaタグの内側にはないはずです。

私はテキストからSEOの利点を得るために持っているように、私はこのすべてをリンクの内側に保ちたいと思います。しかし、私はまた、XHTML Transitionalに準拠し、同時に意味/意味のあるものにしたいと思っています。何か案は？

Answer 1

labelはイメージ用ではありません。

h2でも可能ですが、通常は大容量のコンテンツブロックに使用することをお勧めします。

HTML5は、このような状況では適切かもしれませんfigureとfigcaptionを導入しました：HREFが有効に解決されない限り、おそらく意味をなさないaタグ、それを包むよう

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

をURIはJavaScriptですロールオーバー効果であるため、リンクをクリックすると適用されません。

Answer 2

私が動作し、理にかなって何かを思い付いた少し再考した後、私は思う...

<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> 

私は離れて、画像の周りのリンクからキャプションを破る必要がありました。それから私は製品のタイトルの周りにリンクを追加しました（これはおそらくSEOにとってもっと有益でしょう）。これは有効なXHTMLです。コメントのためにDavid ThomasとBoltClockに感謝します。

更新日：

これは現在私のサイトに掲載されています。これはIE8では機能的ですが、IE9、Chrome、またはFirefoxと同じくらい美しくはありません。サムネイルをグレースケールにして、きれいに見せることができます。全体的にはかなりうまくいくようです... http://www.silverlightxap.com/