Home > Web Design | Web Development > Link in Header? Or Header in Link?

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>

Header in link:

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

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>

Accessibility concerns

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


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

Still, worth thinking about.

Link in Header? Or Header in Link? is a post from CSS-Tricks

Visit Us On TwitterVisit Us On FacebookVisit Us On Google PlusVisit Us On Linkedin