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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…