---
title: '<title> : l''élément de titre du document'
slug: Web/HTML/Element/title
tags:
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/title
---
<div>{{HTMLRef}}</div>

<p>L'élément <strong><code>&lt;title&gt;</code></strong> définit le titre du document (qui est affiché dans la barre de titre du navigateur ou dans l'onglet de la page). Cet élément ne peut contenir que du texte, les balises qu'il contiendrait seraient ignorées.</p>

<h2 id="Attributs">Attributs</h2>

<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>

<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>

<p>L'élément <code>&lt;title&gt;</code> est toujours utilisé au sein de l'élément {{HTMLElement("head")}} de la page.</p>

<h3 id="Référencement_(SEO)">Référencement (SEO)</h3>

<p>Le titre d'une page fait partie des éléments principaux qui sont scannés lors de l'indexation d'une page. C'est aussi le texte qui est affiché parmi les résultats du moteur de recherche, de façon proéminente et donc visible par les utilisateurs qui trouvent votre site grâce à un moteur de recherche.</p>

<p>Aussi, mieux vaudra avoir des titres descriptifs plutôt que des titres trop courts ou vagues.</p>

<p>Quelques observations :</p>

<ul>
 <li>On pourra éviter les titres sur un ou deux mots.</li>
 <li>La longueur affichée pour les titres dans les résultats d'un moteur de recherche se situe entre 55 et 60 caractères. Si le titre est plus long, on veillera à ce que les concepts majeurs apparaissent avant cette longueur.</li>
 <li>Attention aux entités (les chevrons HTML pourront être affichés différemment entre les navigateurs).</li>
 <li>Le titre doit être intelligible et pas une simple concaténation de mots-clés.</li>
 <li>Le titre devra être unique pour un même site.</li>
</ul>

<h2 id="Exemples">Exemples</h2>

<pre class="brush: html">&lt;title&gt;Et voici le titre de ma page !&lt;/title&gt;
</pre>

<h2 id="Accessibilité">Accessibilité</h2>

<p>Il est important de fournir une valeur pour l'attribut <code>title</code> qui décrit le but de la page de façon claire et concise.</p>

<p>Les personnes utilisant des outils d'assistance peuvent utiliser le titre de la page afin de déterminer rapidement ce qu'elle contient. Ainsi, il peut ne pas être nécessaire de naviguer « dans » la page, ce qui peut prendre du temps et être source de confusion si, ce faisant, on doit déterminer le but de la page.</p>

<h4 id="Exemple">Exemple</h4>

<pre>&lt;title&gt;Menu - Restaurant chinois Maison bleue - Commande en ligne&lt;/title&gt;
</pre>

<p>Mettre à jour la valeur de <code>title</code> afin de refléter un changement d'état important (un problème de validation d'un formulaire par exemple) peut également s'avérer utile :</p>

<h4 id="Exemple_2">Exemple</h4>

<pre>&lt;title&gt;2 erreurs sur votre commande - Restaurant chinois Maison bleue - Commande en ligne&lt;/title&gt;
</pre>

<ul>
 <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre les règles WCAG 2.4</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html"><em>Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
</ul>

<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données">Contenu de méta-données</a>.</td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td>Du texte qui n'est pas du blanc entre éléments (<em>inter-element whitespace</em>).</td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>Les deux balises sont nécessaires. Si <code>&lt;/title&gt;</code> est absent, le navigateur peut ignorer le reste de la page.</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Un élément {{HTMLElement("head")}} qui ne contient pas d'autre élément {{HTMLElement("title")}}.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>Aucun.</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLTitleElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '&lt;title&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '&lt;title&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '&lt;title&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("html.elements.title")}}</p>