Convert Whole Div Which Contains Anchor Tags Into A Link

I want to convert the div into a link. Note that div includes an anchor tag. What is the best way to do it. Following code doesn't work. But that's the rough idea to my problem.

Solution 1:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).— W3C Documentation

The anchor element may not contain any interactive content. This includes other anchors. This is one of the more strict rules too. It not only goes against spec, but it completely breaks functionality in major browsers. Chrome alone parses your example to include four links!

You'll need a preprocessing language to alter the markup (server side language or javascript on the front end manipulating ajax return data), or you'll just have to manually change the HTML. Either way, in the end, you'll need to switch that inner anchor out with a span or some other non-interactive element.

Solution 2:

I have found a useful jsfiddle for you that uses <a class='default-link' href='javascript:void(0)' onclick='window.location = "http://www.google.com"'</a> for the actual <div>'s link, and then has independent links within this.

Click here to see the jsfiddle

Solution 3:

You can simply add display: block; and use the height you need it will do the trick !

DEMO

or you can use inline javascript as that

<divstyle="height: 100px; border: solid; border-width: 2px; border-color: #000; cursor: pointer;"onclick="window.location='/a'">
  Box 1
  <p><ahref="/a">A</a></p></div>

Solution 4:

The following code is worked for me. But I don't know it's a valid one even with HTML5.

<astyle="display:block"href="/a"><divstyle="border: solid; border-width: 1px; border-color: #FFF"><div><h3>Heading</h3></div><ahref="/b"target="_blank">B</a><ahref="/c"target="_blank">C</a></div></a>