Html how to make H1, H2, etc as links?

Question

What is the correct code for turning a h1, h2 etc heading into a link and search engines index texts of header and link both?

Is it:

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

or

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

and could anyone explain why ?

Answer 1

Per here: http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

%flow element which display as a block (in this case <h1>) always should surround %inline elements (such as <a>).

Another example <div> should always be outside <span>.

That is to say:

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

is correct.

---

An even easier way of under standing this is that the following makes sense:

<h1><a href="#1">my link</a> and <a href="#2">my other link</a></h1>

It would be highly unusual to try the inverse with multiple <h1>s inside an <a>.

Answer 2

If You go with code1

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

you are just able to make it as a link with highlight feature. But If you go with code2

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

you will probably able to satisfy some css property as h1 a{ //hover or text decoration}

I will go with second code. ... Both will work.