Docs HTML exécutables : Balise title

Q: Comment changer le titre de la page en JavaScript ?

Affectez une valeur à document.title, par exemple document.title = '(3) Inbox'. Le navigateur met à jour l'onglet immédiatement, c'est ainsi que les applications web affichent le nombre de messages non lus.

Q: La balise title est-elle la même chose que l'attribut title ?

Non. L'élément nomme toute la page. L'attribut title, qui fonctionne sur presque tous les éléments, ajoute une infobulle qui apparaît au survol de cet élément.

Où placer la balise title

Chaque page a besoin d'un élément <title> dans <head>. Son texte est le nom de la page que les navigateurs affichent dans l'onglet et les favoris, et que les moteurs de recherche affichent généralement comme titre du résultat :

<!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>

Le titre lui-même n'apparaît jamais dans la page. Cet aperçu s'exécute aussi dans la page de documentation de Coddy, donc l'onglet de votre navigateur garde le titre de la documentation ; le petit script affiche ce que montrerait un onglet si vous ouvriez l'exemple dans son propre fichier. Modifiez le texte de <title> et la ligne se met à jour.

Écrire un bon titre

Le titre est souvent la première chose qu'une personne lit à propos de votre page, dans un résultat de recherche ou une rangée d'onglets. Quelques règles couvrent la plupart des pages :

Soyez précis et unique. Chaque page d'un site doit avoir son propre titre qui décrit cette page : « Recette des cookies aux pépites de chocolat », pas « Accueil » ni « Page 1 ».
Placez les mots importants en premier. Les onglets sont étroits et les résultats de recherche coupent les titres longs. Gardez l'expression clé dans les 50 à 60 premiers caractères environ.
Ajoutez le nom du site à la fin, séparé par | ou :, pour que le sujet de la page reste en premier.
Écrivez pour les gens. Un titre bourré de mots-clés répétés ressemble à du spam, et les moteurs de recherche peuvent le réécrire.

Cet onglet factice coupe le titre à peu près à la largeur d'un vrai onglet. Essayez un titre plus court ou plus long :

<!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>

Avec le nom du site à la fin, un onglet coupé montre quand même le sujet de la page. Inversez l'ordre (« Bake Club | How to... ») et tous les onglets de votre site commenceraient par les deux mêmes mots.

Balise title, h1 ou attribut title

	Où	Affiché	Rôle
`<title>`	Dans `<head>`, une fois	Onglet, favoris, résultats de recherche	Nomme la page
`<h1>`	Dans `<body>`	Sur la page	Titre principal visible
Attribut `title="..."`	Sur n'importe quel élément	Infobulle au survol	Indication supplémentaire sur cet élément

Le title et le <h1> ont généralement le même sens, mais le title peut être formulé pour la recherche et porter le nom du site, tandis que le titre visible peut être plus court. L'attribut title n'a aucun rapport, malgré son nom. Survolez le mot souligné :

<!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>

Les infobulles de l'attribut title n'apparaissent pas sur les écrans tactiles et ne sont pas lues de façon fiable par les lecteurs d'écran, donc n'y mettez pas d'information importante uniquement à cet endroit.

Seul du texte va dans un title

Le navigateur lit tout ce qui se trouve entre <title> et </title> comme du texte brut. Les balises ne sont pas interprétées, mais les références de caractères comme & sont décodées, et les suites d'espaces sont réduites à une seule :

<!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>

Le résultat est Salt & Pepper <b>Bold?</b> : l'entité est devenue &, les trois espaces sont devenus un seul, et les balises <b> sont restées comme caractères littéraux. Aucune mise en valeur n'est possible dans un title.

Changer le titre en JavaScript

document.title peut être lu et modifié. Les applications web s'en servent pour afficher le nombre de non-lus ou l'état actuel dans l'onglet :

<!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>

Sur une vraie page, l'onglet du navigateur change au même moment que l'onglet factice ici. Les moteurs de recherche qui exécutent le JavaScript peuvent voir un titre défini par script, mais un titre écrit dans le HTML est le choix fiable pour tout ce qui doit être indexé.

Erreurs fréquentes

Aucun titre. Le navigateur se rabat sur l'URL ou le nom du fichier, et la page est du HTML invalide. Ajoutez-en un à chaque page, à côté de la balise meta viewport dans votre template.
Le même titre sur toutes les pages. Les onglets, les favoris et les résultats de recherche deviennent impossibles à distinguer.
Mettre <title> dans <body>. Les navigateurs l'utilisent quand même, mais il a sa place dans <head>, et certains outils ne le verront pas.
Deux éléments <title>. Seul le premier compte. Supprimez les autres.
Commencer chaque titre par le nom du site. Commencez par le sujet de la page ; le nom du site va à la fin.

Questions fréquentes

Qu'est-ce que la balise title en HTML ?

<title> définit le nom de la page. Les navigateurs l'affichent dans l'onglet et dans les favoris, et les moteurs de recherche l'affichent généralement comme titre cliquable du résultat. Elle se place dans <head> et ne contient que du texte.

Quelle longueur doit avoir une balise title ?

Les moteurs de recherche coupent les titres longs selon la largeur d'affichage, alors gardez les mots importants dans les 50 à 60 premiers caractères environ. Le HTML n'impose aucune limite, mais tout ce qui dépasse peut être caché derrière des points de suspension.

Quelle est la différence entre la balise title et h1 ?

<title> est une métadonnée : il nomme la page dans les onglets et les résultats de recherche et n'apparaît pas dans la page elle-même. <h1> est le titre principal visible dans le body. Ils disent souvent des choses proches, mais le title peut ajouter le nom du site et être formulé pour la recherche.

Peut-on mettre des balises HTML dans la balise title ?

Non. L'élément title ne contient que du texte. Les balises à l'intérieur s'affichent telles quelles, donc <title>A <b>B</b></title> donne un onglet qui affiche « A <b>B</b> ». Les références de caractères comme & fonctionnent.

Comment changer le titre de la page en JavaScript ?

Affectez une valeur à document.title, par exemple document.title = '(3) Inbox'. Le navigateur met à jour l'onglet immédiatement, c'est ainsi que les applications web affichent le nombre de messages non lus.

La balise title est-elle la même chose que l'attribut title ?

Non. L'élément <title> nomme toute la page. L'attribut title, qui fonctionne sur presque tous les éléments, ajoute une infobulle qui apparaît au survol de cet élément.

Concepts liés