Etiqueta title en HTML: título de la página y pestaña

La etiqueta <title> define el título del documento, que el navegador utiliza en la pestaña, el historial y los marcadores. Úsala en cada página para que una persona pueda reconocerla incluso después de abandonar el sitio: «Inscripción al curso de HTML | Aula Web» identifica mejor su destino que «Inicio». Este título pertenece a los metadatos y no crea un encabezado visible dentro de la página. HTML Living Standard: <title>.

Ejemplo mínimo: cambiar el título de la pestaña

Guarda este documento como title-minimo.html con codificación UTF-8 y ábrelo en el navegador:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Curso de HTML para principiantes | Aula Web</title>
  </head>
  <body>
    <p>Aprende a escribir tu primera página.</p>
  </body>
</html>

La pestaña recibe «Curso de HTML para principiantes | Aula Web», aunque puede recortarlo por falta de espacio. Dentro de la página solo aparece el párrafo: no hay un encabezado generado por <title>. Al crear un marcador, el navegador suele proponer ese título como nombre; puedes editarlo. Este ejemplo no necesita CSS, JavaScript ni servidor.

Sintaxis y contexto válido

Escribe <title>Texto del título</title> dentro de <head>. Las etiquetas de apertura y cierre no se pueden omitir. Su contenido es texto y debe incluir algo más que espacios: <title></title> no proporciona un título válido.

No coloques <title> en <body> ni introduzcas <strong> u otras etiquetas para darle formato. En HTML, esas marcas dentro del título se interpretan como texto, no como elementos que producen negrita. Para escribir caracteres especiales, usa referencias como & para & y < para <.

Una página HTML habitual requiere exactamente un <title>. El estándar permite omitirlo en documentos de iframe definidos mediante srcdoc y cuando un protocolo superior ya aporta el título, como el asunto de un correo HTML. Estas excepciones no permiten duplicarlo y no justifican retirarlo de una página web normal. Modelo de contenido de <head>.

Diferencia entre title, h1 y el atributo title

Por ejemplo, en <abbr title="HyperText Markup Language">HTML</abbr>, title es un atributo que amplía la abreviatura. No cambia el nombre de la pestaña. Tampoco conviene usar esa ayuda como única fuente de instrucciones: su acceso depende del dispositivo y de la forma de interacción. Atributo global title.

El título del documento y el encabezado pueden diferir. El primero necesita contexto para entenderse en un marcador; el segundo puede ser más breve porque la página ya aporta ese contexto. Para organizar los encabezados del contenido, consulta la guía de <h1> a <h6>.

Caso práctico: un curso y su inscripción

Prepara dos archivos UTF-8 en la misma carpeta. Ambos funcionan al abrirlos directamente y sus enlaces permiten pasar de una página a otra.

Archivo curso.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Curso de HTML para principiantes | Aula Web</title>
  </head>
  <body>
    <h1>Tu primer curso de HTML</h1>
    <p>Practica la estructura, los enlaces y las imágenes de una página.</p>
    <a href="inscripcion.html">Consultar la inscripción al curso</a>
  </body>
</html>

Archivo inscripcion.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Inscripción al curso de HTML | Aula Web</title>
  </head>
  <body>
    <h1>Inscríbete en el curso de HTML</h1>
    <p>Esta página de ejemplo explica la inscripción; no registra datos.</p>
    <a href="curso.html">Volver a la presentación del curso</a>
  </body>
</html>

El resultado distingue tanto las pestañas como los encabezados:

1. Abre curso.html y compara la pestaña con el encabezado.
2. Pulsa Tab hasta enfocar el enlace y Enter para visitar la inscripción. Cambian el documento, su título y su contenido.
3. Cambia únicamente el texto de <title> en inscripcion.html, guarda y recarga. Cambia la pestaña; el <h1> conserva su texto.
4. Como prueba de un error deliberado, retira todo el elemento <title> y recarga. El cuerpo sigue apareciendo, pero ya no has proporcionado un título: el navegador puede recurrir al nombre del archivo o a su dirección. No sustituye automáticamente el título por el <h1>. Restaura el elemento al terminar.

No hay scripts ni recursos externos: con JavaScript desactivado, los documentos y la navegación por teclado siguen funcionando.

Cómo escribir un título útil

Describe el tema o la tarea concreta de cada página y añade el nombre del sitio si ayuda a reconocerla. Coloca pronto la información distintiva; repetir «Inicio» o una larga lista de palabras clave en todo el sitio dificulta elegir entre pestañas.

Mantén coherencia con el contenido visible. No anuncies una inscripción si el documento solo contiene el temario, ni conserves una fecha que ya no corresponde. El título debe resultar comprensible por sí mismo.

HTML no fija una longitud máxima que garantice la presentación completa. Google puede recortar el enlace de título según el espacio disponible y generar un texto diferente a partir de encabezados u otras fuentes. Escribir un buen <title> no garantiza posiciones ni que un buscador lo copie exactamente. Documentación de Google sobre enlaces de título.

Atributos y accesibilidad

<title> no tiene atributos específicos; admite atributos globales, como id, lang y dir. Para el ejemplo básico basta su texto. El atributo global title de otros elementos no es una alternativa al elemento <title>.

Tampoco existe una propiedad CSS que establezca el título de la pestaña. En JavaScript, document.title es una propiedad DOM que permite consultarlo o cambiarlo; no es un atributo HTML. Modificarla no modifica el <h1>. Referencia de document.title.

Un título descriptivo ayuda a identificar ventanas y a orientarse al navegar con tecnologías de asistencia. No exige añadir un rol ARIA ni reemplaza un encabezado visible. El anuncio concreto depende del navegador y del lector de pantalla. W3C: páginas con un título que describe su tema o propósito.

Dudas y errores frecuentes

¿Title se muestra dentro de la página? No aparece como contenido visible de forma predeterminada. Para un encabezado, usa <h1> u otro nivel apropiado; para nombrar la pestaña, usa <title>.

¿Por qué no cambia la pestaña? Comprueba que estás editando el archivo abierto, guarda y recarga. Después revisa que haya un único <title> dentro de <head> y que esté cerrado. Si la página usa JavaScript, comprueba también si un script sobrescribe document.title después de cargarla.

¿Google mostrará exactamente mi title? Puede elegir otro texto. La pestaña del navegador y el enlace de título de un resultado de búsqueda corresponden a consumidores distintos del documento.

¿Puede una meta reemplazarlo? No. Una descripción mediante <meta> aporta otro metadato; no sustituye el título del documento.

Compatibilidad y fuentes

El elemento <title> tiene soporte amplio en los navegadores actuales y no necesita una biblioteca ni JavaScript para su función básica. La presentación de la pestaña, su recorte y el nombre propuesto para un marcador dependen de la interfaz del navegador. MDN: <title> y compatibilidad.

Fuentes consultadas el 4 de octubre de 2026: HTML Living Standard para sintaxis y restricciones, MDN para explicación y soporte, W3C para accesibilidad y Google para el comportamiento de sus enlaces de título.