Search code examples
htmlcsssemantic-markup

Semantic markup for image caption rollovers?

I'm working on an image caption rollover effect for my site and it's pretty much done. I'm using a combination of CSS and jQuery.

It looks something like this...

enter image description here

It works well. The caption appears to the left of the image whenever you mouseover the image.

However, I'm getting a warning in Visual Studio that an h2 tag cannot be placed inside of a label according to XHTML 1.0 Transitional.

Here's the 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 also tried a span in place of the label, and I get the same message. I've also tried a div, but div's are not supposed to be inside of the a tag.

I'd prefer to keep all of this inside of the link like I have it to get the SEO benefit from the text. But I'd also like to be XHTML Transitional compliant, and semantic/meaningful at the same time. Any ideas?

Solution

  • A label is for form elements--not images.

    An h2 is acceptable, though you'd typically want to use that for larger blocks of content usually.

    HTML5 has introduced figure and figcaption which might be appropriate in this situation:

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

    As for wrapping it in an a tag, that probably doesn't make sense unless the href resolves to a valid URI sans JavaScript. Since it's a roll-over effect, clicking a link woudldn't be applicable.