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?

开发者 https://www.devze.com 2023-01-15 07:33 出处：网络

How do I rewrite this HTML to validate to XHTML 1.0 Strict? <div> <a href=\"link.html\"> <p>Some text</p>

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 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;
}

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>