¿Cómo mezclar enlaces (etiqueta <a>) y encabezados (etiqueta <h1>) en el estándar web?

95

¿Cuál es el código correcto para crear un enlace con el título 1 según los estándares web?

Lo es

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

o

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

Gracias

html web-standards

— ahmed
fuente

143

De acuerdo con los estándares web, no está permitido colocar elementos de bloque en elementos en línea.

Como h1es un elemento de bloque y aes un elemento en línea, la forma correcta es:

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

Aquí hay un enlace para que pueda obtener más información: w3 Modelo de formato visual

Sin embargo, hay una excepción de que en HTML5 es válido envolver elementos a nivel de bloque (como div, po h*) en etiquetas de anclaje. El envolver elementos a nivel de bloque en elementos en línea que no sean anclajes todavía va en contra de los estándares.

— Darko Z
fuente

19

En HTLM5 esto ha cambiado. Ambos ejemplos se validarán: validator.w3.org .

— Atadj

Buena esa. Es un error fácil de cometer, y aunque ambos validarán su lógica de que, naturalmente, los elementos en línea deben ser descendientes de elementos de nivel de bloque.

— bigmadwolf

@pushplaybang - Diría que es más semántico envolver el encabezado en un enlace a menos que se suponga que solo se puede hacer clic en una parte del encabezado (no puedo pensar en un caso de uso para eso). Independientemente, es bueno que ambos sean compatibles con html5.

— aaaaaa

47

HTML5 actualiza este tema: ahora está bien envolver los elementos de nivel de bloque con A, como se indica en otra pregunta: https://stackoverflow.com/a/9782054/674965 y aquí: http://davidwalsh.name/html5- elementos-enlaces

— f055
fuente

8

Esta respuesta ahora es mucho más relevante que la respuesta aceptada

— Josh Davenport

@JoshDavenport La respuesta aceptada se ha actualizado para reflejar eso

— dan-klasson

2

Por lo que entiendo, HTML5 le permite envolver elementos de nivel de bloque en etiquetas de enlace. Sin embargo, pueden aparecer errores en los navegadores más antiguos. Encontré esto con Firefox 3.6.18 y obtuve moz-rs-header = "" insertado en mi código. Así se rompieron mis estilos. Si le interesa una solución alternativa, puede envolver las etiquetas de enlace en divs. A continuación se proporciona una mejor explicación de por qué funciona el código adicional http://oli.jp/2009/html5-block-level-links/

— Kip Deeds
fuente

1

a > h1 causará dificultades para seleccionar el texto

Dado que ambos son completamente válidos en HTML5, es mejor usar h1 > a

— Abhishek
fuente