Creating a Clickable Div

Avatar of Chris Coyier
Chris Coyier on

AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.

Update November 2020: I think the best possible technique for this is Method 4 in this article. The <div> (or whatever wrapper element) remains semantic and accessible, while being “clickable” over the whole area. It doesn’t break text selection and respects other “nested” interactive elements.

The <div> element is generic, semantics-free element. We use them all the time in CSS because they give us a styling hook without imparting any other meaning. They give you all kinds of fantastic positioning ability and give structure to your HTML. You can put links inside of a <div>, of course, but sometimes you just want the whole div to be clickable as a link. No problem, here is how it’s done:

<div onclick="location.href='YOUR-URL-HERE';" style="cursor: pointer;"></div>

The cursor style parameter changes the cursor into the default pointer cursor when a vistor mouses over the DIV, which is a nice visual indication of it’s clickability.

Update May 12, 2011

See better update above

Inline JavaScript is way less cool than it was in 2007 (if it ever was). It’s far more semantic and accessible to attach functionality via event handlers we apply in separate JavaScript. If we use jQuery, we could do something like:

<div>
   <h3>A bunch of</h3>
   <a href="http://google.com">stuff in here</a>
</div>
$(document).delegate("div", "click", function() {
   window.location = $(this).find("a").attr("href");
});