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

166

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?

Knokio
fonte

Respostas:

155

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>

Marco
fonte
Mais referência aqui: stackoverflow.com/questions/6061869/…
thdoan
2
<a> <h1> .. </h1> </a> parece preferível para o HTML 5, pois oferece aos usuários de dispositivos de toque um alvo de cliques maior, certo?
Acyra
Quando um título e um subtítulo se vinculam ao mesmo conteúdo, é visualmente mais atraente agrupar os dois no mesmo, <a>para que eles compartilhem um estado de foco: jsfiddle.net/jjyLemq2
Slam
26

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>

vaidas
fonte
8

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

satisfeito
fonte
26
É válido no HTML 5
vaidas
1
yeap .. mas de alguma forma eu sinto que colocar elementos de bloco dentro de uma ligação é um bocado desleixado (opinião pessoal), como não fechar uma tag (válido em HTML5) .. mas hey .. talvez ele afeta o SEO!
pleasedontbelong
7

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

insira a descrição da imagem aqui

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

Jukka K. Korpela
fonte
8
"There is seldom a good reason to make a heading or text in a heading a link"-> Eu devo discordar disso. Na verdade, existem muitas boas razões para tornar um cabeçalho um link. Exemplo dado: uma lista de postagens do blog, onde cada título também é um link. Ou faça o checkout do SO: todas as perguntas na primeira página são h3elementos e também um link. De qualquer forma, boa explicação;)
Giorgio
@giorgio, por exemplo, os links SO mencionados são ruins para a usabilidade: criar um link para se referir à página em si é inútil e confuso.
Jukka K. Korpela
1
Bem, quero dizer os links SO na página inicial, que direcionam o usuário para outra página, especificamente a página da pergunta. E sim, o link no cabeçalho da página da pergunta é (não totalmente) inútil, mas isso não o torna necessariamente ruim para a usabilidade. O principal motivo é o SEO (na página de perguntas).
Giorgio
1
Essa coisa de SEO de loopback h1 é ruim para a usabilidade. Por que o título de uma página (h1) fez um leitor de tela anunciar um link para outro lugar? É muito confuso. E pela mesma razão, ter um link em subtítulos é confuso, quando algo é supostamente o título de uma seção dentro da página e também o título de outra página.
26415 Adam
5

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>
Sam152
fonte
2
"isso faz sentido" , você diz enigmaticamente, sem qualquer explicação do porquê, mas o comportamento de um elemento no nível do bloco dentro de um elemento embutido é especificado . Ter elementos no nível de bloco dentro de elementos inline nunca foi errado. Além disso, a especificação do HTML 5 e o HTML Living Standard são totalmente adequados para ter cabeçalhos dentro das âncoras. Esta resposta está simplesmente errada.
Mark Amery
1

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

knittl
fonte
1

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;}
Vim Bonsu
fonte
-1 porque isso não aborda a questão (qual é a mais correta).
Mark Amery