Is it OK to use div tag as a link?

**lampcms.com** · Jul 17, 2009 08:42

Is it OK to turn div into a link?

I mean, something like this:
<a href="/index.php?a=addblogpost&editflag=1&mid=872"><div class="icn edit"> </div></a>

Here I have a div that will have a nice 'edit' icon using the external css (background-image)

So Is it OK to just ue the div as a content of the link instead of a more traditional way of using img tag as a link?

**AutisticCuckoo** · Jul 17, 2009 09:50

No, it's not okay. It's utterly invalid and you never know how browsers may interpret it.

An inline-level anchor element cannot have a block-level division as a child element.

You can use a <span>, though, which is the inline equivalent of a <div>. The span should contain the text, e.g., 'edit'. Then you can set a background image for the <a> element and hide the span off-screen. This will make you link accessible even for text browsers, dial-up users, screen reader users, and others who cannot perceive images.

**kofkof** · Jul 17, 2009 10:57

Just for Sharedlog's info: it will be valid in HTML5.

**cooper.semantics** · Jul 17, 2009 12:09

@Sharedlog.com

Here is a valid option:
Tommy was referring to something like this...

Code CSS:

div {
	position: relative;
	width: 200px;
	height: 100px;
	border: 1px solid blue;
}
	div a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100&#37;;
		height: 100%;
		background: url(" ");
		text-indent: -9999px;
	}

Code HTML4Strict:

<div>
	<h2>heading</h2>
	<p>content... <a href="#">.....</a></p>
</div>

@kofkof
A lot of questionable things are valid in HTML5

**lampcms.com** · Jul 17, 2009 12:22

Originally Posted by cooper.semantics

@Sharedlog.com

Here is a valid option:
Tommy was referring to something like this...

Code CSS:

div {
	position: relative;
	width: 200px;
	height: 100px;
	border: 1px solid blue;
}
	div a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(" ");
		text-indent: -9999px;
	}

Code HTML4Strict:

<div>
	<h2>heading</h2>
	<p>content... <a href="#">.....</a></p>
</div>

@kofkof
A lot of questionable things are valid in HTML5

This look cool. I'll try it.

**kofkof** · Jul 17, 2009 13:02

A lot of questionable things are valid in HTML5

I couldn't agree more, trust me on this... Nonetheless, since it's the orientation HTML is taking now, I think it's just fair to let Sharedlog know that things are changing and that in a couple of years, this line of code will (most probably) be considered completely valid.