¿Qué es HTML?

Descubre qué es HTML, para qué sirve y cuál es su rol dentro de la web. La primera pieza de cualquier página.

HTML son las siglas de HyperText Markup Language — lenguaje de marcado de hipertexto. No es un lenguaje de programación: no tiene lógica, no toma decisiones. Es un lenguaje de estructura: le dice al navegador qué es cada cosa en una página.

¿Para qué sirve?

Cuando el navegador carga una página web, lo primero que descarga es el HTML. Ese archivo le dice:

  • Esto es un título
  • Esto es un párrafo
  • Aquí hay una imagen
  • Esto es un enlace a otra página

CSS luego decide cómo se ve todo eso. JavaScript decide cómo se comporta. Pero sin HTML, no hay nada sobre lo que trabajar.

La metáfora del edificio

Piensa en una web como un edificio:

  • HTML es la estructura: vigas, paredes, suelo, techo
  • CSS es el acabado: pintura, azulejos, muebles
  • JavaScript es la instalación eléctrica: luces que se encienden, puertas automáticas

Puedes tener un edificio sin decoración (feo, pero funcional). No puedes tener decoración sin edificio.

Tu primer HTML

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>Hola, mundo</h1>
    <p>Esta es mi primera página web.</p>
  </body>
</html>

Guarda esto en un archivo index.html y ábrelo en el navegador. Eso es una web funcional.

¿Qué es una etiqueta?

HTML funciona con etiquetas — palabras clave rodeadas de < > que marcan el inicio y el fin de cada elemento:

<p>Este es un párrafo.</p>
  • <p> → etiqueta de apertura
  • </p> → etiqueta de cierre
  • El texto entre ellas → contenido del elemento

Algunos elementos no necesitan cierre porque no tienen contenido, como <br> (salto de línea) o <img> (imagen).

Atributos

Las etiquetas pueden llevar atributos que añaden información extra:

<a href="https://eldata.es">Visitar eldata</a>
<img src="/foto.jpg" alt="Una fotografía" />
<input type="text" placeholder="Escribe aquí" />

El formato es siempre nombre="valor" dentro de la etiqueta de apertura.

En la siguiente lección vemos cómo se organiza un documento HTML completo por dentro.