Wrap link around

Answer 1

Timothy's solution is correct ... instead of wrapping an anchor around a div ... you simply give layout to the anchor element with display:block and add the size and width of the anchor ...

.div_class   { width: 100px; height: 100px; }
.div_class a { width: 100px; height: 100px; display: block; }

<div class='div_class'><a href="#"></a></div> 

Answer 2

I had tried to create custom solution using jQuery, which would imitate same behavior as a tag does, for parent DIV.

DEMO: https://jsfiddle.net/kutec/m9vxhcke/

As per W3C standard, you cannot do this:

<div class="boxes">
    <a href="http://link1.com" target="_blank">
        <div class="box">
            <h3>Link with _blank attr</h3>
        </div>
    </a>
</div>

You must follow this:

<div class="boxes">
    <div class="box">
        <h3>
            <a href="http://link1.com" target="_blank">Link with _blank attr</a>
        </h3>
    </div>
</div>

But by following above code, you wouldn't get the whole DIV clickable :).

Correct structure should be something like this, which also allows you to click over the DIV to redirect on the given href value:

<div class="boxes" data-href="http://link1.com" data-target="_blank">
    <div class="box">
        <h3>
            <a href="http://link1.com" target="_blank">Link with _blank attr</a>
        </h3>
    </div>
</div>

Simple Solution:

$(function() {  
    $('.boxes a').each(function(){
        var aTag = $(this).attr('href');

        $(this).parent().attr('data-href',aTag);        

        $("[data-href]").click(function() {
            window.location.href = $(this).attr("data-href");
            return false;
        });
    })  
}(jQuery));

Dynamic Solution:

(function ( $ ) { 
    $.fn.dataURL = function() {

        // variables
        var el = $(this);
        var aTag = el.find('a');
        var aHref;
        var aTarget;

        // get & set attributes
        aTag.each(function() {
            var aHref = $(this).attr('href');
            $(this).parent().attr('data-href',this);

            aTarget = $(this).attr('target');
            $(this).parent().attr('data-target',aTarget);
        });

        // imitation - default attributes' behavior on "data-" attributes
        $(el).delegate('[data-href]','click', function() {
            var loc = window.location.href;
            loc = $(this).attr("data-href");
            aTarget = $(this).attr('data-target');

            if(aTarget == "_blank"){
                window.open(loc);
            } else {
                window.location = loc;
            }

            return false;
        });     

        //removing attributes from selector itself
        el.removeAttr('data-href');
        el.removeAttr('data-target');

        // css
        $('[data-href]').css('cursor','pointer');
    };
}( jQuery ));

Final call:

<script>
    $('.boxes').dataURL();
</script>

Hope this would be helpful :)