Enquiry Email Form

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”

  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 contribute to our blog posts; perhaps even teach us a few tricks of your own. We'd love to hear your thoughts.



X