Respuesta corta: usa un enlace cuando el control lleva a algún sitio, y un botón cuando hace algo en la página. Un enlace necesita una URL real en su href; un botón envía un formulario, abre un menú o reproduce un audio. Elige por lo que hace el control, no por su aspecto.
Qué hace un enlace y qué hace un botón
MDN describe el elemento a, con su atributo href, como un enlace. Puede llevar a páginas web, archivos, direcciones de correo, lugares de la misma página o cualquier otra cosa a la que apunte una URL.
MDN define el botón como un elemento interactivo que se activa con el ratón, el teclado, el dedo o la voz. Una vez activado, hace una acción, como enviar un formulario o abrir un diálogo.
Cuál usar en cada caso
| Situación | Qué usar | Por qué |
|---|---|---|
| Ir a otra página | Un enlace con href | Lleva a una URL |
| Saltar a una sección de la misma página | Un enlace al id de la sección | Lleva a un lugar, dentro de la página |
| Descargar un archivo | Un enlace al archivo | MDN cuenta los archivos entre los destinos de un enlace |
| Enviar un formulario | Un botón | Hace una acción |
| Abrir un menú, un diálogo o un panel | Un botón | MDN cita abrir un diálogo como función de un botón |
| Reproducir audio o cambiar el tema | Un botón | Cambia algo en la página |
| Empezar un proceso en otra página | Un enlace con aspecto de botón | Así funcionan los botones de inicio de GOV.UK |
De MDN y del sistema de diseño de GOV.UK, en inglés, consultados el 5 de noviembre de 2026.
Los botones de inicio de GOV.UK no envían datos de un formulario, así que están hechos como enlaces con aspecto de botón.
Los problemas de los botones y los enlaces falsos
MDN advierte sobre los enlaces usados como botones con un href de # o javascript:void(0). Estropean copiar, abrir en otra pestaña y guardar en favoritos, y fallan mientras carga JavaScript, cuando da error o si está desactivado. Los lectores de pantalla además reciben un significado equivocado.
El teclado también funciona distinto. La gente espera que los botones funcionen con Espacio o Enter y los enlaces con Enter, así que un enlace disfrazado de botón necesita código extra para el Espacio. MDN aconseja que el aspecto encaje con la función y usar un botón nativo siempre que se pueda.
Añadir role="button" a un enlace cambia lo que anuncian los lectores de pantalla, pero no cómo responden las teclas. Nuestra guía de qué es ARIA explica por qué los elementos nativos van primero.
Qué escribir en ellos
GOV.UK pide que el texto del botón describa la acción que hace. También avisa de que varias llamadas a la acción principales en una misma página hacen más difícil saber qué hacer después.
Para los enlaces, WebAIM pide un texto que se entienda fuera de contexto, así que frases como «haz clic aquí» o «más» no sirven solas. Nuestra guía de call to action trata la redacción de los principales.
Cómo revisar tus botones y enlaces
- Haz una lista de todos los controles que se pueden pulsar en la página.
- Para cada uno, pregúntate si lleva a algún sitio o si hace algo en la página.
- Haz que los que llevan a algún sitio sean enlaces con un href real, nunca # ni javascript:void(0).
- Haz que los que actúan sean elementos button, y dentro de un formulario pon type="button" a los que no deban enviarlo.
- Comprueba que los enlaces funcionan con Enter y los botones con Enter y Espacio; nuestra guía de navegación con teclado explica la prueba.
- Lee cada etiqueta por separado y comprueba que dice lo que pasa.
- Abre el árbol de accesibilidad y comprueba que cada control aparece como enlace o como botón, según lo que querías; nuestra guía de HTML semántico explica el árbol.
De qué están hechos nuestros controles
El 5 de noviembre de 2026 repasamos los controles de nuestra portada, de una guía y de la página de contacto, en inglés y en español. Probamos cada página en pantalla de escritorio y de teléfono. Todo lo que actúa en la página es un elemento button. Entre ellos están el menú, el interruptor de tema claro y oscuro, el reproductor de audio, el chat, el botón de enviar del formulario y las opciones de cookies.
Todos los enlaces con aspecto de botón llevan a algún sitio. «Escríbenos» abre nuestra página de contacto, «Escríbenos por WhatsApp» abre WhatsApp y «Envíanos un mensaje» baja hasta el formulario de la portada.
Ningún botón estaba dentro de un enlace ni ningún enlace dentro de un botón, y ningún enlace llevaba role="button" para pasar por botón. Los únicos botones dentro de un formulario eran los que lo envían.
Antes de publicar
- Los enlaces tienen un href real, no # ni javascript:void(0).
- Las acciones de la página usan elementos button.
- Los botones dentro de un formulario que no deben enviarlo llevan type="button".
- Los enlaces con aspecto de botón siguen llevando a algún sitio.
- Ningún botón está dentro de un enlace ni ningún enlace dentro de un botón.
- Cada etiqueta dice lo que pasa.
RecuerdaPregúntate qué hace el control. Si lleva a algún sitio, es un enlace; si hace algo aquí, es un botón.
En nuestro servicio de diseño web lo decidimos para cada control de la página.
Respuestas rápidas sobre botones y enlaces
¿Cuándo uso un botón en lugar de un enlace?
Usa un botón cuando el control hace algo en la página, como enviar un formulario, abrir un menú o reproducir un audio. Usa un enlace cuando lleva a otra página o a otro lugar. MDN lo resume así: un enlace es para navegar a una URL real.
¿Un enlace puede parecer un botón?
Sí. Los botones de inicio de GOV.UK son enlaces con aspecto de botón, porque llevan a la página siguiente en lugar de enviar datos de un formulario. Lo que decide el elemento es lo que hace el control, no su aspecto.
¿Por qué es un problema href="#"?
MDN explica que valores falsos como # o javascript:void(0) estropean copiar, abrir en otra pestaña y guardar en favoritos. También fallan mientras carga JavaScript, cuando da error o cuando está desactivado, y les dicen algo equivocado a los lectores de pantalla.
¿Qué teclas funcionan en botones y enlaces?
MDN señala que la gente espera activar los botones con Espacio o Enter, y los enlaces con Enter. Un botón y un enlace nativos responden solos a esas teclas, mientras que uno falso necesita código extra para cada una.
¿Qué debe decir un botón o un enlace?
Lo que pasa después. GOV.UK pide que el texto del botón describa la acción. WebAIM pide enlaces que se entiendan fuera de contexto, así que frases como «haz clic aquí» o «más» no sirven por sí solas.
Fuentes
Consultadas el 5 de noviembre de 2026. MDN Web Docs: elemento de ancla HTML y button. En inglés: MDN Web Docs, ARIA: button role; GOV.UK Design System, Button; WebAIM, Links and Hypertext. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.