8 min HTML

¿Qué es HTML?

Cada vez que abres una web — sea Netflix, GitHub o la tienda online donde compraste esas zapatillas — tu navegador está leyendo HTML. Es el idioma que entiende todo navegador del planeta. Sin HTML no hay web. Punto.

En esta lección vas a entender qué es, cómo funciona por dentro y vas a crear tu primer archivo HTML que se abre en el navegador. En 8 minutos.

¿Qué significa HTML?

HTML son las siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Vamos a desmenuzarlo:

HyperText: texto que enlaza con otros textos. Cuando haces clic en un enlace y te lleva a otra página, eso es hipertexto.
Markup: marcado. Usas "etiquetas" para decirle al navegador qué es cada cosa: esto es un título, esto un párrafo, esto una imagen.
Language: es un lenguaje, pero no es un lenguaje de programación. No tiene lógica, ni bucles, ni condiciones. Solo describe estructura.

HTML no decide qué pasa cuando haces clic en un botón (eso es JavaScript). Tampoco decide el color del botón (eso es CSS). HTML solo dice: "aquí hay un botón".

¿Cómo funciona el navegador?

Cuando escribes una URL y pulsas Enter, esto es lo que pasa en milisegundos:

Tu navegador envía una petición al servidor donde vive esa web.
El servidor responde con un archivo .html (y probablemente CSS y JavaScript también).
El navegador lee el HTML de arriba a abajo, construye la estructura de la página y la muestra en pantalla.

Ese proceso de "leer el HTML y construir lo que ves" se llama renderizado. El navegador convierte texto plano en la interfaz visual que ves. Cada etiqueta HTML es una instrucción: "pon aquí un título", "aquí una imagen", "esto es un enlace".

Tu primer archivo HTML

Crea una carpeta en tu ordenador llamada mi-primera-web. Dentro, crea un archivo llamado index.html y escribe esto:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Café Estelar — Cafetería de gatos espaciales</title>
</head>
<body>
    <h1>Bienvenido a Café Estelar</h1>
    <p>La primera cafetería donde los gatos flotan en gravedad cero.</p>
    <p>Abrimos de lunes a sábado, de 9:00 a 21:00 (hora terrestre).</p>
</body>
</html>

Ahora abre ese archivo con tu navegador (doble clic o arrastra el archivo al navegador). Verás algo así:

Un título grande: "Bienvenido a Café Estelar"
Dos párrafos debajo con la descripción
En la pestaña del navegador aparece: "Café Estelar — Cafetería de gatos espaciales"

Eso es HTML funcionando. Texto plano que el navegador transforma en una página.

Las etiquetas: la base de todo

HTML funciona con etiquetas (tags). La mayoría tienen apertura y cierre:

<h1>Esto es un título</h1>
<p>Esto es un párrafo</p>

<h1> es la etiqueta de apertura.
</h1> es la etiqueta de cierre (con la barra /).
Lo que hay entre ambas es el contenido.

Algunas etiquetas no necesitan cierre porque no envuelven contenido:

<img src="gato-astronauta.jpg" alt="Gato con casco espacial">
<br>
<hr>

Estas se llaman etiquetas vacías o void elements. No tienen contenido dentro, solo atributos.

Atributos: configurando etiquetas

Las etiquetas pueden llevar atributos que les dan información extra:

<a href="https://ejemplo.com" target="_blank">Visitar ejemplo</a>
<img src="logo.png" alt="Logo de Café Estelar" loading="lazy">

href indica a dónde lleva el enlace.
target="_blank" abre el enlace en una pestaña nueva.
src indica la ruta de la imagen.
alt describe la imagen para lectores de pantalla y cuando la imagen no carga.
loading="lazy" hace que la imagen solo se cargue cuando el usuario se acerca a ella (rendimiento).

Los atributos siempre van en la etiqueta de apertura, nunca en la de cierre.

Anidación: etiquetas dentro de etiquetas

Las etiquetas se pueden meter unas dentro de otras. A esto se le llama anidar:

<body>
    <h1>Menú del día</h1>
    <ul>
        <li>Café con leche de avena</li>
        <li>Tostada de aguacate estelar</li>
        <li>Brownie de gravedad cero</li>
    </ul>
</body>

Aquí <ul> (lista) está dentro de <body>, y cada <li> (elemento de lista) está dentro de <ul>. La indentación no es obligatoria, pero hace que el código sea legible. Acostúmbrate a indentar desde el primer día.

Regla de oro: lo que abres primero, lo cierras último. Si abres <ul> y luego <li>, primero cierras </li> y después </ul>. Nunca cruces etiquetas.

HTML no es programación, pero es fundamental

Hay quien dice "HTML es solo poner etiquetas, lo fácil". Error. Un HTML bien escrito:

Mejora el SEO: Google entiende mejor tu contenido si usas las etiquetas correctas.
Es accesible: las personas que usan lectores de pantalla dependen de un buen HTML.
Facilita el CSS y JS: si la estructura es buena, dar estilo y añadir interactividad es mucho más fácil.
Es el futuro de la web con IA: con WebMCP (que verás en la lección 10), los agentes de IA leen tu HTML para interactuar con tu web.

Un HTML chapucero te persigue durante todo el proyecto. Un HTML limpio te ahorra horas.

Herramientas que necesitas

Para seguir este curso solo necesitas dos cosas:

Un editor de código: te recomendamos Zed, un editor moderno, rapidísimo y con IA integrada. Es gratuito, open source y está pensado para el desarrollo del futuro. Si prefieres algo más establecido, Visual Studio Code también es una gran opción.
Un navegador moderno: Chrome, Firefox, Edge o Safari. Todos renderizan HTML prácticamente igual.

Zed trae autocompletado de HTML, preview integrado y un rendimiento que se nota desde el primer archivo. Si usas VS Code, instala la extensión Live Server para que el navegador se refresque automáticamente cada vez que guardes.

Crea un archivo index.html con la landing de un negocio inventado. Puede ser lo que quieras: una tienda de vinilos, un restaurante japonés, una academia de skate, un servicio de paseo de dinosaurios...

Tu archivo debe incluir:

Un <h1> con el nombre del negocio
Al menos dos <p> describiendo qué ofrece
Una lista <ul> con 3 servicios o productos

Ábrelo en el navegador y comprueba que se ve correctamente.

Pistas

Usa la estructura base de la lección: <!DOCTYPE html>, <html>, <head> y <body>. No te preocupes por el diseño todavía, eso viene en la sección de CSS.

Siguiente Estructura de un documento