---
title: <abbr>
slug: Web/HTML/Element/abbr
tags:
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/abbr
---
<div>{{HTMLRef}}</div>

<p>L'élément <code><strong>&lt;abbr&gt;</strong></code> représente une abréviation ou un acronyme et permet, de façon optionnelle, d'en fournir une description complète. S'il est présent, l'attribut {{htmlattrxref("title")}} doit contenir cette même description complète et rien d'autre.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<div class="note">
<p><strong>Note :</strong> Voir <a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations">cet article introductif</a> pour la mise en forme du texte en général.</p>
</div>

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

<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels" rel="internal">attributs universels</a>.</p>

<p>On notera que l'attribut {{htmlattrdef("title")}} possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.</p>

<p>Chaque élément <code>&lt;abbr&gt;</code> est indépendant, rattacher un titre à l'un ne l'associe pas aux abrévations identiques qui suivent.</p>

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

<h3 id="Cas_d'usage_généraux">Cas d'usage généraux</h3>

<p>Il n'est pas obligatoire d'utiliser <code>&lt;abbr&gt;</code> pour toutes les abrévations d'un document mais voici quelques cas où cet élément s'avère pertinent :</p>

<ul>
 <li>Lorsqu'une abrévation est utilisée et qu'on souhaite fournir une définition ou une explication en dehors du contenu du document, on utilisera <code>&lt;abbr&gt;</code> avec un attribut {{htmlattrxref("title")}} adéquat.</li>
 <li>Lorsqu'une abrévation fait partie d'un jargon ou d'un vocabulaire qui risque d'être inconnu du lecteur, un élément <code>&lt;abbr&gt;</code> avec un attribut <code>title</code> explicatif pourra être utilisé.</li>
 <li>Lorsqu'on souhaite bénéficier de la sémantique liée à l'abrévation (par exemple pour les manipuler en script ou les mettre en forme avec des feuilles de style), on pourra utiliser <code>&lt;abbr&gt;</code> pour identifier ces contenus.</li>
 <li>Lorsqu'on souhaite définir des termes qui sont des abrévations, on pourra utiliser une combinaison de <code>&lt;abbr&gt;</code> et de {{HTMLElement("dfn")}}. Voir ci-après pour un exemple.</li>
</ul>

<h3 id="Grammaire">Grammaire</h3>

<p>Lorsqu'il est présent, le nombre (grammatical) du texte de l'attribut <code><strong>title</strong></code> devrait correspondre à celui du contenu de l'élément <code>abbr</code>. C'est également le cas dans les langues avec plus de deux genres grammaticaux (par exemple, l'Arabe, en plus des catégories pour le singulier et le pluriel, possède également une catégorie double).</p>

<h2 id="Mise_en_forme_par_défaut">Mise en forme par défaut</h2>

<p>Le but de cet élément est purement explicatif. Tous les navigateurs l'affichent en ligne ({{cssxref('display')}}<code>: inline</code>) par défaut mais le reste de la mise en forme par défaut peut varier d'un navigateur à l'autre :</p>

<ul>
 <li>Certains navigateurs tels qu'Internet Explore lui appliquent la même mise en forme qu'à un élément {{HTMLElement("span")}}.</li>
 <li>Opera, Firefox et d'autres navigateurs souligne l'abréviation avec une ligne de points.</li>
 <li>D'autres navigateurs ne soulignent pas le texte mais l'écrivent en petites majuscules. Pour éviter ce comportement, on pourra utiliser la règle CSS {{cssxref("font-variant")}}<code>: none</code>.</li>
</ul>

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

<h3 id="Baliser_une_abrévation_pour_marquer_la_sémantique">Baliser une abrévation pour marquer la sémantique</h3>

<p>On peut baliser une abrévation sans fournir de description ou de définition, il suffit d'utiliser <code>&lt;abbr&gt;</code> sans attribut.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p&gt;Nous allons voir le &lt;abbr&gt;HTML&lt;/abbr&gt; qui sert à construire des pages web.&lt;/p&gt;</pre>

<h4 id="Résultat">Résultat</h4>

<p>{{EmbedLiveSample("Baliser_une_abréviation_pour_marquer_la_sémantique")}}</p>

<h3 id="Mettre_en_forme_des_abréviations">Mettre en forme des abréviations</h3>

<p>CSS peut être utilisé pour appliquer une mise en forme particulière sur les abréviations.</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;p&gt;Avec &lt;abbr&gt;CSS&lt;/abbr&gt;, on peut mettre en forme les éléments.&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">abbr {
  font-variant: all-small-caps;
}</pre>

<h4 id="Résultat_2">Résultat</h4>

<p>{{EmbedLiveSample("Mettre_en_forme_des_abréviations")}}</p>

<h3 id="Fournir_une_description">Fournir une description</h3>

<p>On peut ajouter un attribut {{htmlattrxref("title")}} afin de fournir une description de l'abréviation ou de l'acronyme.</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;p&gt;Et là je lui ai répondu &lt;abbr title="Laugh Out Loud"&gt;LOL&lt;/abbr&gt;.&lt;/p&gt;</pre>

<h4 id="Résultat_3">Résultat</h4>

<p>{{EmbedLiveSample("Fournir_une_description")}}</p>

<h3 id="Définir_une_abréviation">Définir une abréviation</h3>

<p>Il est possible d'utiliser l'élément <code>&lt;abbr&gt;</code> avec {{HTMLElement("dfn")}} afin de formellement définir une abréviation.</p>

<h4 id="HTML_4">HTML</h4>

<pre class="brush: html">&lt;p&gt;&lt;dfn id="html"&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;
&lt;/dfn&gt; est un langage de balise qui permet de créer la structure et d'organiser
la sémantique d'une page web.&lt;/p&gt;

&lt;p&gt;Une &lt;dfn id="spec"&gt;Spécification&lt;/dfn&gt;
(&lt;abbr title="Specification"&gt;spec&lt;/abbr&gt;) est un document qui décrit, de façon
détaillée comme une technologie ou une API fonctionne et comment l'utiliser.&lt;/p&gt;</pre>

<h4 id="Résultat_4">Résultat</h4>

<p>{{EmbedLiveSample("Définir_une_abréviation", 600, 120)}}</p>

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

<p>C'est une bonne pratique que d'épeler l'acronyme ou l'abréviation lorsqu'elle est utilisée pour la première fois. Cela permet au lecteur de mieux comprendre le terme, notamment si celui-ci est technique ou appartient à un jargon spécifique.</p>

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

<pre class="brush: html">&lt;p&gt;JavaScript Object Notation (&lt;abbr&gt;JSON&lt;/abbr&gt;) est un format léger d'échange de données.&lt;/p&gt;
</pre>

<p>Cela peut servir aux personnes qui découvrent ces concepts pour la première fois ou pour les personnes souffrant de troubles cognitifs.</p>

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

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Contenu autorisé</dfn></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Omission de balises</dfn></th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Parents autorisés</dfn></th>
   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>Tous les rôles sont autorisés.</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

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

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

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

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/Learn/HTML/Element/abbr">Utiliser l'élément <code>&lt;abbr&gt;</code></a></li>
 <li>Les autres éléments ayant une sémantique textuelle : {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
 <li>L'élément obsolète {{HTMLElement("acronym")}} dont la sémantique a été « fusionnée » dans <code>&lt;abbr&gt;</code></li>
</ul>