我可以使用同一个锚链接到多个元素吗？

Question

I have blocks of code that needs to be linked to the same URL. For example, an ecommerce product listing. To save space, I would rather all of the objects be grouped in the same anchor rather than writing out the anchor 4+ times. However, I do not know if this is best practice or functionally correct.

Can someone tell me if there is anything wrong with using the following code combination? Functionally it works, but I don't know much about how this might perform across several browsers/platforms. At the moment it looks OK for me in Chrome, Firefox, Safari, IE9.

    <a class="item" href="#">
        <img src="#" />
        <span class="brand">Brand</span>
        <span class="desc">Item</span>
        <span class="skue">123345</span>
        <span class="price">$4.79</span>
    </a>

And the CSS:

    .brand, .desc, .skue, .price {
        float:left;
        clear:both;
    }

Ideally, each of the item details (image, brand, description) will link to the same URL for that image. Is there a better way of structuring this so it won't spit out a code with 5 different anchors?

Answer 1

There is nothing wrong with this combination. You can perfectly wrap elements between an achor. As mentioned by Jon in the comments, it is meant for that.

Here's an enumeration of elements that are allowed to go inside an <a> tag:

br | span | bdo | map
object | img | tt | i | b | big | small 
ins | del | script | input | select | textarea | label | button
em | strong | dfn | code | q |
samp | kbd | var | cite | abbr | acronym | sub | sup 

Source: http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_a.content