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

Question

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?

Compost

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

Illtreat

More reference here: #6062369 – Ferous

<a><h1>..</h1></a> sound preferable for HTML 5 since it gives touch device users a bigger click target, right? – Lovell

When a headline and subhead both link to the same content it's visually more appealing to wrap both in the same <a> so that they share a hover state: jsfiddle.net/jjyLemq2 – Backstop

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

Photomicroscope

Answer 3

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

Deonnadeonne

yeap.. but somehow i feel that putting block elements inside a link is kinda sloppy (personal opinion), like not closing a tag (valid in HTML5).. but hey!.. maybe it effects the SEO – Deonnadeonne

Answer 4

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>

Astoria

"this makes sense", you cryptically say without any explanation of why, but the behaviour of a block-level element within an inline element is specified. Having block-level elements inside inline elements has never been wrong. What's more, the HTML 5 spec and HTML Living Standard are totally fine with having headings inside anchors. This answer is simply wrong. – Duckboard

Answer 5

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

Sawhorse

"There is seldom a good reason to make a heading or text in a heading a link" -> I must disagree on that one. There are actually a lot good reasons to make a heading a link. Example given: a list of blog posts, where each title is a link as well. Or checkout SO itself: all the questions on the frontpage are h3 elements, and a link as well. Anyway, good explanation ;) – Aculeate

@giorgio, e.g. the SO links you mention are bad for usability: making a link to refer to the page itself is pointless and confusing. – Sawhorse

Well, I mean the SO links on the homepage, which direct the user to another page, the question page specifically. And yes, the link in the header on the question page is (not totally) useless, but that doesn't make it necessarily bad for usabilty. The main reason is SEO though (on the question page). – Aculeate

That loopback h1 SEO thing is something bad for usability. Why would the title of a page (h1) made a screenreader announce a link to somewhere else? It's very confusing. And for the very same reason, having a link in sub-headings is confusing, when something is supposedly the title of a section within the page and also the title of another page. – Bactria

Answer 6

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

Perspiration

Answer 7

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

Deem

-1 because this doesn't address the question (of which is more correct) at all. – Duckboard

Answer 8

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»

Officiary

Answer 9

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

Cavorelievo