Docs ejecutables de HTML: Etiqueta title

Q: ¿Cómo cambio el título de la página con JavaScript?

Asigna un valor a document.title, por ejemplo document.title = '(3) Inbox'. El navegador actualiza la pestaña al momento, que es como las aplicaciones web muestran los mensajes sin leer.

Q: ¿La etiqueta title es lo mismo que el atributo title?

No. El elemento da nombre a toda la página. El atributo title, que funciona en casi cualquier elemento, añade un texto de ayuda que aparece al pasar el ratón por ese elemento.

Dónde va la etiqueta title

Toda página necesita un elemento <title> dentro de <head>. Su texto es el nombre de la página que los navegadores muestran en la pestaña y en los marcadores, y que los buscadores suelen mostrar como titular del resultado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

El título en sí nunca aparece dentro de la página. Esta vista previa también se ejecuta dentro de la página de documentación de Coddy, así que la pestaña de tu navegador sigue mostrando el título de la documentación; el pequeño script imprime lo que mostraría una pestaña si abrieras el ejemplo como archivo propio. Edita el texto de <title> y la línea se actualiza.

Escribir un buen título

El título suele ser lo primero que una persona lee de tu página, en un resultado de búsqueda o en una fila de pestañas. Unas pocas reglas cubren la mayoría de las páginas:

Sé concreto y único. Cada página de un sitio debe tener su propio título que la describa: "Receta de galletas con chispas de chocolate", no "Inicio" ni "Página 1".
Pon primero las palabras importantes. Las pestañas son estrechas y los resultados de búsqueda cortan los títulos largos. Mantén la frase clave dentro de los primeros 50 a 60 caracteres aproximadamente.
Añade el nombre del sitio al final, separado por | o :, para que el tema de la página vaya primero.
Escríbelo para personas. Un título lleno de palabras clave repetidas parece spam, y los buscadores pueden reescribirlo.

Esta pestaña simulada recorta el título más o menos al ancho de una pestaña real. Prueba un título más corto o más largo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

Con el nombre del sitio al final, una pestaña recortada sigue mostrando de qué trata la página. Invierte el orden ("Bake Club | How to...") y todas las pestañas de tu sitio empezarían con las mismas dos palabras.

Etiqueta title vs h1 vs el atributo title

	Dónde	Se muestra	Función
`<title>`	En `<head>`, una vez	Pestaña, marcadores, resultados de búsqueda	Da nombre a la página
`<h1>`	En `<body>`	En la página	Encabezado principal visible
Atributo `title="..."`	En cualquier elemento	Texto de ayuda al pasar el ratón	Pista extra sobre ese elemento

El title y el <h1> suelen coincidir en el significado, pero el title puede redactarse para la búsqueda y llevar el nombre del sitio, mientras que el encabezado puede ser más corto. El atributo title no tiene relación, pese al nombre. Pasa el ratón por la palabra subrayada:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

Los textos de ayuda del atributo title no aparecen en pantallas táctiles y los lectores de pantalla no los leen de forma fiable, así que no pongas información importante solo ahí.

En un title solo va texto

El navegador lee todo lo que hay entre <title> y </title> como texto plano. Las etiquetas no se interpretan, pero las referencias de caracteres como & sí se decodifican, y las series de espacios en blanco se juntan en un solo espacio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

El resultado es Salt & Pepper <b>Bold?</b>: la entidad se convirtió en &, los tres espacios en uno, y las etiquetas <b> se quedaron como caracteres literales. En un title no se puede dar énfasis.

Cambiar el título con JavaScript

document.title se puede leer y escribir. Las aplicaciones web lo usan para mostrar mensajes sin leer o el estado actual en la pestaña:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

En una página real, la pestaña del navegador cambia en el mismo momento que la pestaña simulada de aquí. Los buscadores que ejecutan JavaScript pueden ver un título puesto por un script, pero un título escrito en el HTML es la opción fiable para todo lo que deba indexarse.

Errores comunes

No tener title. El navegador recurre a la URL o al nombre del archivo, y la página es HTML no válido. Añade uno a cada página, junto a la etiqueta meta viewport en tu plantilla.
El mismo título en todas las páginas. Las pestañas, los marcadores y los resultados de búsqueda se vuelven imposibles de distinguir.
Poner <title> en <body>. Los navegadores lo usan igualmente, pero va en <head>, y algunas herramientas no lo encontrarán.
Dos elementos <title>. Solo cuenta el primero. Quita los demás.
Empezar cada título con el nombre del sitio. Empieza por el tema de la página; el nombre del sitio va al final.

Preguntas frecuentes

¿Qué es la etiqueta title en HTML?

<title> fija el nombre de la página. Los navegadores lo muestran en la pestaña y en los marcadores, y los buscadores suelen mostrarlo como el titular en el que se hace clic en el resultado. Va dentro de <head> y solo contiene texto.

¿Qué longitud debe tener la etiqueta title?

Los buscadores cortan los títulos largos según el ancho en pantalla, así que mantén las palabras importantes dentro de los primeros 50 a 60 caracteres aproximadamente. HTML no tiene un límite estricto, pero lo que pase de ese punto puede quedar oculto tras unos puntos suspensivos.

¿Qué diferencia hay entre la etiqueta title y h1?

<title> son metadatos: da nombre a la página en las pestañas y en los resultados de búsqueda y no se muestra dentro de la página. <h1> es el encabezado principal visible del body. A menudo dicen cosas parecidas, pero el title puede añadir el nombre del sitio y estar redactado para la búsqueda.

¿Puedo poner etiquetas HTML dentro de la etiqueta title?

No. El elemento title solo contiene texto. Las etiquetas que haya dentro se muestran literalmente, así que <title>A <b>B</b></title> da una pestaña que dice "A <b>B</b>". Las referencias de caracteres como & sí funcionan.

¿Cómo cambio el título de la página con JavaScript?

Asigna un valor a document.title, por ejemplo document.title = '(3) Inbox'. El navegador actualiza la pestaña al momento, que es como las aplicaciones web muestran los mensajes sin leer.

¿La etiqueta title es lo mismo que el atributo title?

No. El elemento <title> da nombre a toda la página. El atributo title, que funciona en casi cualquier elemento, añade un texto de ayuda que aparece al pasar el ratón por ese elemento.

Conceptos relacionados