1) Estructura raíz

Código completo del documento (izquierda) y representación estructural (derecha) con colores relacionados.

Leyenda (etiqueta → color)

!DOCTYPE html head body

<!DOCTYPE html>
<html lang="es">

  <head>
    <meta charset="utf-8">
    <title>Estructura base</title>
  </head>

  <body>
    <header>
      <h1>Título principal</h1>
    </header>

    <main>
      <p>Contenido visible del sitio</p>
    </main>

    <footer>
      <small>© 2026</small>
    </footer>
  </body>

</html>

!DOCTYPE
└─ html
   ├─ head
   └─ body

Vista estructural

Representación visual jerárquica del documento HTML.

<!DOCTYPE html>

<html>

<head>

meta
title

<body>

header

main

footer