Link in Header? Or Header in Link?

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

Eric Range wrote in with this blog post idea. Is it better to wrap a header tag in an anchor link, or the other way around? Assuming HTML5, both of these are completely valid.

Link in header:

<h1>
  <a href="#">
    Ten Ways to Have Yourself a Merry Little Christmas
  </a>
</h1>

Header in link:

<a href="#">
  <h1>
    Ten Ways to Have Yourself a Merry Little Christmas
  </h1>
</a>

So which one do you go for? I’d say it depends.

Clickable area

By default, the anchor tag is an inline element and the header is a block. So without altering that with CSS, the clickable area for h1 > a is the light red area here:

Versus the a > h1 approach where the block level header becomes entirely clickable.

CSS could easily make the link in the top example block-level too, but this would be the normal default.

You might think “More clickable area! That’s good!”, which is legit, but it does affect this:

Text selection friendliness

How big of a deal this is, I’ll let you decide. But I’m a “from the bottom right” selector and I always kinda hate block level links for this reason:

Layout weirdness

You can just watch for this and make sure you account for it in CSS, but there is a weird gotcha if you take the a > h1 approach where padding on the link would cause a situation like this:

Two headers, one link

If you ever needed a title-and-subtitle that is linked (and you didn’t want to subtitle with child span or something), the wrapping anchor might be nice.

<a href="#">
  <h1>Cheese is favorite holiday gift</h1>
  <p class="subtitle">From a one-person survey held in central Wisconsin</p>
</a>

Accessibility concerns

I’m not sure, I’m afraid. Are there any?

Winner?

I tend to like h1 > a and an informal poll shows that the vast majority of folks do too.

Still, worth thinking about.