html - Semantic markup for image caption rollovers? -


i'm working on image caption rollover effect site , it's pretty done. i'm using combination of css , jquery.

it looks this...

enter image description here

it works well. caption appears left of image whenever mouseover image.

however, i'm getting warning in visual studio h2 tag cannot placed inside of label according xhtml 1.0 transitional.

here's markup i'm working with...

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

i've tried span in place of label, , same message. i've tried div, div's not supposed inside of a tag.

i'd prefer keep of inside of link have seo benefit text. i'd xhtml transitional compliant, , semantic/meaningful @ same time. ideas?

a label form elements--not images.

an h2 acceptable, though you'd typically want use larger blocks of content usually.

html5 has introduced figure , figcaption might appropriate in situation:

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

as wrapping in a tag, doesn't make sense unless href resolves valid uri sans javascript. since it's roll-over effect, clicking link woudldn't applicable.


Comments

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

java - Output of Eclipse is rubbish -

jquery - Confused with JSON data and normal data in Django ajax request -