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

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?

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>

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>

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

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

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

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>

¿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

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;}