2013-06-07

Links Inside Headings? Or Headings Inside Links?

You're marking up a website and you have a heading which is also a link, which element is nested in which? The link inside the heading? Or the other way around?

You may think this is a trivial question but it's the kind of thing I think about, and whilst it doesn't necessarily matter much in terms of standards anymore due to HTML5, I still feel it's something useful to think about (I can get quite particular about doing things the 'right' way).

<h1><a href="/">This is the company name</a></h1>

or

<a href="/"><h1>This is the company name</h1></a>

Either of the above is valid in HTML5, but in any versions of HTML prior to this, only the top version would be valid. This is due to block elements not being allowed inside inline elements, by default a heading is a block element and an anchor an inline element.

HTML5 adds in an exception to this rule in that it allows you to wrap block level elements inside anchor tags, so whilst either of the above would be correct, the below would still not validate in HTML5 as the block element container is an inline element that isn't an anchor tag:

<span><p>Lorem ipsum dolor sit amet</p></span>

And that's all there is to it!

Linkedin Stackoverflow GitHub

About Me

I'm a web developer (mostly Front end) currently working at Studio 24 (I previously worked for an Essex based company called Intelligent Penguin).

I spend a fair amount of time messing around on the web, I'm reasonably active on Stackoverflow (link above) and I've been known to tweet occasionally.

I started this site primarily as a blog, I find it useful to write about what I learn and that's what I intend to do (hopefully my ramblings are useful to someone)!