block-level elements inside inline elements

When I'd really like to!

[simplesis]

Most people know that it's invalid to place a block-level element like h3 inside an inline element like <a>.
Here's a dilemma I run into a lot, though: I'd really like to. I like to make links as clickable as possible on my designs, and sometimes that means I want to make a big, fancy button that happens to be a very important part of the page, so obviously I want to put a header tag in there somehow to be semantically correct.

Here's an example:

<div id="bigbutton">
<a href="#">
<h3>The important, latest thing!</h3>
<img src="latest.jpg" />
</a>
</div>

But as I mentioned, this is not valid HTML... yet I just love having that entire area clickable.

Are there any useful tricks that anyone here could offer me to accomplish this while making my code valid?

The three possibilites I've explored are:

Making the h3 structurally above/before the anchor tag in the HTML and using CSS to create a negative margin on the anchor, so the h3 *appears* within the anchor, but is not. The huge problem with this is that everything will be clickable -except- for the h3, as all it's doing is floating there. Very annoying and not desirable.

Another possibility is using some javascript trickery to trigger the hover and cursor-change when you're not really over the true anchor. The problem with this is that the context options I'd have on a "true" link are gone, such as "open in new window/tab", except on the part of the link that is truly the anchor.

The third and most desirable (but not very) possibility I can think of is this: make the bit of text I want to display an image and place it inside the anchor. Above and out of the anchor will be the h3 tag, which I will hide with display: none in CSS, so its hidden from those with a normal browser, and looks semantically OK to someone in a text browser if I use the right alt tag on the image. Like this:

<div id="bigbutton">
<h3 class="hidden">The important, latest thing!</h3>
<a href="#">
<img src="latest.jpg" alt="The Thing" />
</a>
</div>

If anyone has something better to offer, I'd love to hear about it.

Thanks!
-Brent

[encyclo]

Welcome to WebmasterWorld simplesis!

Certainly expanding the clickable area is usually desireable, and it is usually possible without resorting to JS tricks or invalid code.

There are a few possibilities, dependent on your specific needs. The first would be to place the anchor within the

h3

element (thus valid HTML) and use

display:block;

to expand the space:

<h3 id="bigbutton"><a href="#">The important, latest thing!</a></h3>

Then you can use your image as the background and fix the height and width:

h3#bigbutton a {
display:block;
width:634px;
height:130px;
background:#fff url(latest.jpg) no-repeat top left;
}

You may need/want to remove the text in the

h3

with your preferred image-replacement technique (text-indent etc.).

[simplesis]

encyclo: thanks for the reply. That's something obvious that I overlooked, for sure. That simple method can be workable in a lot of cases.

However, it raises the fact that I probably should have been a bit more specific with my example... I not only run into this when I'm making "big buttons" for one particular thing that will probably only require a single phrase.

Imagine the front page to a website with short excerpts to several of its latest articles. When you see one you like, wouldn't it be nice to be able to click on the entire area of the excerpt (while receiving some pleasant :hover feedback), rather than the little "read more..." blurb that's often used?

In that case we cannot nest everything within h3.

<div id="bigbutton"> 
<a href="#"> 
<h3>The important, latest thing!</h3>
<h4>Jan 7, 9:20 PM</h4>
<p>Today a very important thing was released!</p>
<img style="float:right" src="latest.jpg" /> 
</a> 
</div> 

Looking at something like this in a text browser presents an obvious problem, though. Our entire excerpt is underlined! Ugly! Not to mention unreadable.

Is there just no good method to getting around this?