title: How to add an anchor tag <a> to a block of html?
body: <p>I have a block of html that I want to act as a clickable link. In the block of code below, I would like to make the whole div into a link.</p>
  
  <pre><code>&lt;div id="clickableLink"&gt;
      &lt;h3&gt;Link Heading&lt;/h3&gt;
      &lt;img src="linkPic.jpg" alt="Link alt text" width="65" height="65" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>HTML5 permits surrounding the html in an anchor tag (I think). See below</p>
  
  <pre><code>&lt;a href="goThere.html"&gt;
      &lt;div id="clickableLink"&gt;
          &lt;h3&gt;Link Heading&lt;/h3&gt;
          &lt;img src="linkPic.jpg" alt="Link alt text" width="65" height="65" /&gt;
      &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>However, this seems wrong to me. How will software such as screen readers describe the link.</p>
  
  <p>I also considered the following CSS trick. I altered the HTML to be</p>
  
  <pre><code>&lt;div id="clickableLink"&gt;
      &lt;h3&gt;Link Heading&lt;/h3&gt;
      &lt;img src="linkPic.jpg" alt="Link alt text" width="65" height="65" /&gt;
      &lt;a href="goThere.html"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and then used CSS to style the link to cover the whole of the div. See below:</p>
  
  <pre><code>#clickableLink {
      position: relative;
      width: 100px;
      height: 200px;
      z-index: 0;
  }
  
  h3 {
      z-index: 0;
  }
  
  img {
      z-index: 0;
  }
  
  a {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 200px;
      z-index: 1;
  }
  </code></pre>
  
  <p>This works perfectly in all browsers apart from IE. Does anyone else have any suggestions?</p>