hyperlinking a div

[whatson]

I hyperlink divs by:

<a href="#"><div id="link"></div></a>

But I dont think this is W3 compliant. Especially when you start adding elements in the div.
Is this the done way?

[g1smd]

Nasty. Don't do it.

You've been around for a decade, surely you know all about block and inline elements?

[SevenCubed]

In your stylesheet:
#link{height:333px;width:777px;}
.linkwholediv a{display:block;height:100%;width:100%;}

In your html:
<div id="link" class="linkwholediv"><a href="http://www.example.com/">Div Link Test</a></div>

Of course you will be limited to one link per div.

[whatson]

What about span?
e.g. is <a href="#"><span>link text</span></a> acceptable?

[lucy24]

What's the span for? If you need styling, you can attach it directly to the "a" element.

Putting a whole div-- or any block-level element, or even whole layers of them-- inside a link will unfortunately work in most browsers. I say unfortunately because it's baaaad and you should never do it.

I was recently in a situation where it would have been oh so much easier to wrap the link around a div, which in turn contained both an image and a paragraph. And I knew it would work, at least with the intended audience. But I couldn't bring myself to do it. Stuck between a rock and a hard place, I went with js "onclick" instead :(

[whatson]

The span would be so I can have part of the link a different size or color for example.
<a href="#">Link Text<span>Larger Text</span></a>

So JS might make things easier, so u just select the elementbyid onclick.

[SevenCubed]

I say unfortunately because it's baaaad and you should never do it.

I've been thinking it over and can't come up with any real good reason why it would be baaaaad. I haven't used it myself because I have never had a need for it but I wouldn't hesitate if I saw a valid purpose.

I just see it as cutting a hole in the end of a shoebox (the div) and pushing an uninflated balloon (linkwholediv class) into that hole and inflating it to fill the volume of the div.

Please help me understand why that's a bad thing. Why did you decide to not apply something like that when you needed it and went with javascript instead?

[lucy24]

Why did you decide to not apply something like that

I don't see how it would have helped. There's nothing wrong with having a link inside a div; the no-no is putting further block-level elements inside a link. The overall structure in my case would have been

<div style blahblah, including "text-align: right">
<a href = "link here">
<div style more blahblah, including "display: inline-block; text-align: center;">
<p style blahblah>Text here</p>
<p style blahblah><img src et cetera></p>
</div>
</a>
</div>

To make sure I wasn't remembering wrong, I fed the snippet into the w3 validator using the "HTML fragment" option. It was perfectly happy with the "onlick" version. (It was attached to the inner div, which is a visible unit.) But when I tried the "a href" version, it predictably spat out an error, with explanation

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Again: doing it wrong would have worked. But you can't get in the habit of doing things you aren't supposed to do, just because they happen to work.

[SevenCubed]

Hmmmmmm well the example I offered above ( <div id="link" class="linkwholediv"><a href="http://www.example.com/">Div Link Test</a></div> ) did validate -- I ran it through the validator before pasting it into this thread. So I still don't understand how it's doing anything wrong (but maybe it's just me). For example I might consider using it if I have a div that only contains a single image. Maybe that div would be padded to keep it spaced away from another such div next to it. That way the clickable area is not limited to the image itself but also the area around the image which is within the div. I didn't actually just try this -- just trying to think of a use.

[lucy24]

I think you're missing the point :( The original post said:

<a href="#"><div id="link"></div></a>

But I dont think this is W3 compliant. Especially when you start adding elements in the div.

Your example has the link INSIDE the div. We're talking about links OUTSIDE a div. Or outside any other block-level element. An image alone is not block-level, so it has no effect on validation.

[drhowarddrfine]

Putting a link around almost any element is now valid and will pass the validator. There are still a few where it's not but div is just find, as are spans.
[developers.whatwg.org...]

[whatson]

hmm confusion.
So it is not W3c compliant - but it is actually fine to use, and is compatible with almost all browsers, not to mention it allows you great flexibility on linking desired areas.

Is that the summary?

[lucy24]

Putting a link around almost any element is now valid and will pass the validator.

We now descend to "Who am I gonna believe: you or my lyin' eyes?" Don't know about the rest of youse, but when I say "the validator" I mean

[validator.w3.org...]

A snippet with divs inside an <a href> validates as neither HTML 4.01 nor XHTML 1.0 (the two available options in "HTML fragment" mode). It does validate in HTML 5 if you wrap it in the appropriate tags to make a complete document-- but 5 isn't simply a looser version of 4. It's got a whole different set of rules. And it's clearly labeled "tentative" and "experimental".

[SevenCubed]

Your example has the link INSIDE the div. We're talking about links OUTSIDE a div.

Yes I was aware of that. I know the OP was the reverse but I simply gave a solution that turned it inside out, worked, and validated via the W3C Validator.

[drhowarddrfine]

@lucy24 - See my link above which is also copied on the W3C site. The current validator passes this when using the html5 doctype. All current browsers will also work this way. It puts all browsers into standards mode.

[lucy24]

when using the html5 doctype

Well, that's the issue isn't it? And I did say at the beginning that it works even if it doesn't validate :)

[drhowarddrfine]

I don't know that it's an issue with anyone. It does validate with that doctype.

[SevenCubed]

Who's on first, not me I'm on second, who's that on third, don't know I'm on first, is that you on third, I don't know whatson first?

[benihana]

how about...

HTML:

<div class="foo">
<p>Content...</p>
<p>Content...</p>
<a href="#">link</a>
</div>

CSS:

div.foo {
position:relative;
width:100px;
height:100px;
}
div.foo a {
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
z-index:199;
}