¿Es válido usar <a> (etiqueta de anclaje) sin el atributo href?


152

He estado usando Twitter Bootstrap para construir un sitio, y gran parte de su funcionalidad depende de envolver las cosas <a>, incluso si solo van a ejecutar Javascript. He tenido problemas con la href="#"táctica que recomienda la documentación de Bootstrap, así que estaba tratando de encontrar una solución diferente.

Pero luego intenté simplemente eliminar el hrefatributo por completo. He estado usando <a class='bunch of classes' data-whatever='data'>, y tener Javascript maneja el resto. Y funciona.

Sin embargo, algo me dice que no debería estar haciendo esto. ¿Correcto? Quiero decir, técnicamente <a>se supone que es un enlace a algo, pero no estoy completamente seguro de por qué esto es un problema. ¿O es eso?


Respuestas:


245

El <a>elemento nchor es simplemente un ancla hacia o desde algún contenido. Originalmente, la especificación HTML permitía anclajes con nombre ( <a name="foo">) y anclajes vinculados ( <a href="#foo">).

El formato de anclaje con nombre se usa con menos frecuencia, ya que el identificador de fragmentos ahora se usa para especificar un [id]atributo (aunque para la compatibilidad con versiones anteriores todavía puede especificar [name]atributos). Un <a>elemento sin [href]atributo sigue siendo válido .

En lo que respecta a la semántica y el estilo, el <a>elemento no es un enlace ( :link) a menos que tenga un [href]atributo. Un efecto secundario de esto es que un <a>elemento sin [href]no estará en el orden de tabulación por defecto.

La verdadera pregunta es si el <a>elemento solo es una representación apropiada de a <button>. En un nivel semántico, hay una clara diferencia entre a linky a button.

Un botón es algo que cuando se hace clic hace que ocurra una acción.

Un enlace es un botón que provoca un cambio en la navegación en el documento actual. La navegación que se produce podría moverse dentro del documento en el caso de identificadores de fragmentos ( #foo) o moverse a un nuevo documento en el caso de urls ( /bar).

Como los enlaces son un tipo especial de botón, a menudo se han anulado sus acciones para realizar funciones alternativas. Continuar usando un ancla como botón está bien desde el punto de vista de la consistencia, aunque no es semánticamente bastante preciso.

Si le preocupa la semántica y la accesibilidad del uso de un <a>elemento (o <span>, o <div>) como botón, debe agregar los siguientes atributos:

<a role="button" tabindex="0" ...>...</a>

La función del botón le dice al usuario que el elemento en particular se está tratando como un botón como una anulación para cualquier semántica que pueda haber tenido el elemento subyacente.

Para <span>y <div>elementos, es posible que desee agregar oyentes clave de JavaScript para Spaceo Enterpara activar el clickevento. <a href>y los <button>elementos hacen esto de manera predeterminada, pero los elementos que no son botones no lo hacen. A veces tiene más sentido vincular el clickgatillo a una tecla diferente. Por ejemplo, un botón de "ayuda" en una aplicación web podría estar vinculado F1.


1
@Zacqary, [role="button"]no hace nada concreto, aún necesita escuchar el evento de clic (pero lo haría de todos modos para hacer un botón JS). Está destinado a ser utilizado para la navegación asistida (también conocido como lectores de pantalla) para que el lector de pantalla sepa representar el elemento como un botón en lugar de su valor semántico original. Agregar [tabindex]agrega el elemento al orden de tabulación. En circunstancias especiales, es posible que no desee / necesite el botón navegable en el orden de tabulación, por lo que es un atributo opcional. Los elementos que ya son botones no necesitan, [role="button"]ya que es redundante.
zzzzBov

¿Es HTML válido tener una etiqueta de anclaje sin href y sin nombre? En nuestra aplicación tenemos algunos enlaces de eliminación que están deshabilitados (por lo tanto, no hay atributo href), pero que aún se muestran al usuario.
Joshua Muheim

1
@JoshuaMuheim, espero que no te importe, pero publiqué tu pregunta como una pregunta independiente por separado .
zzzzBov

Solo quería agregar una nota de que si está usando esto para crear 'botones' para acciones de JavaScript ... eliminar el atributo href por completo también hará que Chrome (y probablemente otros navegadores) dejen de cambiar el cursor al pasar el mouse. Obviamente, esto es fácil de volver a agregar con CSS, pero solo una cabeza arriba.
Mir

@Mir, si no vas a usar [href], probablemente deberías estar usando a <span>para el botón.
zzzzBov

45

Creo que puede encontrar su respuesta aquí: ¿Es segura una etiqueta de anclaje sin el atributo href?

Además, si no desea ninguna operación de enlace con href, puede usarlo como:

<a href="javascript:void(0);">something</a>

3
En realidad debería serjavascript:undefined
rybo111

2
@ rybo111 tienes razón pero todavía prefiero void (0); básicamente porque se ve mejor. No me gusta que mis clientes vean las cosas como "indefinidas" ;-)
Alex

9
<a href="javascript:;">text</a>?
diynevala

javascript:;solía romper cosas como efectos de rollover e incluso animaciones gif en IE6. Y para ninguna operación de enlace hay elementos HTML dedicados como button. Al mismo tiempo, cosas como los enlaces AJAX pueden usar sus hrefs para acciones de reserva si JS falla.
Ilya Streltsyn

14

Sí, es válido usar la etiqueta de anclaje sin un hrefatributo.

Si el aelemento no tiene hrefatributo, entonces el elemento representa un marcador de posición para el lugar donde de otro modo podría haberse colocado un enlace, si hubiera sido relevante, que consiste solo en el contenido del elemento.

Sí, puede utilizar classy otros atributos, pero no se puede utilizar target, download, rel, hreflang, ytype .

El target, download, rel, hreflang, y typeatributos deben omitirse si el atributo href no está presente.

En cuanto a la parte " ¿Debería? ", Vea la primera cita: " donde de otro modo se podría haber colocado un enlace si hubiera sido relevante ". Entonces preguntaría " Si no tuviera JavaScript, ¿usaría esta etiqueta como un enlace? ". Si la respuesta es sí, entonces sí, debe usar <a>sin href. Si no, entonces aún lo usaría, porque la productividad es más importante para mí que la semántica de los casos límite, pero esta es solo mi opinión personal.

Además, debe tener cuidado con diferentes comportamientos y estilos (por ejemplo, sin subrayado, sin puntero, no a :link).

Fuente: Recomendación HTML5 W3C


No se trata tanto de la "semántica del caso límite" sino de la accesibilidad, es decir, asegurarse de que las personas con discapacidad puedan usar y comprender el contenido de un sitio web
Neiya

3

Es válido. Puede, por ejemplo, usarlo para mostrar modales (o cosas similares que responden data-toggley data-targetatributos).

Algo como:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Aquí uso el ícono de font-awesome, que es mejor como aetiqueta en lugar de como button, para mostrar un modal. Además, la configuración role="button"hace que el puntero cambie a un tipo de acción. Sin hrefo role="button", el puntero del cursor no cambia.


2
Deberías estar usando un botón en este caso. Es más apropiado tanto desde el punto de vista semántico como de accesibilidad. Las anclas deberían llevarte a algún lado, no realizar una acción. Además, ¿por qué estás ocultando todo el ancla aria-hidden? El icono, tal vez, pero los usuarios de lectores de pantalla no deberían tener una experiencia disminuida.
isherwood
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.