Question

How do I rewrite this HTML to validate to XHTML 1.0 Strict?

<div>
    <a href="link.html">
        <p>Some text</p>
        <ul>
            <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        </ul>
    </a>
</div>

My intent is to have the entire div serve as a clickable link. The content within simply describes the contents of the destination page. W3 Validator says I can’t have a block element (<p>) inside a span tag (<a>).

How do I rearrange this so that my DIVs remain block links?

Answer 1

You’re not allowed to wrap a block level element in an inline level element so you have a few alternatives.

• You can wrap every line that you want linked in the <a href="link.html">...</a>

  <div>
      <p><a href="link.html">Some text</a></p>
      <ul>
          <li><a href="link.html">Item 1</a></li>
          <li><a href="link.html">Item 2</a></li>
          <li><a href="link.html">Item 3</a></li>
      </ul>
  </div>​  
  

• You can add a javascript onclick function to reproduce the same results.

   //jQuery
   ​$('div').click(function() {
       window.location = 'link.html';
   });​​​​​​
  
   //Non jQuery
   document.getElementById('yourDiv').onclick = function() {
       window.location = 'link.html';
   }
  

  • If you use the Javascript, make sure you use CSS to make it apparent that the contents are links. I’d recommend pseudo classes

    div {
        text-decoration: underline;
        color: #0000FF;//or whatever your link color is
    }
    div li:hover, p:hover {
        color: #CC00FF;
        cursor: pointer;
    }
    

    ​