Link in Header? Or Header in Link?

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.