Estructura de un documento HTML

Todos los documentos HTML siguen la misma estructura básica. Da igual que sea la web de un bar o la de un banco: por dentro, todas empiezan igual. En esta lección verás esa plantilla parte por parte, cómo crear tu primer archivo, cómo la entiende el navegador (el árbol del DOM) y los errores más típicos al escribirla.

Apréndetela de memoria porque la vas a escribir en cada proyecto:

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

Parte por parte

<!DOCTYPE html> le dice al navegador que el documento está escrito en HTML moderno (HTML5). Va siempre en la primera línea y no tiene etiqueta de cierre.

<html lang="es"> envuelve todo el documento. El atributo lang="es" indica que el contenido está en español; lo usan los buscadores y los lectores de pantalla.

<head> es la cabecera. Contiene información sobre la página que no se ve dentro de ella:

• <meta charset="utf-8"> permite usar tildes, eñes y emojis sin que salgan símbolos raros.
• <meta name="viewport" ...> hace que la página se vea bien en el móvil.
• <title> es el texto de la pestaña del navegador y el título que aparece en Google.

<body> es el cuerpo. Todo lo que se ve en la página va aquí dentro.

Ahora veamos cada parte con más calma.

El doctype y el modo estándar

El doctype parece un simple trámite, pero tiene un efecto importante. Los navegadores tienen dos formas de dibujar una página:

• Modo estándar: siguen las reglas actuales de HTML y CSS.
• Modo quirks (modo peculiaridades): imitan los fallos de los navegadores de los años 90 para que las webs antiguas no se rompan.

Si olvidas el doctype, el navegador entra en modo quirks y algunas cosas de CSS se comportan de forma extraña (por ejemplo, el tamaño de las cajas o el de las tablas). Con <!DOCTYPE html> te aseguras el modo estándar.

Da igual cómo lo escribas en mayúsculas o minúsculas (<!doctype html> también vale), pero no le añadas nada más. Los doctypes largos de versiones antiguas, como el de HTML 4.01, ya no hacen falta.

El elemento raíz: <html>

<html> es el elemento raíz: todos los demás van dentro de él. Solo puede tener dos hijos directos, <head> y <body>, en ese orden.

Su atributo más importante es lang. Además de ayudar a Google y a los lectores de pantalla (que eligen la voz y la pronunciación según el idioma), sirve al navegador para elegir el corrector ortográfico, la separación de palabras con guiones o las comillas adecuadas. Si tu web está en catalán, usa lang="ca"; en inglés, lang="en".

La cabecera: <head>

En el <head> va todo lo que el navegador necesita saber antes de mostrar la página: la codificación, el título, los estilos, los scripts, la descripción para buscadores… Nada de lo que pongas aquí aparece dentro de la página.

Dos consejos rápidos:

• <meta charset="utf-8"> debe ir lo primero dentro del <head>, para que el navegador sepa cómo leer el resto del archivo.
• El <title> debe describir la página en pocas palabras: “Horarios · Gimnasio Olimpo” es mucho mejor que “Página 1”.

Todas las etiquetas del <head> tienen su propia lección: la cabecera de un documento HTML.

El cuerpo: <body>

En el <body> va todo lo visible: textos, imágenes, enlaces, formularios, vídeos… Una página real suele organizar su cuerpo en tres grandes zonas:

<body>
  <header>
    <!-- Logo y menú -->
  </header>

  <main>
    <!-- El contenido principal de esta página -->
  </main>

  <footer>
    <!-- Contacto, aviso legal, redes -->
  </footer>
</body>

Estas etiquetas se llaman semánticas porque dicen qué es cada parte. Las verás a fondo en HTML semántico.

Crea tu primer archivo

1. Crea una carpeta para el proyecto, por ejemplo mi-web.
2. Dentro, crea un archivo llamado index.html. Es el nombre que los servidores buscan por defecto como página principal.
3. Ábrelo con tu editor, copia la plantilla de arriba y guárdalo.
4. Haz doble clic en el archivo: se abrirá en tu navegador.
5. Cambia el texto del <h1>, guarda y recarga el navegador (F5) para ver el cambio.

Consejo: en Visual Studio Code, escribe ! en un archivo .html vacío y pulsa Tab. El editor genera la plantilla completa por ti gracias a Emmet. Revisa después que ponga lang="es" y no lang="en".

Guarda siempre tus archivos con codificación UTF-8, que es la que usan por defecto los editores modernos. Si el archivo está en otra codificación, las tildes saldrán mal aunque tengas el <meta charset>.

Anidar etiquetas

Fíjate en que unas etiquetas van dentro de otras: <title> está dentro de <head>, y <head> dentro de <html>. A esto se le llama anidar.

La regla es sencilla: la última etiqueta que abres es la primera que cierras.

<!-- Bien -->
<p>Esto es <strong>importante</strong>.</p>

<!-- Mal: se cierra p antes que strong -->
<p>Esto es <strong>importante</p></strong>

Las líneas que empiezan por <!-- y terminan en --> son comentarios. El navegador las ignora; sirven para dejarte notas en el código.

Sangría: que se vea la estructura

Al navegador le dan igual los espacios y los saltos de línea entre etiquetas, pero a ti no. Cada vez que abres un elemento que contiene otros, sangra su contenido (2 espacios es lo más habitual):

<!-- Difícil de leer -->
<body><main><h1>Menú del día</h1><ul><li>Lentejas</li><li>Merluza</li></ul></main></body>

<!-- Fácil de leer -->
<body>
  <main>
    <h1>Menú del día</h1>
    <ul>
      <li>Lentejas</li>
      <li>Merluza</li>
    </ul>
  </main>
</body>

Con la sangría ves de un vistazo qué está dentro de qué, y es mucho más fácil detectar una etiqueta sin cerrar.

El árbol del documento (DOM)

Cuando el navegador lee tu HTML, construye en memoria un árbol de elementos llamado DOM (Document Object Model). Para esta página:

<html lang="es">
  <head>
    <title>Biblioteca</title>
  </head>
  <body>
    <h1>Novedades</h1>
    <p>Esta semana han llegado <strong>12 libros</strong>.</p>
  </body>
</html>

El árbol queda así:

html
├── head
│   └── title
│       └── "Biblioteca"
└── body
    ├── h1
    │   └── "Novedades"
    └── p
        ├── "Esta semana han llegado "
        └── strong
            └── "12 libros"

Para hablar del árbol se usa vocabulario familiar:

• Padre: el elemento que contiene a otro. <body> es el padre de <h1>.
• Hijos: los elementos de dentro. <h1> y <p> son hijos de <body>.
• Hermanos: los que tienen el mismo padre. <h1> y <p> son hermanos.
• Descendientes: hijos, nietos, bisnietos… <strong> es descendiente de <body>.

Estos términos aparecen constantemente en CSS (selectores de hijos y descendientes) y en JavaScript, que modifica la página a través del DOM. Puedes ver el árbol de cualquier web con clic derecho → Inspeccionar.

¿Qué pasa si falta algo?

El navegador es muy tolerante. Si olvidas <head> o <body>, los crea por su cuenta; si olvidas cerrar un párrafo, lo cierra él. Por eso una página mal escrita a menudo parece funcionar.

El problema es que el navegador tiene que adivinar lo que querías, y no siempre acierta. Además, lo que “funciona” en un navegador puede verse distinto en otro, o romper tu CSS y tu JavaScript de formas difíciles de entender. Escribe siempre la estructura completa y compruébala con el validador del W3C, como verás en buenas prácticas.

Errores frecuentes

• Olvidar el doctype. La página entra en modo quirks y el CSS se comporta raro.
• Poner contenido visible en el <head>. Un <h1> o un <p> en la cabecera es un error; va en el <body>.
• Escribir dos <body> o dos <head>. Solo puede haber uno de cada.
• Dejar lang="en" en una página en español porque el editor lo puso así.
• Nombrar el archivo Index.HTML o mi pagina.html. Usa minúsculas y sin espacios: index.html, mi-pagina.html.
• Cerrar las etiquetas en mal orden. Recuerda: la última que abres es la primera que cierras.

Resumen

Parte	Qué hace
<!DOCTYPE html>	Activa el modo estándar de HTML5. Primera línea
<html lang="es">	Elemento raíz; indica el idioma
<head>	Información sobre la página (no se ve)
<meta charset="utf-8">	Codificación; lo primero del <head>
<meta name="viewport">	Adaptación al móvil
<title>	Título de la pestaña y de Google
<body>	Todo el contenido visible
DOM	Árbol de elementos que construye el navegador

Con esta estructura ya puedes empezar cualquier página. En la siguiente lección verás en detalle las piezas con las que se construye todo lo demás: elementos, etiquetas y atributos.

<body>
  <h1>Novedades</h1>
  <p>Han llegado <strong>12 libros</strong>.</p>
</body>

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Gimnasio Olimpo</title>
    <h1>Bienvenido</h1>
  </head>
  <body>
    <p>Abrimos todos los días.</p>
  </body>
</html>