Valid Html: Ul, P, Div Inside 'a' Element

August 30, 2023 Post a Comment

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 h

Solution 1:

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

Solution 2:

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

<divid="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>

Solution 3:

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

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

Solution 4:

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:

<ahref=”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 htmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/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! :)

Solution 5:

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>

Html5 School