Lo que es más correcto: <h1> <a> ... </a> </h1> O <a> <h1> ... </h1> </a>

166

Son a la vez <h1><a ...> ... </a></h1>y <a ...><h1> ... </h1></a>HTML válido, o sólo una es la correcta? Si ambos son correctos, ¿difieren en significado?

knokio
fuente

Respuestas:

155

Ambas versiones son correctas. La mayor diferencia entre ellos es que <h1><a>..</a></h1>solo se puede hacer clic en el texto del título.

Si coloca <a>alrededor de <h1>y la displaypropiedad css es block(que es por defecto ) se podrá hacer clic en todo el bloque (la altura <h1>y el 100% del ancho del contenedor en el que <h1>reside).

Históricamente, no se podía colocar un elemento de bloque dentro de un elemento en línea, pero ya no es el caso con HTML5. Sin embargo, creo que el <h1><a>..</a></h1>enfoque es más convencional.

En el caso de que desee colocar un ancla en el encabezado, un mejor enfoque que <a id="my-anchor"><h1>..</h1></a>sería utilizar idel nameatributo o el siguiente: <h1 id="my-anchor">..</h1>o<h1 name="my-anchor">..</h1>

Marco
fuente
Más referencia aquí: stackoverflow.com/questions/6061869/…
thdoan
2
<a> <h1> .. </h1> </a> suena preferible para HTML 5 ya que ofrece a los usuarios de dispositivos táctiles un objetivo de clic más grande, ¿verdad?
Acyra
Cuando un título y un subtítulo se vinculan al mismo contenido, es visualmente más atractivo incluir ambos en el mismo <a>para que compartan un estado de desplazamiento
Slam
26

En pre HTML 5 este

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

No validará. Puede usarlo en HTML 5. Sin embargo, usaría esto:

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

a menos que necesite agregar más de <h1> dentro de <a>

vaidas
fuente
8

<a><h1></h1></a>no es válido para W3C ... Básicamente, no puede colocar elementos de bloque dentro de elementos en línea

contento
fuente
26
Es válido en HTML 5
vaidas
1
yeap .. pero de alguna manera siento que poner los elementos de bloque dentro de un enlace es un poco descuidado (opinión personal), al igual que no se cierre una etiqueta (válido en HTML 5) .. pero bueno .. tal vez los efectos de la SEO!
pleasedontbelong
7

<h1><a>..</a></h1>y <a><h1>..</h1></a>siempre se han comportado casi igual, cuando las hojas de estilo no afectan el renderizado. Casi, pero no del todo. Si navega con la tecla de tabulación o de lo contrario se enfoca en un enlace, aparece un "rectángulo de enfoque" alrededor del enlace en la mayoría de los navegadores. Para <h1><a>..</a></h1>, este rectángulo es solo alrededor del texto del enlace. Para <a><h1>..</h1></a>, el rectángulo se extiende a través del espacio horizontal disponible, ya que el marcado hace que el aelemento sea un elemento de bloque en la representación, ocupando el 100% de ancho de forma predeterminada.

A continuación se muestra cómo <a href=foo><h1>link</h1></a>Chrome procesa un foco :

ingrese la descripción de la imagen aquí

Esto implica que si diseña elementos, por ejemplo, al establecer un color de fondo para los enlaces, los efectos difieren de manera similar.

Históricamente, <a><h1>..</h1></a>se declaró no válido en HTML 2.0, y las especificaciones HTML posteriores siguieron su ejemplo, pero HTML5 cambia esto y lo declara como válido. La definición formal no ha afectado a los navegadores, solo a los validadores. Sin embargo, es remotamente posible que algunos agentes de usuario (probablemente no navegadores normales, pero, por ejemplo, procesadores HTML especializados, extractores de datos, convertidores, etc.) no se manejen <a><h1>..</h1></a>correctamente, ya que no está permitido en las especificaciones.

Rara vez hay una buena razón para convertir un encabezado o texto en un encabezado en un enlace. (Es principalmente ilógico y malo para la usabilidad). Pero a menudo surge una pregunta similar al hacer que un encabezado (o texto en un encabezado) sea un destino potencial para un enlace, por ejemplo, usando <h2><a name=foo>...</a></h2>versus <a name=foo><h2>...</h2></a>. Consideraciones similares se aplican a esto (ambos funcionan, puede haber una diferencia ya que este último hace que el aelemento sea un bloque, y antes de HTML5, solo el primero está formalmente permitido). Pero además, en ambos sentidos son anticuadas, y utilizando el idatributo directamente sobre el elemento de encabezado ahora se recomienda: <h2 id=foo>...</h2>.

Jukka K. Korpela
fuente
8
"There is seldom a good reason to make a heading or text in a heading a link"-> Debo estar en desacuerdo con eso. En realidad, hay muchas buenas razones para hacer que un encabezado sea un enlace. Ejemplo dado: una lista de publicaciones de blog, donde cada título es también un enlace. O consulte SO en sí: todas las preguntas en la portada son h3elementos y también un enlace. De todos modos, buena explicación;)
giorgio
@giorgio, por ejemplo, los enlaces SO que menciona son malos para la usabilidad: hacer un enlace para referirse a la página en sí es inútil y confuso.
Jukka K. Korpela
1
Bueno, me refiero a los enlaces SO en la página de inicio, que dirigen al usuario a otra página, la página de preguntas específicamente. Y sí, el enlace en el encabezado de la página de preguntas es (no totalmente) inútil, pero eso no lo hace necesariamente malo para la usabilidad. Sin embargo, la razón principal es el SEO (en la página de preguntas).
giorgio
1
Ese loopback h1 SEO es algo malo para la usabilidad. ¿Por qué el título de una página (h1) hace que un lector de pantalla anuncie un enlace a otro lugar? Es muy confuso Y por la misma razón, tener un enlace en subtítulos es confuso, cuando algo es supuestamente el título de una sección dentro de la página y también el título de otra página.
Adam
5

Los elementos H1 son elementos de nivel de bloque y los anclajes son elementos en línea. Se le permite tener un elemento en línea dentro de un elemento de nivel de bloque pero no al revés. Cuando considera el modelo de caja y la especificación HTML, esto tiene sentido.

En conclusión, la mejor manera es:

<h1><a href="#">Link</a></h1>
Sam152
fuente
2
"esto tiene sentido" , usted dice crípticamente sin ninguna explicación de por qué, pero se especifica el comportamiento de un elemento a nivel de bloque dentro de un elemento en línea . Tener elementos de nivel de bloque dentro de elementos en línea nunca ha sido incorrecto. Lo que es más, la especificación HTML 5 y HTML Living Standard están totalmente bien con encabezados dentro de los anclajes. Esta respuesta es simplemente incorrecta.
Mark Amery
1

¿Desea utilizar un hipervínculo <a href="…">/ a:linko desea agregar un ancla a su encabezado? si desea agregar un ancla, simplemente puede asignar una identificación <h1 id="heading">. luego puedes vincularlo como page.htm#heading.

si desea hacer clic en el encabezado (un enlace), use primero los elementos de nivel de bloque <h1><a></a></h1>/ h1 > ay los elementos en línea dentro

knittl
fuente
1

Además, hay diferencias de jerarquía de estilo. Si lo tiene como <h1><a href="#">Heading here</a></h1>, los estilos del ancla anularán los estilos del elemento h1. Ejemplo:

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

ANULARÁ

h1 {color:blue;font-size:40px;line-height:40px;}
Vim Bonsu
fuente
-1 porque esto no aborda la pregunta (la cual es más correcta) en absoluto.
Mark Amery