Estructura de un documento HTML

Aprende cómo se organiza internamente un documento HTML: doctype, head, body y los metadatos esenciales que toda página necesita.

Todo documento HTML sigue siempre la misma estructura base. No es opcional — el navegador la espera, y saltársela puede causar comportamientos raros e impredecibles.

La estructura mínima

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Título de la página</title>
  </head>
  <body>
    <!-- Aquí va el contenido visible -->
  </body>
</html>

Cada parte tiene un papel distinto. Vamos por partes.

<!doctype html>

La primera línea de cualquier documento HTML. Le dice al navegador que está leyendo HTML5 — el estándar actual. Sin esto, el navegador entra en “modo quirks”, un estado de compatibilidad con webs de los años 90 que rompe casi todo el CSS moderno.

Siempre va primero. Siempre.

<html lang="es">

El elemento raíz que envuelve todo el documento. El atributo lang es importante:

  • Los lectores de pantalla lo usan para pronunciar correctamente el contenido
  • Los motores de búsqueda lo usan para indexar por idioma
  • El navegador puede sugerir traducciones basándose en él

<head> — lo que no se ve

El <head> contiene metadatos: información sobre la página que el navegador y los motores de búsqueda usan, pero que no se muestra al usuario.

<head>
  <!-- Codificación de caracteres — permite tildes, ñ, etc. -->
  <meta charset="UTF-8" />

  <!-- Viewport — hace que la página sea responsive en móvil -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Título que aparece en la pestaña del navegador y en Google -->
  <title>Mi página | ELDATA</title>

  <!-- Descripción para motores de búsqueda -->
  <meta name="description" content="Aprende desarrollo web con ejemplos reales." />

  <!-- Enlace al archivo CSS externo -->
  <link rel="stylesheet" href="/styles/global.css" />

  <!-- Favicon (ícono de la pestaña) -->
  <link rel="icon" href="/favicon.ico" />
</head>

<body> — lo que sí se ve

El <body> contiene todo el contenido visible de la página: textos, imágenes, botones, formularios…

<body>
  <header>
    <h1>Mi sitio web</h1>
    <nav>
      <a href="/">Inicio</a>
      <a href="/about">Sobre mí</a>
    </nav>
  </header>

  <main>
    <h2>Bienvenido</h2>
    <p>Este es el contenido principal.</p>
  </main>

  <footer>
    <p>© 2026 Mi sitio</p>
  </footer>
</body>

Jerarquía y anidamiento

HTML es un árbol. Los elementos se anidan unos dentro de otros, y el orden importa:

<!-- ✅ Correcto: cierra en orden inverso al que abriste -->
<div>
  <p>Texto <strong>en negrita</strong></p>
</div>

<!-- ❌ Incorrecto: los elementos se cruzan -->
<div>
  <p>Texto <strong>en negrita</div>
</strong></p>

El navegador intentará corregir el HTML mal escrito, pero el resultado es impredecible. Cierra siempre lo que abres, en el orden correcto.

Con la estructura clara, en la siguiente lección entramos en las etiquetas de texto: títulos, párrafos, énfasis y todo lo que da forma al contenido escrito.