Making Text In A Linked Div Selectable

I am creating a web page and have a section that I want to be linked, inside this section though I have some text that I want to allow the user to copy and paste from (i.e they nee

Solution 1:

a-Elements don't allow block-elements inside of them. So you cannot structure your layout that way. What about only making the heading a link? That would be fine and you could easily select the other text:

<divclass="container"><h2><ahref="http://example.com">Heading</a></h2><p>Text that can be highlighted here</p><p>Other Text</p></div>

In order to make the whole container clickable, you can apply a Javascript Event Listener to all containers. If you are already using jQuery, this can be done very easily:

$('.container').each(function(){
    $(this).on('click', function(){
        location.href = $(this).find('a').attr('href');
    });
}).addClass('link');

The difference from this to a "real" link is that it won't be draggable and instead selectable. Anyway you can click on it and it will locate you to where you want to go. It will also apply a class .link which you can use in your stylesheet in order to set a pointer as the cursor.

For people who have javascript disabled there will still be a link in the heading, so your page stays usable in every case.