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 link
y 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 click
evento. <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 click
gatillo a una tecla diferente. Por ejemplo, un botón de "ayuda" en una aplicación web podría estar vinculado F1.