HTML, el DOM y la semántica

HTML (HyperText Markup Language) describe la estructura y el significado del contenido: esto es un título, esto un párrafo, esto un enlace, esto una lista. No decide cómo se ve (eso es CSS) ni cómo se comporta (eso es JavaScript).

Elementos, etiquetas y atributos

Un documento HTML está hecho de elementos. Cada elemento suele tener una etiqueta de apertura, un contenido y una etiqueta de cierre. Los atributos añaden información extra al elemento, como el destino de un enlace.

<a href="/contacto" class="boton">Escríbenos</a>

<a …>              → etiqueta de apertura
href="/contacto"   → atributo (nombre="valor")
class="boton"      → otro atributo
Escríbenos         → contenido
</a>               → etiqueta de cierre

Algunos elementos no tienen contenido ni etiqueta de cierre, como <img>, <br> o <input>. Se llaman elementos vacíos.

Del texto al árbol: el DOM

El navegador no trabaja con tu HTML tal cual. Lo analiza y construye un árbol de objetos en memoria: el DOM (Document Object Model). Cada elemento es un nodo, el texto que contiene es otro nodo hijo, y así sucesivamente. Cuando JavaScript cambia la página o CSS aplica un estilo, actúan sobre este árbol.

HTML semántico

Podrías construir cualquier página solo con <div> y <span>, y con CSS se vería igual. Pero perderías el significado. Los elementos semánticos le dicen al navegador qué es cada cosa, y eso tiene ventajas muy concretas:

• Accesibilidad: los lectores de pantalla permiten saltar entre encabezados, ir directo al contenido principal o a la navegación.
• Comportamiento gratis: un <button> ya se puede enfocar y pulsar con el teclado; un <a> se puede abrir en otra pestaña.
• Buscadores: entienden mejor qué parte de la página es la importante.
• Mantenimiento: el código se explica solo.

<div>Logo y nombre del sitio</div>
<div>…enlaces…</div>
<div>
  <div>…la entrada…</div>
</div>
<div>…relacionadas…</div>
<div>© 2026…</div>

Un documento mínimo

Toda página HTML debería empezar con este esqueleto:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>Hola, web</h1>
  </body>
</html>

• <!doctype html> activa el modo estándar del navegador. Sin él, el navegador imita fallos de navegadores de los años 90 («modo quirks»).
• lang="es" declara el idioma del contenido.
• <meta charset="utf-8"> indica cómo interpretar los caracteres, para que tildes y eñes se vean bien.
• La etiqueta viewport hace que la página se adapte al ancho de los móviles en lugar de mostrarse diminuta.
• <title> es el texto de la pestaña y el título que muestran los buscadores.