como misturar links (<a> tag) e cabeçalhos (<h1> tag) no padrão da web?

Qual é o código correto para criar um link com o título 1 de acordo com os padrões da web?

é isso

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

ou

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

obrigado

De acordo com os padrões da web, você não tem permissão para colocar elementos de bloco em elementos embutidos.

Como h1é um elemento de bloco e aé um elemento embutido, a maneira correta é:

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

Aqui está um link para você saber mais: w3 Modelo de formatação visual

No entanto, há uma exceção de que em HTML5 é válido envolver elementos de nível de bloco (como div, pou h*) em tags âncora. Encapsular elementos de nível de bloco em elementos embutidos diferentes de âncoras ainda vai contra os padrões.

HTML5 atualiza este assunto: agora está OK envolver elementos de nível de bloco com A's, conforme declarado em outra pergunta: https://stackoverflow.com/a/9782054/674965 e aqui: http://davidwalsh.name/html5- elementos-links

Tanto quanto eu entendo, HTML5 permite que você envolva elementos de nível de bloco em tags de link. No entanto, podem aparecer bugs em navegadores mais antigos. Eu encontrei isso com o Firefox 3.6.18 e tenho moz-rs-header = "" inserido no meu código. Assim, meus estilos se quebraram. Se você se preocupa com uma solução alternativa, pode envolver as tags de link em divs. O seguinte fornece uma explicação melhor de por que o código adicional funciona http://oli.jp/2009/html5-block-level-links/

a > h1 irá causar dificuldade em selecionar o texto

Uma vez que ambos são totalmente válidos em HTML5, é melhor usar h1 > a