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

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
Post a Comment