El documento y sus metadatos

El esqueleto de toda página y lo que va en <head>.

<html>: La raíz del documento.

<head>: La cabecera del documento.

<title>: El título del documento.

<meta>: Metadatos que no tienen elemento propio.

  • El esqueleto de toda página y lo que va en <head>: información para el navegador y los buscadores que no se ve en la página.
  • Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
  • Esencial. La raíz del documento: contiene todo lo demás. Lleva el idioma de la página en lang, que usan los lectores de pantalla y los traductores.
  • 📌 Nota. Delante va siempre <!DOCTYPE html>: avisa de que es HTML moderno.
  • Esencial. La cabecera del documento: metadatos, título, hojas de estilo y scripts. Nada de lo que hay aquí se ve en la página.

Introducción

El esqueleto de toda página y lo que va en <head>: información para el navegador y los buscadores que no se ve en la página.

Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.

<html>

Esencial. La raíz del documento: contiene todo lo demás. Lleva el idioma de la página en lang, que usan los lectores de pantalla y los traductores.

📌 Nota. Delante va siempre <!DOCTYPE html>: avisa de que es HTML moderno.

<head>

Esencial. La cabecera del documento: metadatos, título, hojas de estilo y scripts. Nada de lo que hay aquí se ve en la página.

<title>

Esencial. El título del documento: sale en la pestaña del navegador, en los marcadores y en los resultados de los buscadores. Uno por página, corto y distinto en cada página.

<meta>

Esencial. Metadatos que no tienen elemento propio: la codificación de caracteres, la vista en móvil, la descripción para buscadores… Es un elemento vacío.

Valores: charset, name + content, property (Open Graph)

<link>

Esencial. Relaciona el documento con otro recurso. Sobre todo, enlaza la hoja de estilos y el icono de la pestaña (favicon). Es un elemento vacío.

Valores: rel (stylesheet, icon, preload…), href

<style>

CSS escrito dentro del propio HTML. Sirve para pruebas; en un sitio real, el CSS va en un fichero aparte enlazado con <link>.

<script>

Esencial. Código JavaScript, escrito dentro o en un fichero aparte con src. Con defer se ejecuta cuando la página está lista, sin bloquearla.

Valores: src, defer, type="module"

📌 Nota. En tus páginas: <script src="js/main.js" defer></script> en el <head>.

<noscript>

Lo que se muestra solo si el navegador tiene JavaScript desactivado.

<base>

La dirección base para todas las rutas relativas del documento. Uno como mucho, en <head>. Se usa poco: cambia el sentido de todos los enlaces.

<body>

Esencial. El cuerpo del documento: todo lo que se ve en la página. Solo hay uno, justo después de <head>.

Referencia de HTML
01

El documento y sus metadatos

El esqueleto de toda página y lo que va en <head>.

Código del tema: <!DOCTYPE html>

📘 Teoría

Introducción

1

El esqueleto de toda página y lo que va en <head>: información para el navegador y los buscadores que no se ve en la página.

2

Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.

<html>

1

Esencial. La raíz del documento: contiene todo lo demás. Lleva el idioma de la página en lang, que usan los lectores de pantalla y los traductores.

2

📌 Nota. Delante va siempre <!DOCTYPE html>: avisa de que es HTML moderno.

<head>

Esencial. La cabecera del documento: metadatos, título, hojas de estilo y scripts. Nada de lo que hay aquí se ve en la página.

<title>

Esencial. El título del documento: sale en la pestaña del navegador, en los marcadores y en los resultados de los buscadores. Uno por página, corto y distinto en cada página.

<meta>

1

Esencial. Metadatos que no tienen elemento propio: la codificación de caracteres, la vista en móvil, la descripción para buscadores… Es un elemento vacío.

2

Valores: charset, name + content, property (Open Graph)

<style>

CSS escrito dentro del propio HTML. Sirve para pruebas; en un sitio real, el CSS va en un fichero aparte enlazado con <link>.

<script>

1

Esencial. Código JavaScript, escrito dentro o en un fichero aparte con src. Con defer se ejecuta cuando la página está lista, sin bloquearla.

2

Valores: src, defer, type="module"

3

📌 Nota. En tus páginas: <script src="js/main.js" defer></script> en el <head>.

<noscript>

Lo que se muestra solo si el navegador tiene JavaScript desactivado.

<base>

La dirección base para todas las rutas relativas del documento. Uno como mucho, en <head>. Se usa poco: cambia el sentido de todos los enlaces.

<body>

Esencial. El cuerpo del documento: todo lo que se ve en la página. Solo hay uno, justo después de <head>.

🕹️ Practica

Referencia interactiva Ejemplos editables: El documento y sus metadatos Abrir en pantalla completa

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com