Una página web puede seguir mostrando su título, sus párrafos y sus enlaces aunque pierda casi todo su diseño. En otra ocasión puede verse perfectamente, pero un botón deja de responder. También puede ocurrir lo contrario: la página funciona, los controles reaccionan y el contenido está ahí, aunque la distribución se vea desordenada.
Esas diferencias revelan algo que normalmente permanece oculto mientras navegamos. Una página no suele estar construida como una sola pieza. HTML, CSS y JavaScript participan en capas distintas y, aunque trabajan juntas, cada una resuelve un tipo de problema.
Entender esa división ayuda a mirar la Web de otra manera. Ya no se trata únicamente de aprender tres nombres técnicos. Empiezas a reconocer qué parte del sitio define el contenido, cuál controla su presentación y dónde aparece la lógica que responde a tus acciones.
HTML organiza el contenido antes de preocuparse por su apariencia
HTML significa HyperText Markup Language, o Lenguaje de Marcado de Hipertexto. Su función principal es describir la estructura y el significado del contenido que forma una página.
La documentación de HTML de MDN en español lo presenta como el componente básico de la Web y explica que se utiliza para definir la estructura del contenido. Esa estructura incluye encabezados, párrafos, enlaces, imágenes, formularios, secciones, tablas y muchos otros elementos.
Un fragmento sencillo puede verse así:
<h1>Curso de programación</h1>
<p>Aprende los fundamentos paso a paso.</p>
<button>Ver temario</button>Todavía no hemos indicado un color especial, una tipografía concreta ni la posición exacta del botón. Sin embargo, ya existe una organización.
El navegador puede reconocer que h1 representa un encabezado principal, que p contiene un párrafo y que button corresponde a un control que puede utilizarse como botón.
Esa información importa porque HTML no trabaja únicamente con la apariencia.
Un texto grande y en negritas puede parecer un título para una persona, pero si fue creado como un elemento genérico y solo se hizo grande mediante estilos, la estructura del documento no expresa con la misma claridad que se trata de un encabezado.
La semántica de HTML ayuda a conservar ese significado.
Eso beneficia a quienes mantienen el código, a los navegadores, a los motores de búsqueda y a tecnologías de asistencia como los lectores de pantalla. Una estructura ordenada permite comprender mejor qué partes forman el documento y cuál es la relación entre ellas.
La formación sobre desarrollo web de la Dirección de Docencia en Tecnologías de Información y Comunicación de la UNAM incluye HTML, CSS, accesibilidad y tecnologías frontend dentro de la construcción de sitios funcionales. Esa combinación refleja una idea importante: construir una página no consiste únicamente en lograr que se vea bien.
Primero debe existir una estructura que tenga sentido.
HTML puede crear un formulario donde escribes tu nombre, una navegación con enlaces a distintas secciones o una tarjeta que muestra el título y la descripción de un curso. Después, otras tecnologías pueden transformar la forma en que esas piezas se presentan o reaccionan.
CSS decide cómo se presenta esa estructura
Si abrieras el HTML anterior sin agregar estilos personalizados, el navegador aplicaría su presentación básica. El título tendría cierto tamaño, el párrafo aparecería debajo y el botón usaría el aspecto predeterminado del navegador.
La página funcionaría, pero probablemente no se parecería al diseño final de un sitio profesional.
CSS entra en esa etapa.
CSS significa Cascading Style Sheets, o Hojas de Estilo en Cascada. Su trabajo consiste en describir cómo deben presentarse los elementos de un documento.
La guía de CSS básico de MDN explica que CSS permite aplicar estilos de manera selectiva a elementos HTML. Entre otras cosas, puede modificar colores, fuentes, tamaños, espacios, fondos y distribución.
Podemos cambiar el botón anterior sin modificar el HTML:
button {
padding: 12px 20px;
border-radius: 8px;
font-size: 16px;
}El botón sigue siendo el mismo elemento desde el punto de vista estructural. Lo que cambia es su presentación.
Esa separación es útil porque permite trabajar sobre la apariencia sin tener que reconstruir todo el contenido.
Un sitio puede utilizar la misma estructura HTML y modificar completamente su aspecto mediante distintas hojas de estilo. También puede adaptar el diseño según el tamaño de la pantalla.
Una página que muestra tres columnas en una computadora puede reorganizar esas mismas secciones en una sola columna cuando se abre desde un celular. No hace falta crear necesariamente un documento diferente para cada dispositivo.
CSS puede establecer esas variaciones.
La Red de Responsables TIC de la UNAM reúne materiales relacionados con desarrollo web y formación en HTML y CSS. En este tipo de aprendizaje, ambos aparecen juntos porque resulta difícil comprender el diseño web sin distinguir estructura y presentación.
La diferencia se vuelve especialmente clara cuando algo falla.
Si el contenido aparece, pero los elementos están demasiado juntos, el texto tiene un tamaño incorrecto o una tarjeta ocupa todo el ancho cuando no debería, probablemente el problema se encuentre en las reglas de estilo.
Si un título desapareció por completo del documento, en cambio, quizá sea necesario revisar primero el HTML o la lógica que genera ese contenido.
CSS también controla estados visuales.
Puede cambiar el aspecto de un enlace cuando pasas el cursor, resaltar un campo que tiene el foco o modificar la presentación de un botón cuando se encuentra deshabilitado.
Algunas animaciones pueden realizarse exclusivamente con CSS.
Eso demuestra por qué la frase “CSS solo sirve para poner colores” se queda corta. El lenguaje participa en buena parte de la experiencia visual de una página: distribución, jerarquía, adaptación a pantallas, espaciado, tipografía y movimiento.
JavaScript entra cuando la página necesita tomar decisiones o reaccionar
Una página puede tener HTML bien organizado y CSS cuidadosamente preparado, pero seguir siendo poco interactiva.
El botón Ver temario existe. Tiene buena apariencia. Todavía falta decidir qué debe suceder cuando alguien lo presiona.
JavaScript puede encargarse de esa parte.
MDN explica en su documentación sobre tecnologías JavaScript que HTML define la estructura y el contenido, CSS controla la presentación y JavaScript agrega interactividad y permite desarrollar aplicaciones web más dinámicas.
Un ejemplo pequeño podría escuchar el clic del usuario:
boton.addEventListener("click", () => {
temario.hidden = false;
});No hace falta dominar la sintaxis para entender lo que ocurre.
El programa espera un evento. Cuando detecta el clic, ejecuta una instrucción y modifica algo en la página.
A partir de ese principio se construyen comportamientos mucho más complejos.
La página puede cambiar sin cargarse de nuevo
Piensa en una tienda en línea.
Aumentas la cantidad de un producto y el precio total cambia inmediatamente. Escribes en un buscador y aparecen sugerencias. Abres un menú y su contenido se despliega. Presionas un botón y aparece una ventana sin abandonar la página.
JavaScript puede participar en todas esas acciones.
El navegador ofrece interfaces que permiten al código trabajar con el documento cargado. De esa manera, un programa puede leer elementos existentes, crear otros nuevos, modificar texto, cambiar clases utilizadas por CSS o responder a distintos eventos.
En el artículo sobre cómo funciona un programa desde el código hasta lo que aparece en la pantalla vimos que el navegador funciona como entorno para ejecutar JavaScript en una página web.
Esa ejecución permite que la interfaz cambie mientras la persona continúa utilizándola.
JavaScript también puede comunicarse con servidores
No toda la información necesaria está dentro de la página.
Una aplicación de clima necesita obtener datos actualizados. Una tienda debe consultar inventario. Una plataforma educativa puede solicitar las calificaciones de un estudiante. Una red social necesita recibir publicaciones almacenadas en servidores.
JavaScript puede enviar solicitudes por Internet y utilizar las respuestas para actualizar la interfaz.
El usuario quizá solo vea que apareció una lista nueva, pero detrás de esa acción pueden haber ocurrido varios pasos: el navegador envió una petición, un servidor la recibió, otro programa consultó una base de datos, se preparó una respuesta y finalmente JavaScript utilizó esos datos para modificar la página.
Eso conecta el desarrollo web con conceptos que ya vimos al explicar cómo funciona Internet.
La interfaz es únicamente una parte del sistema.
Las tres tecnologías se mezclan en la experiencia, aunque sus responsabilidades sean distintas
Microsoft propone en su módulo de introducción al desarrollo web en español de México un proyecto sencillo compuesto por una página HTML, un archivo CSS y un archivo JavaScript.
Ese formato resulta útil para principiantes porque permite observar físicamente la separación.
Puedes tener:
index.html
styles.css
script.js
El primer archivo contiene la estructura. El segundo define estilos. El tercero incorpora comportamiento.
Sin embargo, en proyectos reales las fronteras pueden volverse menos visibles.
JavaScript puede crear elementos HTML durante la ejecución. También puede añadir o quitar clases y provocar cambios visuales que finalmente aplica CSS. Algunas funciones interactivas sencillas pueden resolverse mediante HTML y CSS sin necesidad de JavaScript.
Además, las herramientas actuales pueden combinar, transformar o generar archivos durante el proceso de desarrollo.
Frameworks y bibliotecas como React, Vue o Angular introducen otras formas de organizar las interfaces. Aun así, debajo de esas herramientas siguen existiendo conceptos relacionados con estructura, presentación y comportamiento.
Por eso aprender primero las bases continúa siendo útil.
La propia formación de desarrollo y optimización de sitios web de la UNAM incluye tecnologías frontend junto con temas de backend, accesibilidad, seguridad y administración de contenido. Una aplicación web completa normalmente necesita mucho más que HTML, CSS y JavaScript en el navegador.
Puede existir código ejecutándose en servidores, bases de datos, sistemas de autenticación y servicios externos.
Aun así, cuando estás frente a la interfaz de una página, las tres tecnologías ofrecen un mapa bastante práctico.
Si quieres comprender una sección, empieza por observar qué elementos existen y cómo están organizados: ahí aparece HTML.
Después mira por qué tienen determinado tamaño, espacio, color o posición: ahí interviene CSS.
Finalmente, identifica qué ocurre cuando escribes, haces clic, arrastras algo o recibes nuevos datos sin recargar la página: ahí probablemente encontrarás JavaScript participando en el comportamiento.
Esa forma de separar el problema resulta especialmente útil cuando comienzas a programar.
No necesitas entender toda una aplicación de una sola vez.
Puedes mirar primero qué existe, después cómo se presenta y finalmente qué hace cuando alguien interactúa con ella.
Martin Rojas es especialista en tecnología y trabaja con herramientas digitales, computadoras, Internet y software desde hace muchos años. A lo largo de su trayectoria ha realizado cursos de actualización y desarrollado experiencia práctica con diferentes plataformas, sistemas y soluciones digitales. En Skydutz, transforma ese conocimiento técnico en explicaciones claras para estudiantes, profesionales y personas que quieren entender mejor la tecnología que utilizan todos los días.