Which is more correct: <h1><a>...</a></h1> OR <a><h1>...</h1></a>

Solution 1:

Both versions are correct. The biggest difference between them is that in the case of <h1><a>..</a></h1> only the text in the title will be clickable.

If you put the <a> around the <h1> and the css display property is block (which it is by default) the entire block (the height of the <h1> and 100% of the width of the container the <h1> resides in) will be clickable.

Historically you could not put a block element inside of an inline element, but this is no longer the case with HTML5. I would think that the <h1><a>..</a></h1> approach is more conventional though.

In the case where you want to put an anchor on the header, a better approach than <a id="my-anchor"><h1>..</h1></a> would be to use either the id or the name attribute like this: <h1 id="my-anchor">..</h1> or <h1 name="my-anchor">..</h1>

Solution 2:

In pre HTML 5 this one

<a><h1>..</h1></a>

will not validate. You can use it in HTML 5. However, i would use this:

<h1><a>..</a></h1>

unless you need to add more than < h1 > inside the < a >

Solution 3:

<a><h1></h1></a> is not W3C valid... Basically, you can't put block elements inside inline elements