Why the handle in JQuery UI slider is <a> tag?

Question

I was reading the code in the official demo page for slider: http://jqueryui.com/demos/slider/ and I was wondering why an <a> tag is used for handle? Why not a <div>?

<div class="demo">

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <a class="ui-slider-handle ui-state-default ui-corner-all ui-state-hover" href="#" style="left: 19%; ">
    </a>
</div>

</div>

Darius

changing it to a div in chrome inspector kills it, possibly because it removed event handlers. – Strawn

I don't know why with <a>. but <div> is a block element, which doesn't suit here. – Bronwyn

I thought so too, but because position:absolute it is has display:block – Strawn

Answer 1

I think they used an anchor because in HTML links are what separate HTML from other markup languages because they provide interaction. Taken from w3c

HTML offers many of the conventional publishing idioms for rich text and structured documents, but what separates it from most other markup languages is its features for hypertext and interactive documents. This section introduces the link (or hyperlink, or Web link), the basic hypertext construct. A link is a connection from one Web resource to another. Although a simple concept, the link has been one of the primary forces driving the success of the Web.

And the handle is also something you click, so maybe they thought that semantically made more sense using an <a> instead of a <span>.

To make it clear, my thought is that they could have used anything technically but they choose an anchor for semantic reasons

Makeup

Still it doesn't make sense. <a> is for links, A link is a connection from one Web resource to another, the handle connects nothing to nowhere. I think the go-to non-semantic interaction element is the <button>, but people have long been using the <a href="#"> since it's way easier to customize—but <button>'s are just as customizable. – Creditor

Answer 2

I was wondering the same ... so here I am ... with a theory!

The handles need to be able to have the focus
(when they do, you can use the arrows, Home- and End-keys to manipulate the handles)

Not sure if spans or divs can have the focus (in all browsers..) ?

Maybe <button> could be used instead ? (somebody, please try)
- that would make more sense. And not clutter up the status-line : (
(Could we get into trouble, if there's a surrounding form without a proper submit-button ?)

Astridastride