ansaurus

Question

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

Answer 1

+3 A:

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

Robert 2010-09-10 00:45:28

You should mention that this solution depends on jQuery.

jigfox 2010-09-10 00:47:23

@jigfox Makes sense, updated.

Robert 2010-09-10 00:51:38

Hi Robert! If I use the jQuery function, where do I put it? The page in question has anywhere from 5 to 30 of these div blocks, each going to a different page.

Andrew Heath 2010-09-10 01:04:26

I'd wrap it in a `$(document).ready(function() {...here...});` Be sure to change the `div` selector to something relevant.

Robert 2010-09-10 01:07:29

Answer 2

+1 A:

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>

jigfox 2010-09-10 00:46:31

I'd usually discourage the use of `onclick` as an attribute, but I approve of your use of `cursor:pointer` which has been neglected in the other posts. +1

LeguRi 2010-09-10 01:03:40

@LeguRi, I agree with you, normally I don't use it too, but I wanted to present a quick and short solution. And Robert already presented the better solution.

jigfox 2010-09-10 08:34:31

Answer 3

A:

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>

gilly3 2010-09-10 00:52:36

Answer 4

+1 A:

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>.

Zack 2010-09-10 01:07:40

Really!? Do you have any links to cite? Did they ditch the whole "block-level versus inline level" thing in HTML5?

LeguRi 2010-09-10 11:31:22

Yup. See http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html -- particularly the description of "flow content", which seems to have subsumed both categories; also, at http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element the `<a>` element is specifically allowed to contain "any flow content" but to still be treated as "phrasing content" if its contents are entirely "phrasing content".

Zack 2010-09-10 16:23:18

Also, http://validator.nu/ is an HTML5 validator. I determined my original answer by pasting the OP's fragment into the skeleton document it gives you. No errors.

Zack 2010-09-10 16:24:43

ansaurus

tags:

views:

answers:

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

related questions