<strong> : l'élément de haute importance

Exemple interactif

<p>
  ... la règle la plus importante, la règle que vous ne devez jamais oublier,
  peu importe combien il pleure, peu importe combien il supplie&nbsp;:
  <strong>ne le nourrissez jamais après minuit</strong>.
</p>

p {
  font-size: 1rem;
}

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

L'élément <strong> indique un contenu de haute importance, y compris lorsqu'il s'agit de choses graves ou urgentes (telles que des messages d'avertissement par exemple). Il peut s'agir d'une certaine phrase au sein d'une page ou bien de quelques mots d'une importance particulière par rapport au contenu environnant.

Cet élément se traduit généralement par l'affichage du texte en gras. Toutefois, il ne doit pas être utilisé à des fins stylistiques. Pour cela, on pourra utiliser la propriété CSS font-weight. De plus, on pourra utiliser l'élément <b> afin d'attirer l'attention sur une portion de texte qui ne possède pas un niveau d'importance particulier ou l'élément <em> si on souhaite marquer un texte avec de l'emphase.

Il est également possible d'utiliser <strong> pour les en-têtes de paragraphes qui représentent des notes ou des avertissements au sein d'une page.

<b> ou <strong> ?

Il est souvent déroutant pour les nouveaux·elles développeur·euse·s de comprendre pourquoi il existe autant de façons d'exprimer la même chose sur un site web affiché. <b> et <strong> sont peut-être l'une des sources de confusion les plus courantes, causant les développeur·euse·s à se demander « Dois-je utiliser <b> ou <strong> ? Ne font-ils pas tous les deux la même chose ? »

Pas exactement. L'élément <strong> sert à du contenu de plus grande importance, tandis que l'élément <b> est utilisé pour attirer l'attention sur du texte sans indiquer qu'il est plus important.

Il peut être utile de comprendre que les deux sont des éléments valides et sémantiques en HTML et que c'est une coïncidence s'ils ont le même style par défaut (gras) dans la plupart des navigateurs (certains anciens navigateurs soulignaient même <strong>). Chaque élément est destiné à être utilisé dans certains types de situations, et si vous souhaitez mettre du texte en gras à des fins décoratives, il vaut mieux utiliser la propriété CSS font-weight.

Le sens ou l'objectif du texte concerné doit déterminer l'élément à utiliser. Communiquer le sens, c'est tout l'enjeu de la sémantique.

<em> ou <strong> ?

Ce qui ajoute à la confusion est le fait qu'en HTML 4, <strong> était défini comme indiquant une emphase plus forte, alors qu'en HTML 5, <strong> représente « une importance forte pour son contenu ». Il s'agit d'une distinction importante à faire.

Alors que <em> est utilisé pour changer le sens d'une phrase comme le fait l'emphase à l'oral (« J'adore les carottes » et « J'adore les carottes »), <strong> sert à donner à certaines parties d'une phrase une importance supplémentaire (par exemple « Attention ! C'est très dangereux. »). <strong> et <em> peuvent être imbriqués pour augmenter respectivement le degré relatif d'importance ou d'emphase.

Exemples

Exemple simple

<p>
  Avant de faire le truc X il est
  <strong>nécessaire</strong> de faire le truc Y avant.
</p>

Résultat

Étiqueter des avertissements

<p>
  <strong>Important&nbsp;:</strong> Avant de continuer, assurez-vous d'ajouter
  beaucoup de beurre.
</p>

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément <b>
• L'élément <em>
• La propriété CSS font-weight