How do I rewrite this HTML to validate to XHTML 1.0 Strict?
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>
开发者_StackOverflow <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?
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
onclickfunction 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; }
You can't rearrange it to make the block a link. What you could do is to make every single element in the block a link, or you can use javascript.
<div style="cursor:pointer" onclick="location.href='link.html'">
<!-- ... -->
</div>
As is, your fragment is valid HTML5. Use that instead and your problem vanishes. All you have to do is change the doctype to <!doctype html>.
Your <UL> is also a block element, so it won't work there either. How 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>
加载中,请稍侯......
精彩评论