What should come first in HTML, an anchor or a header? [duplicate]

Question

I'm wondering which of the following two orders is semantically correct in HTML:

1. <h1><a>Header</a></h1>
2. <a><h1>Header</h1></a>

Answer 1

<h1><a>Header</a></h1>

<h1> is a block-level element and <a> is not, it is syntactically invalid HTML to have block level elements inside inline elements (at least until HTML5) which is how the other way would be.

Answer 2

This answer on a duplicate question is better than mine: https://stackoverflow.com/a/7023551/20578

But, for posterity:

---

Semantically, there’s no difference. Remember, “semantic” just means “related to meaning”, and meaning is just something agreed between humans (because computers don’t natively do meaning, that’s a human brain thing). No-one’s got time to agree that one of these virtually identical options means something different to the other :)

Surprisingly, they’re actually both valid as well, as of the current HTML spec, because <a>’s content model is defined as “transparent”, i.e. the same as its parent.

See:

• http://www.pauldwaite.co.uk/test-pages/5341451

And:

• http://html5.validator.nu/?doc=http%3A%2F%2Fwww.pauldwaite.co.uk%2Ftest-pages%2F5341451%2F&showsource=yes

(That assumes that <a>’s parent can have an <h1> as its child)

However, it’s not valid under previous versions of HTML:

• http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pauldwaite.co.uk%2Ftest-pages%2F5341451&charset=%28detect+automatically%29&doctype=HTML+4.01+Transitional&group=0