Botones, iframes y rutas de archivo
Hoy tocan tres piezas que, a primera vista, no tienen mucho que ver entre sí: botones, páginas incrustadas dentro de otras páginas, y las rutas que usa el navegador para encontrar tus archivos. El hilo que las conecta es este: las tres tratan sobre cómo tu página habla con el mundo exterior — o con partes de sí misma.
Botones: tres formas de decir "haz clic aquí"
Parece mentira, pero hay al menos tres formas distintas de crear algo clicable en HTML, y cada una tiene un propósito distinto. Confundirlas es uno de los errores más comunes de quien empieza.
El botón genérico y correcto para casi todo: enviar un formulario, abrir un menú, activar algo con JavaScript. Es accesible por defecto y funciona con teclado sin que tengas que hacer nada extra.
Un botón que envía un formulario, con el texto definido en el atributo value. Más antiguo que <button>, y hoy en día casi siempre se prefiere este último.
Un enlace al que le has puesto estilo de botón con CSS. Sigue siendo, por dentro, un enlace: te lleva a otra URL. Nunca uses un enlace disfrazado de botón para acciones que no naveguen a ningún sitio.
Usar un <a href="#"> como si fuera un botón
para acciones de JavaScript (como "abrir un modal" o "mostrar más"). Funciona,
pero es semánticamente incorrecto y confunde a lectores de pantalla, que
anuncian ese elemento como "enlace" cuando en realidad no te lleva a ninguna
parte. Si no navega, usa <button>.
Pon siempre type="button" a los botones que no
envían un formulario. Si no lo especificas y el botón está dentro de un
<form>, el navegador asume por defecto que es
de tipo submit — y puede enviarte el formulario
sin que quisieras.
<iframe>: una página dentro de otra página
Un <iframe> (inline frame) incrusta
una página web completa dentro de otra, como una ventana dentro de una ventana.
Es la tecnología detrás de los vídeos de YouTube que incrustas en un blog, o un
mapa de Google Maps embebido en una web de contacto.
Obligatorio para accesibilidad: describe qué contiene el iframe para quien use un lector de pantalla, que de otro modo solo anunciaría "marco sin nombre".
El tamaño del recuadro. Muchos servicios (YouTube, Maps, Figma) te dan directamente el código del iframe con estos valores ya calculados para pegar y usar.
Abusar de los iframes para "importar" contenido de tu propia web en vez de reutilizar el HTML directamente. Un iframe carga una página completa e independiente, con su propio peso y sus propias peticiones — es una herramienta pesada para contenido externo, no un atajo para no repetir código.
Rutas de archivo: cómo encuentra el navegador tus recursos
Cada vez que enlazas una imagen, una hoja de estilos o una página, le estás dando al navegador una ruta: instrucciones de dónde encontrar ese archivo. Y hay dos formas radicalmente distintas de escribirlas.
La dirección completa, empezando por https:// o desde la raíz del dominio con /. Ejemplo: /images/logo.png siempre apunta a la carpeta images en la raíz del sitio, sin importar desde qué página la enlaces.
La dirección calculada desde la posición del archivo actual. Ejemplo: imagenes/logo.png busca una carpeta "imagenes" junto al archivo HTML que la usa; ../logo.png sube un nivel de carpeta antes de buscar.
Piensa en las rutas relativas como dar indicaciones desde donde estás parado ("gira la segunda a la derecha"), y en las absolutas como dar una dirección postal completa. Las relativas son cómodas mientras no muevas los archivos de sitio; en cuanto reorganizas carpetas, todas dejan de funcionar a la vez. Por eso muchos proyectos grandes prefieren rutas absolutas desde la raíz.
Ponlo a prueba
Comprueba lo que has aprendido
1. Necesitas un botón que abra un menú desplegable con JavaScript, sin enviar ningún formulario. ¿Qué usas?
2. ¿Qué atributo de <iframe> es obligatorio para accesibilidad?
3. ¿Qué es una ruta relativa?