Using block elements as links.

[SRD]

I've had a bit of a search around and have found the thread regarding the W3c standards on not using inline elements (e.g. <a>) around block elements (e.g. <h2>, <p>) but it doesn't explain how one can get round the problem of not being 'allowed' to use a block element as a link.
I have the following HTML code:

<div id="how">
<a href="how.html">
<h2>Heading</h2>
<p>content</p>
</a>
</div>

with the following css to style the 'box' created.

#how {
width: 750px;
border: 8px double blue;
margin: 10px auto;
padding-bottom: 10px;
}
#how p {
padding: 0 10px;
line-height: 1.2em;
}

This won't validate due to the <h2> and <p> tags being inside the <a> tag.

Any thoughts as to how I can 'legally' achieve using the whole box as a link?

A thought strikes me - should I be looking at the <button> tag?

[Raffles]

This is a tricky one. You can either take the JavaScript route (by making the h2 and p "clickable" and look like links - Gmail does this sort of thing extensively) or you can replace the H2 and P elements with SPANS that are given block display. The downside to the latter method is that it is less semantic.

One other solution is to have something like this:

<div>
  <h2>heading</h2>
  <p>content. <a href="how.html"><span>Plus a link to how.html</span></a></p>
</div>

div {
  position:relative;
  height:3em;
}
a {
  position:absolute;
  height:3em;
  width:100%;
  top:0;
  left:0;
}
a span {display:none}

You have your nice semantic content and then simply overlay a transparent anchor over it to make it all "clickable". This can cause issues in IE6, but there's a way to fix it (see solution to CSS Quiz no. 16, quiz B).
A drawback is that it doesn't allow the text in the P or H2 to be selectable and that it may pllace constraints on styling, particularly cross-browser.

Using the BUTTON element would be non-semantic and could cause other problems, so not a good idea.

[cooper.semantics]

div {
	position: relative;
	width: 200px;
	height: 100px;
}
	div a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-indent: -9999px;
	}

<div>
  <h2>heading</h2>
  <p>content. <a href="how.html">Plus a link to how.html</a></p>
</div>

[SRD]

Thank you both.

A query to cooper.semantics: Why the text indent?

And how do either solution work with screen readers? Ok, I know, go play and find out. But not needing a screenreader myself, although I always run my sites through Thunder, I find it difficult to understand how those with sight problems actually use them.

[Erik J]

If you add an empty or non existent background-image represented by a space or a fake.gif you make IE paint the area transparent and then also hover over the div's text content:

div {
    position: relative;
    width: 200px;
    height: 100px;
}
    div a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-indent: -9999px;
        background:url(' ');  /* space empty ' ' or 'fake.gif' */
    }

[SRD]

If you add an empty or non existent background-image represented by a space or a fake.gif you make IE paint the area transparent and then also hover over the div's text content:

div {
    position: relative;
    width: 200px;
    height: 100px;
}
    div a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-indent: -9999px;
        background:url(' ');  /* space empty ' ' or 'fake.gif' */
    }

Thanks, I had just been wondering about using a transparent image as the link. It could be coded outside of the block elements (<h2> & <p>) but within the containing <div> and fixed and sized within the <div> using absolute positioning. The title style can be used for screen-readers. Any thoughts anyone?

I don't know if the following is for here or the CSS forum;
If one sets height and width to inline elements is one not making them block elements? And is that 'allowed' by the W3c validation service?

[AutisticCuckoo]

If one sets height and width to inline elements is one not making them block elements? And is that 'allowed' by the W3c validation service?

Height and width of inline boxes are ignored, but if you change the generated box type to a block-level box you can set the dimensions of elements that are semantically inline, e.g.,

a {display:block; width:10em}

Some other properties will automatically convert the generated box type to block-level, e.g., float other than none, and position with the values absolute or fixed.

It's 'allowed' to set those properties anyway, but it won't make any difference. It's like saying that snakes should have blue legs.

[cooper.semantics]

Thank you both.

A query to cooper.semantics: Why the text indent?

And how do either solution work with screen readers? Ok, I know, go play and find out. But not needing a screenreader myself, although I always run my sites through Thunder, I find it difficult to understand how those with sight problems actually use them.

Using text-indent is screen reader friendly.

[cooper.semantics]

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript">
	$(function() {
		$("div a").hover(
			function() { $(this).parent().parent().addClass("parent"); },
			function() { $("div").removeClass("parent"); }
		);
	});
</script>

<div>
	<h2>heading</h2>
	<p>content. <a href="how.html">Plus a link to how.html</a></p>
</div>