HTML - how to make an entire DIV a hyperlink?

html xhtml hyperlink

284,815

Solution 1

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');" style="cursor: pointer;">&nbsp;</div>

Solution 2

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

Solution 3

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';" id="smallbox">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!

Solution 4

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.

Solution 5

Add an onclick to your DIV tag.

http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/

View more solutions

284,815

Author by

Admin

Updated on August 18, 2020

Comments

Admin almost 4 years
How do I make an entire DIV a clickable hyperlink. Meaning, I essentially want to do:
```
<div class="myclass" 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.
Admin over 14 years

That won't work because I have a lot of content inside the DIV. I'll update my original post to make it more descriptive
prodigitalson over 14 years

@Teddy: Adding position:relative; to the div and then position: absolute; height: 100%; to the a as well... should make the entire area of the div is active.
Michael Itzoe over 14 years

Also, set the div's cursor style to pointer so the whole thing gets the finger.
SLaks over 14 years

You can put all of that content inside the <a>.
SLaks over 14 years

Demo: jsbin.com/adoka
Admin over 14 years

When I do that, my mouse cursor doesn't change to a hand like it does when hovering over a link. What am I doing wrong?
Admin over 14 years

When I do that, my mouse cursor doesn't change to a hand like it does when hovering over a link. What am I doing wrong?
Keith Adler over 14 years

The sample at the link shows that setting as well.
Joel Etherton over 14 years

You would need to use window.open. There are many canned scripts that perform this action. javascript-coder.com/window-popup/javascript-window-open.pht‌ml
Admin over 14 years

if you modified the move to be, cursor:pointer - that works
Andrew Moore over 14 years

That is not true. <a> is an inline level element capable of holding only inline level elements. Which means that having <div> and/or <table> has children of an <a> is not valid XHTML. To workaround this limitation, use inline elements and CSS to display them as block level elements. See cs.sfu.ca/CC/165/common/ref/wdgxhtml10/inline.html for a list of inline elements.
Dhawal Sawla over 14 years

onclick actually does not make it a link but just clickable. You could use the css cursor attribute to change it likewise.
Christopher Parker over 14 years

FYI: If the <a> were made an overlay, as prodigitalson suggested, then none of the elements "behind" the <a> would be selectable.
Ahmad Alfy over 11 years

This is valid HTML5 DOCTYPE only ... Wont validate if you're using HTML4 or XHTML
Wayne Werner over 11 years

This worked perfectly for me with <td><a...></a></td>
b1r3k over 10 years

works like a charm if you cannot use javascript solution presented above!
davidcondrey over 10 years

You need to make the anchor a block for this to work.
bazzilic over 9 years

Use cursor: pointer instead of cursor: hand.
Richard Moore over 8 years

That wouldn't be very good for SEO. Search engines wouldn't see the hyperlink if it was coded in JavaScript.
JohnGIS almost 5 years

This is exactly what I needed, thanks!
danielnixon almost 5 years

w3.org/WAI/WCAG21/Techniques/failures/F59
danielnixon almost 5 years

w3.org/WAI/WCAG21/Techniques/failures/F59
danielnixon almost 5 years

w3.org/WAI/WCAG21/Techniques/failures/F59
danielnixon almost 5 years

w3.org/WAI/WCAG21/Techniques/failures/F59
Joel Etherton over 4 years

@danielnixon: That's a fantastic resource and something any developer should consider when creating a user interface of any kind through the web. This question didn't have any such considerations and asked only "how to do it". Perhaps your comment is best suited at the question level because it is certainly relevant.