HTML - how to make an entire DIV a hyperlink? [duplicate]

How do I make an entire DIV a clickable hyperlink. Meaning, I essentially want to do:

<div href="example.com"> <div>...</div> <table><tr>..</tr></table> .... </div> 

And whenever someone mouse hovers of the myclass DIV, I want the entire DIV it to be a clickable hyperlink.

7 Answers

You can add the onclick for JavaScript into the div.

<div onclick="location.href='newurl.html';">&nbsp;</div> 

EDIT: for new window

<div onclick="window.open('newurl.html','mywindow');">&nbsp;</div> 

You can put an <a> element inside the <div> and set it to display: block and height: 100%.

You just need to specify the cursor as a pointer, not a hand, as pointer is now the standard, so, here's the example page code:

<div onclick="location.href='portable-display-stands.html';">The content of the div here</div> 

and the example CSS:

#smallbox { cursor: pointer; } 

So the div is now a clickable element using 'onclick' and you've faked the hand cursor with the CSS...job done, works for me!

This is a late answer, but this question appears highly on search results so it's worth answering properly.

Basically, you shouldn't be trying to make a div clickable, but rather make an anchor div-like by giving the <a> tag a display: block CSS attribute.

That way, your HTML remains semantically valid and you can inherit the typical browser behaviours for hyperlinks. It also works even if javascript is disabled / js resources don't load.

Add an onclick to your DIV tag.

Why don't you just do this

<a href="yoururl.html"><div>...</div></a> 

That should work fine and will prompt the "clickable item" cursor change, which the aforementioned solution will not do.

alternative would be javascript and forwarding via the onclick event

<div onclick="window.location.href='somewhere...';">...</div>