Estructura base de un documento

Aprende a construir el esqueleto completo de cualquier página HTML con DOCTYPE, html, head y body.

📖

Teoría

Todo documento HTML válido sigue una estructura fija. Esta estructura no es opcional — es el marco que los navegadores esperan encontrar para procesar correctamente tu página.

Los cuatro componentes esenciales son:

<!DOCTYPE html> → Declara la versión de HTML (HTML5)

<html> → Elemento raíz que envuelve todo

<head> → Metadatos (información sobre la página, no visible)

<body> → Contenido visible de la página

html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página completa</title>
  </head>
  <body>
    <h1>¡Hola desde el body!</h1>
    <p>Todo lo visible va aquí dentro.</p>
  </body>
</html>

💡El atributo lang

El atributo lang="es" en la etiqueta <html> le indica al navegador y a los lectores de pantalla que el contenido está en español. Esto mejora la accesibilidad y el SEO. Usa lang="es" para español latinoamericano.

⚠️charset UTF-8

Siempre incluye <meta charset="UTF-8"> como primera línea dentro de <head>. Sin esto, caracteres especiales como tildes (á, é, í, ó, ú) y la ñ pueden no mostrarse correctamente.

⚡

Ejercicio práctico

🎯 Tu misión

Construye el esqueleto HTML completo de una página. Debe incluir: DOCTYPE, html con lang="es", head con charset, viewport y un título, y body con un h1 y un párrafo de bienvenida.

Vista previa

←Capítulo anterior

Siguiente capítulo→