design@brightcherry.co.uk
Call us on   01279- 729075

From what I’m aware, you can’t make a div into a clickable link with just HTML. The only way I’ve ever known is by using Javascript.

Open in new window

Here’s how to make a div into a clickable link that will open the target URL into a new window.

1
2
3
4
 
<div onclick="window.open('http://www.brightcherry.co.uk/');">
 
</div>

Open in same window

Here’s how to make a div into a clickable link that will open the target URL into the same window.

1
2
3
4
 
<div onclick="window.location = 'http://www.brightcherry.co.uk/';">
 
</div>

Notes

The links CAN be relative to the domain, they don’t just work with full URLs. You can use URLs like “/dir/index.html”

This blog post was written on 30 Mar 2011 by Maruf, and has 2 Comments so far

  1. 20/05/2011

    to make a div clickable. put an a tag inside it and display it as a block element and give it the same width and height as the div I do it all the time.

  2. 17/06/2011

    Just a usability tweak to this… add style=”cursor:pointer;”. This way when you hover over it the user realises it’s a link.

    Personally I also add a link into the div for the user to click on should there be no Javascript support, that’s me being paranoid though.

    Javascript was my only solution to make the div a link as I have block elements in there (headers), and you can’t wrap a block element in a link.

Learning & sharing

This is where we store some of our Web Development thoughts, tips and tricks for both our own uses and for others to learn from. Sharing is caring.

Please feel free to contrinute to our blog posts; perhaps even teach us a few tricks of your own. We'd love to hear your thoughts.

Social

Feel free to share this blog post and/or subscribe to our RSS feed :)