¿Alguna vez has dudado si usar un <button> o un <a> para un elemento de tu diseño? Al maquetar, no siempre es evidente si un elemento es un botón o un enlace. Visualmente, pueden ser idénticos, pero sus funciones difieren y el navegador reacciona a ellos de manera distinta.
Por lo tanto, una elección incorrecta puede provocar errores en el funcionamiento de la página web y afectar negativamente la accesibilidad web, el SEO y la experiencia de usuario. Entender la diferencia entre enlace y botón HTML es, por tanto, fundamental.
La diferencia principal entre un enlace (
<a>) y un botón (<button>) en HTML es su propósito semántico. Los enlaces se usan para la navegación, llevando al usuario a otra URL o sección. Los botones, en cambio, ejecutan acciones en la página actual, como enviar un formulario, y se activan tanto con ‘Enter’ como con ‘Espacio’.
Por qué surge el problema: ¿Navegación o Acción?
Un enlace es un elemento de navegación. Generalmente, se presenta como un texto sobre el cual el usuario hace clic para ir a otra página o para desplazarse a otra sección dentro de la página actual. Es decir, el enlace o etiqueta <a> es responsable de interconectar recursos web o secciones de un mismo recurso.
Los enlaces se crean utilizando la etiqueta <a>.
<a href="https://ejemplo.com">Ejemplo de Enlace</a>Un botón es un elemento funcional. Es responsable de ejecutar una acción específica: añadir al carrito, comprar, enviar, votar, etc. Para saber cuándo usar button o a, piensa si la acción cambia la URL o no.
Para los botones se utiliza la etiqueta <button>, sobre la que puedes aprender más en el artículo que he escrito sobre <button>.
<button class="button">9 900 USD</button>Los problemas surgen cuando un botón se parece mucho a un enlace (texto sin un contenedor visible) o un enlace se asemeja a un botón (texto ubicado sobre un fondo rectangular). En mis años de experiencia, he visto cómo este error es una de las fuentes más comunes de problemas de accesibilidad.
Consecuencias de Usar <button> para Navegar
Si envuelves una dirección URL con la etiqueta <button> en lugar de <a>, al hacer clic derecho, el navegador ofrecerá acciones correspondientes a un botón. La dirección no se podrá abrir en una nueva pestaña ni compartir a través del menú contextual.
Una de las funciones principales de un enlace es la capacidad de abrirlo en una nueva pestaña mediante la combinación de teclas Ctrl + clic izquierdo, funcionalidad que se pierde al usar un botón.
Además, al pasar el cursor sobre un enlace correctamente implementado, su dirección URL aparece en la parte inferior de la ventana del navegador. La URL envuelta en una etiqueta <button> no se mostrará, lo que reduce la confianza del usuario y dificulta el rastreo de los motores de búsqueda.
Consecuencias de Usar <a> para Acciones
Al hacer clic derecho sobre un enlace, el navegador propone acciones específicas para los enlaces. Si un elemento funcional se envuelve con la etiqueta <a>, el menú contextual será el de un enlace, pero sus opciones no tendrán sentido.
Este “enlace” no posee una dirección válida, por lo que será imposible abrirlo en una nueva pestaña, guardarlo, copiarlo o compartirlo. El debate sobre etiqueta a vs button se inclina claramente hacia el uso correcto para cada caso.
<a href="javascript:;">En realidad, esto es un botón</a>Al pasar el cursor sobre este pseudoenlace, en la parte inferior de la ventana del navegador no aparecerá una dirección, sino javascript:; o URLDeLaPaginaActual/#.
Accesibilidad y Navegación con Teclado: Una Diferencia Clave
Más allá del ratón, el uso semántico correcto define cómo los usuarios navegan usando solo el teclado, un pilar fundamental de la accesibilidad en los enlaces con teclado.
Un enlace (<a>) se activa de forma nativa únicamente presionando la tecla Enter. Por el contrario, un botón (<button>) tiene un comportamiento más amplio: se activa tanto con la tecla Enter como con la tecla Espacio. Además, los botones HTML semánticos pueden tener un estado :focus específico que detiene el scroll de la página al presionar espacio, algo que los enlaces no hacen. Si usas la etiqueta incorrecta, rompes esta funcionalidad nativa y complicas la vida a los usuarios que dependen de tecnologías de asistencia, como las descritas en el marcado WAI-ARIA.
Cómo identificar el elemento según el diseño
A menudo, las especificaciones concretas se detallan en el documento de requerimientos técnicos del diseño. En la guía de estilos del propio diseño (styleguide) también se pueden consultar los estados del elemento.
Un enlace debe tener estilos para su estado normal, al pasar el cursor por encima (:hover), en el momento del clic (:focus), activo (:active) y, a veces, para el estado visitado (:visited).
Un botón no tiene el estado :visited, pero sí cuenta con el estado deshabilitado (:disabled). Para un entendimiento más profundo de estos patrones, la documentación sobre patrones de diseño ARIA del W3C es un recurso excelente.
Sin embargo, no debes basarte únicamente en el diseño. Un enlace podría no tener definido un estado :visited o un botón podría carecer de un estado :disabled, lo que puede generar confusión.
En resumen: ¿botón o enlace?
Si por alguna razón el diseñador no ha definido los estados de los elementos, tendrás que guiarte por la lógica de su función.
Aquí está la clave:
| Característica | Enlace <a> | Botón <button> |
|---|---|---|
| Responsabilidad | Navegación. El usuario se desplaza a otra sección de la página o a una página nueva. | Acción. Ejecución de una función sin cambiar de página: añadir al carrito, comprar, enviar, etc. |
| Experiencia de Usuario | • Al pasar el cursor, la URL aparece en la parte inferior.<br>• El menú contextual permite abrir en nueva pestaña. | • Al pasar el cursor, no se muestra ninguna dirección URL.<br>• El menú contextual no permite copiar dirección ni abrir pestaña. |
| Teclado | Se activa solo con la tecla Enter. | Se activa con Enter y con la tecla Espacio. |
| Ejemplo | “Iniciar sesión”: si abre una página nueva para poner datos, es un enlace. | “Iniciar sesión”: si abre una ventana modal en la misma página, es un botón. |
Preguntas Frecuentes (FAQ)
¿Cuál es la diferencia principal entre la etiqueta <a> y <button>?
La diferencia es semántica y funcional: la etiqueta <a> (ancla) se utiliza para la navegación entre URLs o secciones, mientras que la etiqueta <button> se usa para ejecutar acciones programáticas dentro de la misma página, como enviar formularios o desplegar menús, activándose con las teclas Enter y Espacio.
¿Afecta al SEO usar un botón en lugar de un enlace?
Sí, afecta negativamente. Los bots de Google rastrean la web siguiendo los atributos href de los enlaces para descubrir contenido y transmitir autoridad. Si usas un botón para navegar, interrumpes el flujo de rastreo y esa “fuerza” (link juice) no se transmite a la página de destino.
¿Por qué no puedo abrir un botón en una nueva pestaña con clic derecho?
Porque el navegador no reconoce el botón como un recurso con una dirección (URL). Al carecer de un atributo href, el menú contextual no ofrece opciones de navegación como “Abrir en nueva pestaña” o “Copiar dirección de enlace”, lo que frustra la experiencia del usuario.
Quiero comentar algo