¿Tramo dentro del ancla o ancla dentro del tramo o no importa?

109

Quiero anidar spany aetiquetar. Debería

  1. Poner <span>dentro<a>
  2. Poner <a>dentro<span>
  3. No importa
html css semantic-markup Salman A
fuente

Respuestas:

110

3 - No importa.

PERO, tiendo a usar solo un <span>interior <a>si es solo para una parte del contenido de la etiqueta, es decir

<a href="#">some <span class="red">text</span></a>

Más bien que:

<a href="#"><span class="red">some text</span></a>

Que obviamente debería ser:

<a href="#" class="red">some text</a>
Jon Hadley
fuente
1
Recientemente me encontré con un problema de espacios en blanco con text-overflow: ellipsis y overflow: hidden, que podría resolverse agregando un elemento de bloque en línea a mi botón de navegación. Terminé con <a> <span> Texto </span> </a>. Así que creo (o espero;)) que está bien hacer esto cuando realmente lo necesite.
CunningFatalist
Iré por la opción 2 porque sí importa. El ancla debe ser solo para anclar y no para contener elementos (mejor práctica). Imagine una situación en la que crea un mosaico en el que se puede hacer clic y el ancla es el elemento principal del componente de mosaico y dentro del componente están los enlaces para imágenes y más imágenes. El rastreador de Google se volverá loco y eventualmente, eso no es bueno para su sitio.
Imam Bux
33

Es perfectamente válido (al menos según los estándares HTML 4.01 y XHTML 1.0) anidar un <span> inside a <a>o un <a>inside a <span>.

Solo para demostrárselo a usted mismo, siempre puede consultarlo en el Servicio de validación de marcado W3C

Intenté validar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
       <p>
         <a href="http://www.google.com/"><span>Google</span></a>
       </p>
    </body>
  </html>

Y también lo mismo que el anterior, pero con el <a> interior del<span>

es decir

<span><a href="http://www.google.com">Google</a></span>

con los tipos de documento HTML 4.01 y XHTML 1.0, ¡y ambos pasaron la validación con éxito!

Lo único que debe tener en cuenta es asegurarse de cerrar las etiquetas en el orden correcto. Por lo tanto, si comienza con una, <span>luego una <a>, asegúrese de cerrar la <a>etiqueta primero antes de cerrar <span>y viceversa.

CraigTP
fuente
20

No importa, ambos están permitidos el uno dentro del otro.

Greg
fuente
Pero <a> es un nivel de bloque y <span> es un elemento de nivel en línea y el elemento de nivel de bloque no puede entrar dentro del elemento en línea. Creo que fue en la validación de w3c
Jitendra Vyas
26
No, ambos están en línea
Greg
16

eso depende de lo que quieras marcar.

  • si quieres un enlace dentro de un espacio, ponlo <a>dentro<span> .
  • si quieres marcar algo en un enlace, ponlo <span>en<a>
Knittl
fuente
16

SPAN es un contenedor en línea GENÉRICO . No importa si un aestá adentro spano spanadentro aya que ambos son elementos en línea. Siéntase libre de hacer lo que le parezca lógicamente correcto.

Salman A
fuente
2

Depende de para qué sea el tramo. Si se refiere al texto del enlace y no al hecho de que es un enlace, elija el número 1. Si el intervalo se refiere al enlace como un todo, elija el número 2. A menos que explique lo que representa el intervalo, no hay mucha más respuesta que esa. Ambos son elementos en línea, se pueden anidar sintácticamente en cualquier orden.

Sykora
fuente
Correcto, ambos son elementos en línea.
Chris
2

Puede importar si, por ejemplo, está utilizando algún tipo de fuente de iconos. Acabo de tener esto con:

<span class="fa fa-print fa-3x"><a href="some_link"></a></span>

Normalmente, pondría el tramo dentro de la A, pero el estilo no surtió efecto hasta que lo cambié.

usuario1368737
fuente
1

Personalmente, como desarrollador web, solo pongo un intervalo dentro de una etiqueta de anclaje si intento resaltar una sección del texto de los enlaces, como aplicar un fondo a una sección.

Xopa
fuente
0

Funcionará a ambos, pero personalmente prefiero la opción 2 para que el intervalo esté "alrededor" del enlace.

Vieja escuela
fuente
0

Semánticamente, creo que tiene más sentido, ya que es un contenedor para un solo elemento y si necesita anidarlos, eso sugiere que más de un elemento estará dentro del exterior.

Toby
fuente