javascript - Valid HTML: ul, p, div inside 'a' element

I have a div where if you click anywhere on the div it opens another webpage. So essentially the whole div is a giant hyperlink. Because of this, I have a div, then inside that I have an a element then inside that I have all the elements of the div(so some ul, some p etc.).

My Problem: When I try to validate my HTML in the w3 Markup validator, I get errors because I have an ul, p, etc. inside of an a element.

Actual Error:

document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

How can I make my HTML valid & still keep my div as one big link?

<div id="rentalAnnc">
    <a class="sidebarLink" href="facilitiesForHire.html">
        <p>KAZCARE has a range of Education Facilities available for Lease &amp; Hire at its Bowral location.</p>
        <!--<p>Click here for more information.</p>-->
    </a>
</div>

My Problem: When I try to validate my HTML in the w3 Markup validator, I get errors because I have an ul, p, etc. inside of an a element.

Actual Error:

document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

How can I make my HTML valid & still keep my div as one big link?

<div id="rentalAnnc">
    <a class="sidebarLink" href="facilitiesForHire.html">
        <p>KAZCARE has a range of Education Facilities available for Lease &amp; Hire at its Bowral location.</p>
        <!--<p>Click here for more information.</p>-->
    </a>
</div>

Share asked Sep 21, 2011 at 5:51 Mitch 233 bronze badges

Add a ment |

5 Answers 5

Sorted by: Reset to default 3

You can only include block level content inside an anchor in HTML 5. You can't in any non-draft version. If you want it to conform* to a specification, switch to HTML 5.

Note that doing so causes problems.

* Let's not talk about the <ins> hack which lets you do it in a valid but non-conformant way as DTDs aren't expressive enough to forbid it but the text of the spec is

If possible add an onclick attribute to the div instead of using an a tag. E.g.:

<div id="rentalAnnc" onclick="window.location.href='facilitiesForHire.html'" style="cursor: pointer">
    <p>KAZCARE has a range of Education Facilities available for Lease &amp; Hire at its Bowral location.</p>
    <!--<p>Click here for more information.</p>-->
</div>

In anchors all you can have are other inline elements. Check out W3C documentation:

http://www.w3/TR/html401/struct/links.html#h-12.2

This kind of link can only be validated using HTML5, as “Quentin” says in his reply. To do this, change the definition of your document (the very first line of your HTML) to:

<!DOCTYPE html>

Doing this, your HTML will be now HTML5 (magic!), and block elements as [h1] and [p] will be allowed inside a href tags, sticking to standards:

<a href=”Destination.html”>
    <h3>Cool link</h3>
    <p>The coolest link in the world.</p>
</a>

There’s a problem with this, of course, because you would probably have a previous document definition like the the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">

Changing the doc type from “strict” to “Transitional” or HTML5 can make the browser to render the elements slightly different (specially if they are in quircks mode), so you should check again how the page is rendered with the new doctype.

I hate that HTML doesn’t allows to do this since HTML5, because if the semantic of your HTML needs to have a header and a parragraf as a link, the standard should allows you to do.

Anyway, take care of thinking in how this “block levels inside anchor” will affect accessibility, as very long content inside a link can be an issue for blind people using screen readers.

Now, provide a nice css styling for your anchor with block elements inside and enjoy it! :)

You can set display to block for <a> element and use it instead of <div>.

So if you have something like: <a href="#"><div style="width: 100px; height: 100px; background-image: url('xyz.png');"></div></a>

Use instead: <a href="#" style="display: block; width: 100px; height: 100px; background-image: url('xyz.png');"></a>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745074595a4609757.html