Well this is pretty basic but in my eyes still worth noticing: so let’s assume you want to set a link on whatever content consisting out of more than just plain text.
What you probably did was to wrap your <a> </a> tag all around the markup you wanted to link.

And what’s even bad about it?

The main point is that you’re not able to set a proper anchor text on your link, which is a bad decision when it comes to accessibility and searchability of your content.

So here’s another way to solve it:

Example Markup:

        <div class="linked-area">
          <h1>Lorem Ipsum</h1>
          <p>dolor sit amet</p>
          <img src="http://placehold.it/200">
          <a href="http://google.com">example anchor text</a>

As you can see it’s just a regular link including an anchor text, the only thing clickable so far is the <a> tag.

Let’s change this using css:

  .linked-area {
    position: relative;

  .linked-area a {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    //hiding text
    text-indent: -999999px;
    overflow: hidden;
    text-align: left;

You need to position your container <div> relative to limit your absolute positioned <a> tag within it’s boundaries.
That being sad: you have to stretch your <a> tag to the full size of it’s containing element by giving the top, bottom, left and right attributes a value of 0.
The anchor text is hidden via text-indent and overflow: hidden, if you are using compass you can just use the hide-text mixin, and that’s it.
Now the whole <div> is a clickable link.
And the result will look like this:

Want to play around with it? I made you a codepen.

Have fun linking your areas.