<title>
Metadata del documento
Título del documento HTML. Aparece en la pestaña del navegador, en los marcadores y en los resultados de búsqueda. Es el único elemento obligatorio dentro de <head> y debe ser único por documento.
<title> es el único elemento obligatorio dentro de <head>. Define el título del documento HTML — el texto que aparece en la pestaña del navegador, en los marcadores, y como el enlace principal cuando el resultado de la página aparece en un motor de búsqueda. No es contenido visible en el cuerpo de la página, sino metadata del documento: el navegador lo lee y lo usa para nombrar la página en todos los contextos donde la página necesita ser identificada.
A diferencia de los elementos del <body>, <title> no renderiza nada en el área de contenido de la página. Su efecto es indirecto pero ubicuo: cada vez que el usuario abre una nueva pestaña, guarda la página en favoritos, o la comparte por mensaje, el <title> es lo que identifica esa página. En una aplicación con muchas pestañas abiertas, el título es la única información visible para cada pestaña — un título como “Página de inicio” o “Untitled” hace que el usuario no pueda distinguirla de las demás. Un buen título resuelve ese problema inmediatamente.
Para SEO (optimización para motores de búsqueda), <title> es el factor de relevancia on-page más importante. Los motores lo usan como el enlace principal del resultado de búsqueda (el texto en azul clickeable en Google). Una descripción precisa y concisa (50–60 caracteres es la longitud que se muestra completa en Google sin truncarse) aumenta el porcentaje de clics. El patrón recomendado en la industria es “Descripción específica de la página — Nombre del sitio”.
Cómo funciona
El navegador lee el contenido de <title> antes de renderizar el cuerpo de la página. Lo muestra en la barra de pestañas inmediatamente. Los motores de búsqueda lo indexan como el nombre canónico de la página. No admite elementos HTML anidados — su contenido es exclusivamente texto plano (aunque entidades HTML como & o — sí son válidas y se interpretan correctamente).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Café Aroma — Café de especialidad en el centro</title>
</head>
<body>
<h1>Bienvenidos a Café Aroma</h1>
</body>
</html><title> no tiene efecto visible en la página — no aparece en el <body>. El <h1> de la página es el título visible dentro del contenido; <title> es el nombre del documento para el navegador y los buscadores. Los dos suelen compartir información, pero no son lo mismo.
Modelo de contenido
<title> contiene solo texto (text content, no elementos HTML). No puede tener hijos que no sean texto plano — no <strong>, no <em>, no elementos de ningún tipo. Si se ponen etiquetas HTML dentro, se ven como texto literal en la pestaña del navegador.
Va exclusivamente dentro de <head>. Debe haber exactamente uno por documento.
Atributos
<title> no tiene atributos propios. Acepta atributos globales aunque en la práctica nunca se usan.
Cuándo usar qué tipo de título
| Contexto | Patrón recomendado | Longitud ideal |
|---|---|---|
| Página principal del sitio | ”Nombre del sitio — descripción breve” | 40–60 caracteres |
| Página interior | ”Descripción específica — Nombre del sitio” | 50–60 caracteres |
| Artículo o post | ”Título del artículo — Nombre del sitio” | 50–60 caracteres |
| Aplicación web | ”Nombre de la sección — App” | 30–50 caracteres |
El límite práctico de ~60 caracteres no es técnico sino visual: Google trunca los títulos más largos en los resultados de búsqueda. En la pestaña, el título puede ser tan largo como se quiera — el navegador trunca visualmente si la pestaña es angosta.
Notas, gotchas e interacción
- Sin
<title>, el documento es técnicamente inválido. El navegador lo tolera (muestra la URL como título o “Sin título”), pero es un error de estructura. Toda página debe tener<title>. - Múltiples
<title>en un documento es un error. Si hay más de uno, el navegador usa el primero. El comportamiento es indefinido y varía. - No poner etiquetas HTML dentro de
<title>.<title><strong>Café</strong> Aroma</title>muestra<strong>Café</strong> Aromaliteralmente en la pestaña. - Las aplicaciones de página única (SPA) actualizan
<title>con JavaScript (document.title = "Nueva sección — App") para mantener el título sincronizado con la vista actual — útil para navegación con el historial del navegador y para lectores de pantalla que anuncian el cambio de título. - Diferencia con
<h1>: el<title>nombra el documento para el navegador y buscadores; el<h1>es el título principal visible del contenido para el usuario. Se recomienda que compartan la misma información de forma coherente, pero no deben ser idénticos necesariamente.
Vigente / legacy
<title> es completamente vigente y obligatorio desde las primeras versiones de HTML. No tiene forma legacy ni alternativa; es el único mecanismo estándar para definir el título del documento.
Aprendelo en el recorrido
Esta entrada complementa las lecciones Los elementos del head y El head canónico completo del módulo Metadata, donde <title> se practica como el primer elemento obligatorio del <head>.