Question

I want to make it so that a whole div is clickable and links to another page when clicked without JavaScript and with valid code/markup.

If I have this which is what I want the result to do –

<a href="#">
<div>This is a link</div>
</a>

The W3C validator says that block elements shouldn’t be placed inside an inline element. Is there a better way to do this?

Answer 1

a whole div links to another page when clicked without javascript and
with valid code, is this possible?

Pedantic answer: No.

As you’ve already put on another comment, it’s invalid to nest a div inside an a tag.

However, there’s nothing preventing you from making your a tag behave very similarly to a div, with the exception that you cannot nest other block tags inside it. If it suits your markup, set display:block on your a tag and size / float it however you like.

If you renege on your question’s premise that you need to avoid javascript, as others have pointed our you can use the onClick event handler. jQuery is a popular choice for making this easy and maintainable.

Update:

In HTML5, placing a <div> inside an <a> is valid.

See http://dev.w3.org/html5/markup/a.html#a-changes (thanks Damien)