Geek Answers Handbook

How to rewrite this HTML for validation on XHTML 1.0 Strict?

How to rewrite this HTML for validation on 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 intention is for the whole div to serve as an interactive link. The content inside simply describes the contents of the landing page. The W3 Validator says that I cannot have a block element ( <p> ) inside the span tag ( <a> ).

How do I change this so that my DIVs remain block references?

+4
source share
4 answers

You are not allowed to wrap around a block level element in an inline level element, so you have several alternatives.

  • You can wrap each line that you want to link in <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 onclick javascript function to play 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 Javascript, make sure you use CSS to make it obvious that the content is a link. I would recommend a pseudo-class

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

+3
source

You cannot rebuild it to make a block a link. What you can do is make each individual element in the block a link or use javascript.

 <div style="cursor:pointer" onclick="location.href='link.html'"> <!-- ... --> </div>
+1
source

As is, your snippet is valid HTML5. Use this instead and your problem will go away. All you have to do is change the doctype to <!doctype html> .

+1
source

Your <UL> is also a block element, so it will not work either. What about:

 <div onclick="location.href = 'link.html'"> <p>Some text</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>
0
source

More articles:


All Articles