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

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?

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.

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>

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

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.