Cuando uno comienza a adentrarse en el ambiente del desarrollo web, es común encontrarse con dos términos que se repiten constantemente: HTML y CSS. Aunque al principio puedan parecer simples herramientas técnicas, en realidad son los cimientos sobre los que se construye la mayoría de lo que vemos en internet.
HTML y CSS no son solo lenguajes. Son una forma de dar estructura y forma al contenido digital. Son el punto de partida para cualquier página web, y entenderlos es comenzar a comprender como esta hecha la web.
HTML: La estructura que le da forma a la web
HTML, o HyperText Markup Language, es un lenguaje de marcado que utiliza etiquetas para definir la estructura del contenido. Estas etiquetas funcionan como bloques o fragmentos que nos permiten organizar títulos, párrafos, imágenes, enlaces y mucho más. Así como una casa tiene paredes, puertas y ventanas, una página web tiene sus elementos definidos por HTML.
Además, mientras uno va construyendo, empieza a notar que existe un orden jerárquico: algunas etiquetas contienen a otras, y todo parte desde una raíz común. Esa raíz es la etiqueta <html>, que actúa como el contenedor global de todo lo que sigue. Desde allí, se ramifican otras etiquetas que van dando forma y sentido al contenido.
Este es un ejemplo simple de cómo se ve una estructura básica en HTML. La imagen 1 muestra el código escrito, y la imagen 2 revela cómo ese código cobra forma cuando se representa en el navegador.
Desde esta perspectiva, podemos empezar a ver que la web se compone de fragmentos o bloques que se conectan entre sí. Retomando la analogía de una casa, estos bloques representan las partes que le dan forma y estructura al sitio web.
Dentro de esos bloques existen algunas etiquetas principales que cumplen roles clave en la organización del contenido. Por ejemplo, etiquetas como <header>, <body> y <footer> nos ayudan a dividir visual y conceptualmente la página (Ver nuevamente la imagen 1).
- El
<header>suele contener el título del sitio y un menú de navegación. A veces también se colocan allí archivos importantes que ayudan al funcionamiento del sitio, como enlaces a hojas de estilo (más adelante se explica). - El
<body>es la parte principal del sitio, donde se muestra todo el contenido que el usuario ve: textos, imágenes, enlaces, botones, etc. - Y el
<footer>es la parte final de la página, donde normalmente se colocan cosas como enlaces secundarios, derechos de autor o información de contacto.
CSS: El estilo que transforma la experiencia visual
Ahora que tenemos contexto sobre HTML, surge una nueva pregunta: ¿Qué es CSS? Por sus siglas de Cascading Style Sheets o Hojas de Estilo en Cascada, es un lenguaje de diseño que permite darle a la web una representación visual mucho más atractiva. Es aquí donde nuestro sitio comienza a cobrar vida frente al usuario.
Simplemente, como su nombre lo indica, CSS son hojas de estilo que podemos estructurar y aplicar directamente en nuestro código HTML. Este código se escribe de forma continua, casi como si fluyera en forma de cascada, tal como sugiere su nombre.
Podemos decir que CSS viene a embellecer la web. A través de sus propiedades, podemos aplicar colores, tamaños de fuente, márgenes, alineaciones e incluso adaptar el diseño para que funcione correctamente en diferentes tamaños de pantalla, lo que se conoce como diseño responsivo.
Siguiendo con la analogía de la casa: estar dentro de una casa sin color, sin detalles ni decoración, puede uno no sentirse confortable. Lo mismo ocurre con una página web. CSS es ese toque visual que convierte una estructura funcional en una experiencia más agradable y cercana para quien la visita.
En la imagen 3 se muestra una hoja de estilos que será usada en el código HTML de la imagen 1. Esta combinación no solo mejora la apariencia visual del sitio, sino que también revela cómo la estructura y el estilo trabajan en conjunto para dar forma a la experiencia web. Es aquí donde HTML y CSS dejan de ser códigos separados.
En conclusión, si bien HTML por sí solo nos permite estructurar una página, puede sentirse incompleto. La experiencia visual del usuario es limitada sin un acompañamiento estético que lo guíe o lo conecte emocionalmente con lo que está viendo.
Sin CSS, una web puede funcionar, pero difícilmente causará el mismo impacto o transmitirá con claridad el mensaje que queremos dar. Es aquí donde comprendemos cómo HTML se complementa con CSS para construir tanto la estructura como la expresión visual de un sitio.
Ver imagen 4 para observar el resultado final con HTML y CSS trabajando en conjunto.
Ejemplo práctico (Ver imagen 5) de cómo se ve la estructura básica de una web cuando se integra CSS.
