O que é mais correto: <h1> <a>… </a> </h1> OU <a> <h1>… </h1> </a>

São ambos <h1><a ...> ... </a></h1>e <a ...><h1> ... </h1></a>HTML válido, ou é apenas uma correta? Se ambos estão corretos, diferem em significado?

Ambas as versões estão corretas. A maior diferença entre eles é que, no caso de <h1><a>..</a></h1>apenas o texto no título, será clicável.

Se você colocar a propriedade <a>around <h1>e the css displayfor block(como é o padrão), o bloco inteiro (a altura <h1>e 100% da largura do contêiner <h1>em que reside) será clicável.

Historicamente, não era possível colocar um elemento de bloco dentro de um elemento embutido, mas esse não é mais o caso do HTML5. Eu acho que a <h1><a>..</a></h1>abordagem é mais convencional.

No caso em que você quer colocar uma âncora no cabeçalho, uma abordagem melhor do que <a id="my-anchor"><h1>..</h1></a>seria a de usar o idou o nameatributo assim: <h1 id="my-anchor">..</h1>ou<h1 name="my-anchor">..</h1>

No HTML 5 anterior, este

<a><h1>..</h1></a>

não será validado. Você pode usá-lo no HTML 5. No entanto, eu usaria isso:

<h1><a>..</a></h1>

a menos que você precise adicionar mais de <h1> dentro do <a>

<a><h1></h1></a>não é válido para o W3C ... Basicamente, você não pode colocar elementos de bloco dentro de elementos embutidos

<h1><a>..</a></h1>e <a><h1>..</h1></a>sempre se comportaram quase da mesma maneira, quando as folhas de estilo não afetam a renderização. Quase, mas não exatamente. Se você navegar usando a tecla tab ou se concentrar em um link, um "retângulo de foco" será exibido ao redor do link na maioria dos navegadores. Para <h1><a>..</a></h1>, este retângulo é apenas em torno do texto do link. Pois <a><h1>..</h1></a>, o retângulo se estende pelo espaço horizontal disponível, pois a marcação faz do aelemento um elemento de bloco na renderização, ocupando 100% de largura por padrão.

A seguir, mostra como um foco <a href=foo><h1>link</h1></a>é renderizado pelo Chrome:

Isso implica que, se você estilizar elementos, por exemplo, definindo uma cor de fundo para os links, os efeitos diferem de maneira semelhante.

Historicamente, <a><h1>..</h1></a>foi declarado inválido no HTML 2.0, e as especificações HTML subsequentes seguiram o exemplo, mas o HTML5 altera isso e o declara válido. A definição formal não afetou navegadores, apenas validadores. No entanto, é remotamente possível que alguns agentes do usuário (provavelmente não navegadores normais, mas, por exemplo, renderizadores HTML especializados, extratores de dados, conversores, etc.) falhem em lidar <a><h1>..</h1></a>adequadamente, uma vez que isso não é permitido nas especificações.

Raramente existe um bom motivo para tornar um título ou texto em um título. (Na maioria das vezes, é ilógico e ruim para a usabilidade.) Mas uma pergunta semelhante costuma surgir ao tornar um cabeçalho (ou texto em um cabeçalho) um destino potencial para um link, usando, por exemplo, <h2><a name=foo>...</a></h2>versus <a name=foo><h2>...</h2></a>. Considerações semelhantes se aplicam a isso (ambos funcionam, pode haver uma diferença, pois o último transforma o aelemento em um bloco e, antes do HTML5, somente o primeiro é formalmente permitido). Mas, além disso, os dois lados estão desatualizados, e usando o idatributo diretamente no elemento título agora é recomendado: <h2 id=foo>...</h2>.

Os elementos H1 são elementos no nível do bloco e as âncoras são elementos embutidos. Você pode ter um elemento embutido dentro de um elemento no nível do bloco, mas não o contrário. Quando você considera o modelo da caixa e as especificações do HTML, isso faz sentido.

Então, em conclusão, a melhor maneira é:

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

você deseja usar um hiperlink <a href="…">/ a:linkou deseja adicionar uma âncora ao seu cabeçalho? Se você deseja adicionar uma âncora, pode simplesmente atribuir um ID <h1 id="heading">. você pode vinculá-lo como page.htm#heading.

se você quiser tornar o título clicável (um link), use <h1><a></a></h1>/ h1 > a- os elementos de nível de bloco primeiro e os elementos embutidos

Além disso, há diferenças na hierarquia de estilos. Se você tiver como <h1><a href="#">Heading here</a></h1>, os estilos da âncora substituirão os estilos do elemento h1. Exemplo:

a {color:red;font-size:30px;line-height:30px;}

EXCEDERÁ

h1 {color:blue;font-size:40px;line-height:40px;}