10 min HTML

Estructura de un documento

En la lección anterior creaste tu primer archivo HTML y funcionó. Pero ¿qué hace exactamente cada línea? ¿Por qué está el <!DOCTYPE html> ahí arriba? ¿Qué va dentro de <head> y qué dentro de <body>?

En esta lección vas a entender la anatomía completa de un documento HTML. Cuando termines, cada línea tendrá sentido.

El esqueleto de cualquier página web

Toda página HTML tiene esta estructura. Sin excepciones:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GameTracker — Tu colección de videojuegos</title>
</head>
<body>
    <h1>GameTracker</h1>
    <p>Organiza tu colección de videojuegos en un solo lugar.</p>
</body>
</html>

Vamos línea por línea.

<!DOCTYPE html>

Esta línea le dice al navegador: "este documento es HTML5". Sin ella, el navegador podría renderizar la página en modo quirks (un modo de compatibilidad antiguo que interpreta el CSS de formas raras).

Siempre va en la primera línea, antes de todo.
No es una etiqueta HTML, es una declaración.
No tiene etiqueta de cierre.
En HTML5 es así de simple. En versiones anteriores (XHTML, HTML 4) era una línea larguísima e imposible de recordar.

<html lang="es">

La etiqueta <html> es el contenedor raíz de todo el documento. Todo el HTML va dentro de ella.

El atributo lang="es" indica el idioma del contenido. Esto es importante para:

Lectores de pantalla: saben en qué idioma pronunciar el texto.
Traductores automáticos: Google Translate sabe que la página ya está en español.
SEO: los buscadores indexan el contenido en el idioma correcto.

Usa lang="es" para español, lang="en" para inglés, lang="pt" para portugués, etc.

<head>: lo que el usuario no ve

El <head> contiene metadatos: información sobre la página que no se muestra en pantalla, pero que el navegador, los buscadores y las redes sociales necesitan.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GameTracker — Tu colección de videojuegos</title>
    <meta name="description" content="Organiza y descubre videojuegos. Tu biblioteca personal.">
    <link rel="stylesheet" href="estilos.css">
</head>

meta charset="UTF-8"

Define la codificación de caracteres. UTF-8 soporta todos los caracteres del mundo: acentos (á, é, ñ), emojis (🎮), caracteres japoneses (日本語), árabe, y todo lo demás.

Sin esta línea, las tildes y caracteres especiales podrían verse como Ã© o â€". Siempre ponla.

meta name="viewport"

Esta meta tag le dice al navegador móvil: "el ancho de la página es el ancho de la pantalla del dispositivo". Sin ella, los móviles renderizan la página como si fuera un monitor de escritorio y luego la encogen, haciendo todo diminuto.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width: ancho = ancho del dispositivo.
initial-scale=1.0: zoom inicial al 100%.

Es obligatoria para que tu web se vea bien en móviles. Siempre la necesitas.

<title>

El texto que aparece en la pestaña del navegador, en los resultados de Google y cuando alguien comparte tu página. Es probablemente la etiqueta de SEO más importante de toda la página.

<title>GameTracker — Tu colección de videojuegos</title>

Consejos para un buen title:

Máximo 60 caracteres (lo que muestra Google).
Incluye la palabra clave principal.
Que sea descriptivo y atractivo.

<body>: lo que el usuario sí ve

Todo lo que aparece en pantalla va dentro del <body>: textos, imágenes, formularios, vídeos, botones... todo.

<body>
    <h1>GameTracker</h1>
    <p>Tu colección de videojuegos organizada en un solo lugar.</p>

    <h2>Juegos que estás jugando</h2>
    <ul>
        <li>The Legend of Zelda: Tears of the Kingdom</li>
        <li>Baldur's Gate 3</li>
        <li>Cyberpunk 2077: Phantom Liberty</li>
    </ul>

    <h2>Juegos completados</h2>
    <ol>
        <li>Elden Ring — 120 horas</li>
        <li>Hollow Knight — 45 horas</li>
        <li>Celeste — 12 horas</li>
    </ol>
</body>

El <body> es donde vas a pasar el 90% de tu tiempo escribiendo HTML. Todo el contenido visible de la web vive aquí.

Estructura completa de un proyecto real

Vamos a montar la estructura de un proyecto que se parece a algo real: una app de seguimiento de series que estás viendo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SeriesLog — Controla las series que estás viendo</title>
    <meta name="description" content="Lleva un registro de las series que ves, las que quieres ver y las que has completado.">
</head>
<body>
    <h1>SeriesLog</h1>
    <p>Tu diario personal de series. Sin spoilers.</p>

    <h2>Viendo ahora</h2>
    <ul>
        <li>Severance — Temporada 2, Episodio 7</li>
        <li>The Last of Us — Temporada 2, Episodio 3</li>
    </ul>

    <h2>En la cola</h2>
    <ul>
        <li>Shogun — Temporada 1</li>
        <li>Fallout — Temporada 1</li>
        <li>3 Body Problem — Temporada 1</li>
    </ul>

    <h2>Completadas este año</h2>
    <ol>
        <li>True Detective: Night Country</li>
        <li>The Bear — Temporada 3</li>
    </ol>
</body>
</html>

Fíjate cómo solo con <h1>, <h2>, <p>, <ul> y <ol> ya tienes una página con estructura clara. No necesitas CSS para que el contenido tenga sentido. Eso es buen HTML.

Errores comunes

Error	Consecuencia
Olvidar `<!DOCTYPE html>`	Modo quirks: el CSS se comporta de formas inesperadas
No poner `charset="UTF-8"`	Tildes y caracteres especiales rotos
No incluir `viewport`	La página se ve diminuta en móviles
No poner `lang`	Lectores de pantalla pueden pronunciar en el idioma equivocado
Dejar el `<title>` vacío	La pestaña muestra la ruta del archivo, SEO desastroso

Crea un archivo series-log.html con la estructura completa de un tracker de series personalizado. Debe incluir:

<!DOCTYPE html> + <html lang="es">
<head> con charset, viewport, title y meta description
<body> con al menos 3 secciones: "Viendo ahora", "Pendientes" y "Favoritas de todos los tiempos"
Usa tus series reales. Si no ves series, usa películas o anime.

Abre el archivo en el navegador y verifica que la pestaña muestra el title correcto.

Pistas

Copia la estructura base de esta lección y modifica el contenido. Asegúrate de que el <title> sea descriptivo y tenga menos de 60 caracteres.

Anterior ¿Qué es HTML?

Siguiente Etiquetas de texto