HTML - how to make an entire DIV a hyperlink?

Question

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.

You can put any content you want inside an `` element. There's no reason to use a `
` here. — SLaks, Feb 02 '10 at 22:44
`
` is an element which is supposed to contain other elements or information, `` is element, which makes 'actions' on those information (navigation, pagination, etc..) so why do you want to have a whole clickable div when you have ``? — Juraj Blahunka, Feb 02 '10 at 22:55
@SLacks: That is not true. `` is an inline level element capable of holding only inline level elements. Which means that having `
` and/or `` has children of an `` is not valid XHTML. To workaround this limitation, use inline elements and CSS to display them as block level elements. See http://www.cs.sfu.ca/CC/165/common/ref/wdgxhtml10/inline.html for a list of inline elements. — Andrew Moore, Feb 02 '10 at 23:07
well i think that when developing website applications and you really want to have valid code, rather use a less strict validation model like html 4.01 trans. or html 5, which accepts block elements insde let's say ``... also imagine google bot, do you think it can crawl your pages just from a `window.open('example.com', 'wnd');` ? This is how flames start... :-D — Juraj Blahunka, Feb 02 '10 at 23:45

score 177 · Accepted Answer · edited Aug 17 '15 at 10:55

177

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>

edited Aug 17 '15 at 10:55

Gianfranco P.

10,049
6
51
68

answered Feb 02 '10 at 22:36

Joel Etherton

37,325
10
89
104

5

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? – Teddyk Feb 02 '10 at 22:42
You would need to use window.open. There are many canned scripts that perform this action. http://www.javascript-coder.com/window-popup/javascript-window-open.phtml – Joel Etherton Feb 02 '10 at 22:45
2

if you modified the move to be, cursor:pointer - that works – Teddyk Feb 02 '10 at 22:49
5

Use `cursor: pointer` instead of `cursor: hand`. – bazzilic Nov 10 '14 at 12:07
1

That wouldn't be very good for SEO. Search engines wouldn't see the hyperlink if it was coded in JavaScript. – Richard Moore Dec 10 '15 at 11:09
https://www.w3.org/WAI/WCAG21/Techniques/failures/F59 – danielnixon Jul 03 '19 at 09:57
@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. – Joel Etherton Sep 23 '19 at 14:41

score 26 · Answer 2 · answered Feb 02 '10 at 22:34

26

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

answered Feb 02 '10 at 22:34

SLaks

868,454
176
1,908
1,964

2

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 – Teddyk Feb 02 '10 at 22:35
1

@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. – prodigitalson Feb 02 '10 at 22:37
You can put all of that content inside the ``. – SLaks Feb 02 '10 at 22:37
1

Demo: http://jsbin.com/adoka/ – SLaks Feb 02 '10 at 22:39
1

That is not true. `` is an inline level element capable of holding only inline level elements. Which means that having `
` and/or `` has children of an `` is not valid XHTML. To workaround this limitation, use inline elements and CSS to display them as block level elements. See http://www.cs.sfu.ca/CC/165/common/ref/wdgxhtml10/inline.html for a list of inline elements.
– Andrew Moore Feb 02 '10 at 23:09
FYI: If the `` were made an overlay, as prodigitalson suggested, then none of the elements "behind" the `` would be selectable. – Christopher Parker Feb 03 '10 at 16:53
This worked perfectly for me with `` – Wayne Werner Jan 08 '13 at 13:28
works like a charm if you cannot use javascript solution presented above! – b1r3k Sep 12 '13 at 21:52
This is exactly what I needed, thanks! – JohnGIS Jun 25 '19 at 13:54

score 17 · Answer 3 · answered Jun 28 '12 at 09:00

17

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!

answered Jun 28 '12 at 09:00

Nick Annies

179
1
2

https://www.w3.org/WAI/WCAG21/Techniques/failures/F59 – danielnixon Jul 03 '19 at 09:57

score 12 · Answer 4 · answered Sep 25 '12 at 16:05

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.

score 7 · Answer 5 · answered Feb 02 '10 at 22:35

7

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/

answered Feb 02 '10 at 22:35

Keith Adler

20,880
28
119
189

3

Also, set the div's cursor style to pointer so the whole thing gets the finger. – Michael Itzoe Feb 02 '10 at 22:37
The sample at the link shows that setting as well. – Keith Adler Feb 02 '10 at 22:42
https://www.w3.org/WAI/WCAG21/Techniques/failures/F59 – danielnixon Jul 03 '19 at 09:57

score 4 · Answer 6 · edited Oct 26 '12 at 13:11

4

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.

edited Oct 26 '12 at 13:11

Eonasdan

7,563
8
55
82

answered Oct 26 '12 at 12:50

cfg

954
7
6

1

This is valid HTML5 DOCTYPE only ... Wont validate if you're using HTML4 or XHTML – Ahmad Alfy Oct 26 '12 at 14:25
You need to make the anchor a block for this to work. – davidcondrey Feb 12 '14 at 17:20

score 1 · Answer 7 · answered Feb 02 '10 at 22:36

1

alternative would be javascript and forwarding via the onclick event

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

answered Feb 02 '10 at 22:36

tDo

528
3
5

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? – Teddyk Feb 02 '10 at 22:41
onclick actually does not make it a link but just clickable. You could use the css cursor attribute to change it likewise. – tDo Feb 03 '10 at 01:39
https://www.w3.org/WAI/WCAG21/Techniques/failures/F59 – danielnixon Jul 03 '19 at 09:58

HTML - how to make an entire DIV a hyperlink?

7 Answers7

Linked

Related