Which is more correct:

Question

Are both

...

and

...

valid HTML, or is only one correct

Answer 1

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 >

Answer 2

<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>.

Answer 3

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

Answer 4

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

Answer 5

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>

Answer 6

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;}