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.
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:
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:
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>
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.