Question

When using jQuery events such as click, mouseover and so, are there big differences between using an anchor and a span? Anchors have hover states which can be called in jQuery, but apart from that, would it be good practise to use spans instead? (or divs, or any other element for the purpose). Suppose I want to dynamically change some classes and open a tooltip… This is just an example, I’m wondering if it’s something that is “not recommended” by some reason.

Edit: Anchors only allow inline elements inside, that’s one of the limitations that made me wonder if it would be a bad practise, because inside anchors I can only have spans. The anchors I’m using don’t point anywhere, I’m using them only to take advantage of hover styles in css without having a long and repetitive script.

Example:

<span class="class">
    <p>Some text I don't want to use</p>
    <a class="anchorClass" href="#">Anchor with a specific behaviour</a>
</span>

<a class="class" href="#">
   <p>Some other text I don't want to use but I want it to be inside the anchor</p>
   <span class="spanClass">Span with a specific behaviour</span>
</a>

Answer 1

If the element points to a specific location that can be bookmarked or sent as a direct link, use an <a> tag. If not, just use a <span>. That way your application will degrade gracefully for people with JavaScript disabled.

I’m not sure what else to suggest. That is usually what rule I follow when interchanging the two.