How to mix links (<a> tag) and headers (<h1> tag) in the web standard?

Question

What is the correct code for creating a link with a heading of 1 in accordance with web standards?

this is

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1> 

or

 <a href="http://stackoverflow.com"><h1> stackoverflow </h1></a> 

thank

Answer 1

According to web standards, you are not allowed to put block elements in inline elements.

Since h1 is a block element and a is an inline element, the correct way is:

 <h1><a href="#">This is a title</a></h1> 

Here is a link so you can find out more: w3 Visual formatting model

However, there is an exception that in HTML5 it is permissible to wrap level block elements (e.g. div , p or h* ) in anchor tags. The flow around block-level elements in embedded elements other than anchors is still against standards.

Answer 2

HTML5 updates this topic: now it is possible to wrap block-level elements with A, as indicated on another question: https://stackoverflow.com/a/4646262/ here and: http://davidwalsh.name/html5-elements-links

Answer 3

As far as I understand, HTML5 allows you to wrap block-level elements in link tags. However, errors may appear in older browsers. I came across this with Firefox 3.6.18 and got moz-rs-heading = "inserted into my code. This way my styles broke. If you care about the work, you can wrap the link tags in a div. Below is the best explanation for that why the extra code works http://oli.jp/2009/html5-block-level-links/