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

Are both <h1><a ...> ... </a></h1> and <a ...><h1> ... </h1></a> valid HTML, or is only one correct? If they are both correct, do they differ in meaning?

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>

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 >

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

<h1><a>..</a></h1> and <a><h1>..</h1></a> have always behaved almost the same, when style sheets do not affect the rendering. Almost, but not quite. If you navigate using the tab key or otherwise focus on a link, a “focus rectangle” appears around the link in most browsers. For <h1><a>..</a></h1>, this rectangle is around the link text only. For <a><h1>..</h1></a>, the rectangle extends across the available horizontal space, since the markup makes the a element a block element in rendering, occupying 100% width by default.

The following shows how a focused <a href=foo><h1>link</h1></a> is rendered by Chrome:

This implies that if you style elements e.g. by setting a background color for links, the effects differ in a similar manner.

Historically, <a><h1>..</h1></a> was declared invalid in HTML 2.0, and subsequent HTML specifications followed suit, but HTML5 changes this and declares it as valid. The formal definition has not affected browsers, only validators. However, it is remotely possible that some user agents (probably not normal browsers, but e.g. specialized HTML renderers, data extractors, converters, etc.) fail to handle <a><h1>..</h1></a> properly, since it has not been allowed in the specifications.

There is seldom a good reason to make a heading or text in a heading a link. (It’s mostly illogical and bad for usability.) But a similar question has often arised when making a heading (or text in a heading) a potential destination for a link, using e.g. <h2><a name=foo>...</a></h2> versus <a name=foo><h2>...</h2></a>. Similar considerations apply to this (both work, there may be a difference since the latter makes the a element a block, and before HTML5, only the former is formally allowed). But in addition, both ways are outdated, and using the id attribute directly on the heading element is now recommended: <h2 id=foo>...</h2>.

H1 elements are block level elements, and anchors are inline elements. You are allowed to have an inline element within a block level element but not the other way around. When you consider the box model and the HTML spec this makes sense.

So in conclusion the best way is:

<h1><a href="#">Link</a></h1>

do you want to use a hyperlink <a href="…">/a:link, or do you want to add an anchor to your heading? if you want to add an anchor, you can simply assign an id <h1 id="heading">. you can then link it as page.htm#heading.

if you want to make the heading clickable (a link), use <h1><a></a></h1>/h1 > a – blocklevel elements first, and inline elements inside

Also, there is style hierarchy differences. If you have it as <h1><a href="#">Heading here</a></h1>, The styles of the anchor will overrule the styles of the h1 element. Example:

a {color:red;font-size:30px;line-height:30px;}

WILL OVERRULE

h1 {color:blue;font-size:40px;line-height:40px;}

I think the <h1><a href="">text</a></h1> is the least problematic with weak or old browsers, but modern browsers and powerful search engines are supporting both it and <a href=""><h1>text</h1></a>; So it's a good freedom and useful to use both to improve our web page.

«Hope that could be useful»

Both are correct. They depend on the sizing of the anchor tag which you want and how you want your website laid out. You can do <h1><a href="example.com">Home Page</a></h1>, in which case it would return:

Home Page

But with an Anchor.
Or you can do <a href="example.com"><h1>Home Page</h1></a> and it would return a H1 hyperlink instead of just heading an anchor to the H1, like so:

Home Page

However, mostly you cannot add links within H1 because it will just render it as an anchor onto the h1 rather than adding a hyperlink. However, I think I'm right in saying that you could see a difference in behaviour for this on different browsers.

But correct me if I am wrong. :)