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

95

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

html web-standards

— ahmed
fonte

143

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.

— Darko Z
fonte

19

No HTLM5, isso mudou. Ambos os exemplos validarão - validator.w3.org .

— Atadj

Agradável. é um erro fácil de cometer e, embora ambos validem sua lógica, os elementos embutidos naturalmente devem ser descendentes dos elementos de nível de bloco.

— bigmadwolf

@pushplaybang - Eu diria que é mais semântico envolver o cabeçalho em um link, a menos que apenas parte do cabeçalho seja clicável (não consigo pensar em um caso de uso para isso). Independentemente disso, é bom que ambos tenham suporte em html5.

— aaaaaa

48

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

— f055
fonte

8

Esta resposta agora é muito mais relevante do que a aceita

— Josh Davenport

@JoshDavenport A resposta aceita foi atualizada para refletir isso

— dan-klasson

2

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/

— Kip Deeds
fonte

1

a > h1 irá causar dificuldade em selecionar o texto

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

— Abhishek
fonte