Link Boxes

I was looking over the shoulder of another designer who wanted a box with a headline and copy, and wanted the entire thing to be clickable. Here are some thoughts on marking this up.

As a brief aside, I started looking for this effect on other web sites so I can see how others mark it up, but wouldn’t you know it, I couldn’t find any examples. (Never there when you need them…) If you know of any, leave a comment with a link so we can peak under the hood. I’m confident there is a better way, or at least some solid alternatives out there, to achieve this effect – let me know what they are.

The Idea

A box contains a headline and some copy, and we want the entire box to act as a link to another page. Let’s pretend for now it’s an “About Us” type of box that we want to look like this:

Forgetting about the link for now, here’s some code that would make sense to start with.

<h2>About Us</h2>
<p>How my life story became a Hallmark movie.</p>

I realize that perhaps using <dt> and <dd> could establish more a relationship between the headline and copy, but I’m not sure how I would achieve the end result that way, so stick with me.

To get the box effect, and link effect, a temptation is to do this:

<a href="#">
  <h2>About Us</h2>
  <p>How my life story became a Hallmark movie.</p>

but that’s a no-no. <a> is an inline element, and block-level elements (like <h2> and <p>) cannot be nested inside inline elements.

However, inline elements can be nested within other inline elements, so one way to work around the validation hurdle is to use <span> tags within the encompassing <a>, like so:

<a href="#">
  <span class="h2">About Us</span>
  <span class="paragraph">How my life story became a Hallmark movie.</span>

Then the span elements could be styled as display:block; and be presented like one would want them to be.

This could work. If styles are turned off, the spans may all run together, but that could be easily fixed with a <br /> following the first <span>. Still, it doesn’t really seem like an ideal way to mark this up.

I am guilty of using spanitis to achieve this kind of thing, and that’s partly why I’m doing this post – to find a good way out of it. I want to keep some semantic meaning with my tags, not just with my classes. I want to keep the <h2> and the <p> because they mean more than <span>, but how do I get the clickable encompassing box? For that, I’m guessing I need more than what can currently be provided by HTML tags. I need DOM Scripting.

A DOM Scripting approach

I envisioned wrapping the headline and paragraph in a <div>, and attach the link to the <div>’s onclick event using JavaScript. Also, if JavaScript is off, we should still provide a link, so I ended up with this:

<div class="linkbox">
  <h2>About Us</h2>
  <p>How my life story became a Hallmark movie.</p>
  <p class="readmore"><a href="#">Read more...</a></p>

Before writing the JavaScript, it sometimes helps to put the desired behavior in plain English.

  1. When the page laods, the find all <div> tags with a class of “linkbox”.
  2. Within a linkbox div, find the “readmore” paragraph, which should contain an anchor link.
  3. Take the href attribute’s value of the anchor link, and attach it to the encompassing div’s onclick event.
  4. Since the “readmore” paragraph is no longer needed, hide it.
  5. To give an indication that the <div> is clickable, add a hover effect by adding and removing a hover class to the <div> based on mouse placement.

To help achieve all this, I borrowed functions from Robert Nyman’s EJ – The only JavaScript library you’ll ever need, which contains some homegrown scripting for getting elements by their class name, adding a class name, and removing a class name.

Working Example

Showing you the code in this post would be pointless. Instead, go to the working example, where you can view source and modify to your pleasure. Note that instead of using <div>, I used an unordered list to organize the page differently. Turn off CSS, JavaScript, or both, and all needed elements should still be present.

This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.

Thanks for the link.
Veerle is using all inline elements, including <em> tags, wth <br /> tags to break them up.
<a href=””>Headline<br />
<em>copy copy copy</em><br />
<span>date posted</span>
Now that I think about it, using <strong> to emulate headlines makes sense, too.

Kate Bolin said:
Couldn’t you just use
<a href=”#”>
Text text text
It just seems to me to be a bit over the top to use all that javascript…