web-dev-qa-db-fra.com

Quelle est la différence entre <b> et <strong>, <i> et <em>?

Quelle est la différence entre <b> et <strong>, <i> et <em> en HTML/XHTML? Quand devriez-vous utiliser chacun?

713
Philip Morton

Ils ont le même effet sur les moteurs de rendu de navigateur Web normaux , mais il existe une différence fondamentale entre eux.

Comme l'auteur écrit dans n post de liste de discussion :

Pensez à trois situations différentes:

  • navigateurs web
  • personnes aveugles
  • téléphones portables

"Gras" est un style - quand vous dites "un mot en gras" , les gens savent en gros que cela signifie d'ajouter plus, disons "encre", autour des lettres jusqu'à ce qu'elles restent en place. dehors plus parmi le reste des lettres.

Cela, malheureusement, ne signifie rien pour un aveugle. Sur les téléphones mobiles et autres PDA, le texte est déjà en gras car la résolution de l'écran est très petite. Vous ne pouvez pas en gras un gras sans foirer quelque chose.

<b> est un style - nous savons à quoi "gras" est censé ressembler.

<strong> cependant indique comment quelque chose doit être compris . "Fort" pourrait (et signifie souvent) signifier "gras" dans un navigateur, mais cela pourrait également signifier un ton plus bas pour un programme de conversation comme Jaws (pour les aveugles) ou être représenté par un soulignement (car vous ne pouvez pas en gras gras) sur un Palm Pilot.

HTML n'a jamais été censé être sur les styles. Faites quelques recherches pour "Tim Berners-Lee" et "le web sémantique." <strong> est sémantique - il décrit le texte qu'il entoure (par exemple, "ce texte doit être plus fort que le reste du texte que vous avez affiché" ), par opposition pour décrire comment le texte qu'il entoure doit être affiché (par exemple, ", ce texte doit être en gras ").

969
splattne

<b> et <i> sont explicites - ils spécifient respectivement gras et italique.

<strong> et <em> sont sémantiques - ils spécifient que le texte inclus doit être "fort" ou "souligné" d'une manière ou d'une autre, généralement gras et en italique, mais permet de contrôler le style réel via CSS. Par conséquent, ceux-ci sont préférés dans les pages Web modernes.

213
Tony Andrews

<strong> et <em> ajoutent une signification sémantique supplémentaire à votre document. Il se trouve qu'ils confèrent également un style gras et italique à votre texte.

Vous pouvez bien sûr remplacer leur style avec CSS.

<b> et <i> en revanche, appliquent uniquement le style de police et ne doivent plus être utilisés. (Parce que vous êtes censé formater avec CSS, et si le texte était réellement important, alors vous le rendriez probablement "fort" ou "souligné" de toute façon!)

J'espère que cela a du sens.

24
James

Alors que <strong> et <em> sont bien sûr plus corrects sur le plan sémantique, il semble y avoir de bonnes raisons légitimes d’utiliser les balises <b> et <i> pour le contenu écrit par le client.

Dans un tel contenu, les mots ou les phrases peuvent être en gras ou en italique et il n'appartient généralement pas à nous d'analyser le raisonnement sémantique d'un tel gras ou italique.

En outre, un tel contenu peut faire référence à des mots et à des phrases en gras et en italique pour transmettre un sens spécifique.

Un exemple serait une question d’examen en anglais qui demande à un étudiant de remplacer le mot en gras.

8
mwiik

<b> et <i> sont tous deux liés au style, alors que <em> et <strong> sont sémantiques. En HTML 4, les premiers sont classés comme éléments de style de police , et les derniers comme éléments de phrase .

Comme vous l'avez indiqué correctement, <i> et <em> sont souvent considérés comme similaires, car les navigateurs affichent souvent les deux en italique. Mais selon les spécifications, <em> indique une emphase et <strong> indique une emphase plus forte , ce qui est assez clair, mais souvent mal interprété. D'autre part, la distinction entre quand utiliser <i> ou <b> est vraiment une question de style.

7
Kariem

Voici un résumé des définitions avec l'utilisation suggérée:

<b> ... une plage de texte sur laquelle une attention est attirée à des fins utilitaires, sans autre importance et sans implication d'une autre voix ou humeur, telle que mots clés dans un résumé de document, noms de produits dans une révision, mots d'action dans un logiciel interactif piloté par le texte, ou un article lede .

<strong> ... représente maintenant une importance plutôt qu'une emphase forte.

<i> ... une plage de texte d'une voix ou d'une humeur différente, ou décalée d'une manière ou d'une autre par rapport à la prose normale d'une manière indiquant une qualité de texte différente, telle que désignation taxonomique, a terme technique, une phrase idiomatique d'une autre langue, une pensée, ou un nom du navire dans les textes occidentaux.

<em> ... indique une emphase.

(Ce sont toutes des citations directes de sources du W3C, avec mon soulignement ajouté. Voir: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements et - http://www.w3.org/TR/html401/struct/text.html#h-9.2.1 pour les originaux)

7
Rick Westera

Comme les autres l'ont dit, la différence est que <b> et <i> styles de police codés en dur, alors que <strong> et <em> dictent le sens sémantique, avec le style de police (ou l'intonation du navigateur qui parle ou ce que vous avez) à déterminer au moment où le texte est rendu (ou parlé).

Vous pouvez considérer cela comme une différence entre un style de police "physique" et un style "logique", si vous voulez. Par la suite, vous voudrez peut-être modifier le mode d'affichage du texte <strong> et <em>, par exemple, en modifiant les propriétés d'une feuille de style afin d'ajouter des modifications de couleur et de taille, voire d'utiliser entièrement des polices de caractères différentes. Si vous avez utilisé un balisage "logique" au lieu d'un balisage "physique" codé en dur, vous pouvez simplement modifier les propriétés d'affichage à un emplacement de votre feuille de style, puis all). des pages qui font référence à cette feuille de style sont modifiées automatiquement , sans jamais avoir à les modifier.

Assez lisse, hein?

C’est également la raison qui sous-tend la définition de sous-styles (référencés à l’aide de la propriété style= dans les balises de texte) pour les paragraphes, les cellules de tableau, le texte de l’en-tête, les légendes, etc., et à l’utilisation des balises <div>. Vous pouvez définir une représentation physique pour vos styles logiques dans la feuille de style. Les modifications sont automatiquement répercutées dans les pages Web faisant référence à cette feuille de style. Vous voulez une représentation différente pour le code source? Redéfinissez la police, la taille, le poids, l'espacement, etc. pour votre style "code".

Si vous utilisez XHTML, vous pouvez même définir vos propres balises sémantiques et votre feuille de style effectuera les conversions pour les styles de police physique et les dispositions.

3
Chris BeHanna

Comme d'autres l'ont dit, <b> et <i> sont explicites (c'est-à-dire "rendez ce texte en gras"), alors que <strong> et <em> sont sémantiques (c'est-à-dire "ce texte doit être mis en valeur").

Dans le contexte d'un navigateur Web moderne, il est difficile de voir la différence (ils semblent tous deux produire le même résultat, n'est-ce pas?), Mais pensez aux lecteurs d'écran pour les malvoyants. Si un lecteur d'écran rencontrait une balise <i>, il ne saurait pas quoi faire. Mais s'il rencontre une balise <em>, il sait que tout ce qui se trouve à l'intérieur doit être mis en avant par l'auditeur. Et là, vous obtenez la différence pratique.

3
JamShady

Utilisez-les uniquement si, pour une raison quelconque, l'utilisation de classes de style CSS est peu confortable ou impossible (comme avec les systèmes de blogues, n'autorisez que certaines balises à être utilisées dans des publications et éventuellement dans des styles incorporés). Une autre raison est la prise en charge de très vieux navigateurs (certains appareils mobiles?) Ou de moteurs de recherche primitifs (qui attribuent des points aux balises <b> ou <strong> au lieu d'analyser les styles CSS).

Si vous pouvez définir des styles CSS, utilisez-les.

2
Danubian Sailor

Eléments de formatage HTML:

HTML définit également des éléments spéciaux pour définir un texte avec une signification particulière. HTML utilise des éléments tels que et pour la mise en forme de la sortie, tels que le texte en gras ou en italique.

HTML Formatage en gras et puissant:

L'élément HTML définit le texte en gras, sans importance supplémentaire.

<b>This text is bold</b>

L'élément HTML définit le texte fort, avec une importance sémantique "forte" ajoutée.

<strong>This text is strong</strong>

Mise en forme HTML italique et accentuée:

L'élément HTML définit le texte en italique, sans importance supplémentaire.

<i>This text is italic</i>

L'élément HTML définit le texte souligné, avec une importance sémantique ajoutée.

<em>This text is emphasized</em>
2
Muhammad Awais

<em> et <strong> consomment plus de bande passante que <i> et <b>.

Ils nécessitent également plus de frappe (si non générés automatiquement).

Ils encombrent également l'écran de l'éditeur avec plus de texte. Il me semble rappeler que les programmeurs aiment les fichiers source plus petits s’ils sont identiques. (Et soyons réels, ils sont les mêmes. Oui, il y a "technique" (<i>toux</ i>, euh, excusez-moi) les différences, mais c'est surtout bidon pour commencer.)

Avec l’une des balises ci-dessus, vous pouvez utiliser des feuilles de style pour personnaliser leur apparence si vous souhaitez que leur rendu soit différent de celui de leurs rendus par défaut.

2
Thomas Eding

les tags i, b, em et strong sont traditionnellement représentatifs. Mais ils ont reçu un nouveau sens sémantique dans html5 .

i et b a été utilisé pour le style de police en html4. i a été utilisé pour l'italique et b pour le gras. En html5. i La balise a un nouveau sens sémantique: ' voix alternative ou humeur ' et La balise b a la signification de stylistiquement décalée .

Les exemples d’utilisation de i sont les suivants: désignation taxonomique, terme technique, expression idiomatique d’une autre langue, translittération, pensée, noms de navires dans des textes occidentaux. Tel que -

<p><i>I hope this works</i>, he thought.</p>

Les exemples d'utilisation de la balise b sont des mots-clés dans un extrait de document, des noms de produit dans une révision, des mots exploitables dans un logiciel interactif piloté par texte, un article.

L'exemple de paragraphe suivant est stylistiquement décalé des paragraphes qui le suivent.

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

em et strong avaient la signification de l'emphase et de l'emphase forte en html4. Mais en html5 , em signifie l'accent mis sur l'accentuation et forte signifie forte importance .

Dans l'exemple suivant, il devrait y avoir un changement linguistique lors de la lecture du mot avant ...

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

Dans le même exemple, nous pouvons utiliser la balise strong comme suit.

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

donner de l'importance à la date de l'événement.

MDN Ref:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

1
adnan2nd

J'utilise à la fois <strong> et <b>, en fait, pour exactement les raisons mentionnées dans ce fil de réponses. Il y a des moments où un texte en caractères gras simplement semble mieux, mais ce n'est pas nécessairement plus important sémantiquement que le reste de la phrase. Voici un exemple d'une page sur laquelle je travaille en ce moment:

"Récupère <strong> tous les </ strong> livres sur <b> la crosse </ b>."

Dans cette phrase, le mot "tous" est très important, et le mot "crosse" moins - je le voulais simplement en gras car il représente un terme à rechercher, alors je voulais une séparation visuelle. Si vous visualisez la page avec un lecteur d'écran, je ne pense vraiment pas qu'il faille mettre l'accent sur le mot "crosse".

J'aurais tendance à imaginer que la plupart des développeurs Web utilisent l'un ou l'autre, mais les deux vont bien. <B> n'est certainement pas obsolète, comme l'ont prétendu certaines personnes. Pour moi, c'est juste une fine ligne entre attrait visuel et signification.

1
Justin Blum

<b> et <i> devraient être évités car ils décrivent le style du texte. Utilisez plutôt <strong> et <em> car cela décrit la sémantique (la signification) du texte.

Comme pour toutes les choses en HTML, vous devriez penser non pas à la façon dont vous voulez que ce soit regardez, mais à ce que vous avez réellement moyen. Bien sûr, il se peut que ce soit simplement gras et italique pour vous, mais pas pour un lecteur d'écran.

1
nickf

"Ils ont le même effet. Cependant, XHTML, une version plus propre et plus récente du HTML, recommande l'utilisation de la balise <strong>. Strong est meilleur parce qu'il est plus facile à lire - sa signification est plus claire. En outre, <strong> donne un sens - montrant le texte est fortement - alors que <b> (pour gras) exprime une méthode - le texte en gras. Avec fort, votre code a toujours du sens si vous utilisez des feuilles de style CSS pour changer les méthodes utilisées pour rendre le texte plus fort.

Il en va de même pour la différence entre <i> et <em> ".

Google dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

1
Antonio Louro

b ou i signifie que vous souhaitez que le texte soit affiché en gras ou en italique. strong ou em signifie que vous souhaitez que le texte soit restitué de manière que l'utilisateur comprenne comme "important". La valeur par défaut est de rendre les caractères gras et gras et les caractères italiques en italique, mais d'autres cultures pourraient utiliser un mappage différent.

Comme les chaînes d'un programme, b et i serait "codé en dur" tandis que fort et em serait " localisé ".

1
Stephan Leclercq

Vous devriez essayer d'éviter <b> et <i>. Ils ont été introduits pour "mettre en page" la page (comme la balise font entre temps retirée) et la mise en page ne doit en aucun cas être faite en HTML, mais en CSS (HTM == Structure, CSS == Layout). Ces balises peuvent également disparaître à l'avenir, après tout, vous pouvez simplement utiliser les balises CSS et span pour rendre le texte en gras/italique.

<em> et <strong>, d'autre part, indique seulement que quelque chose est "souligné" ou "fortement souligné", cela laisse tout à fait ouvert au frère comment le rendre. La plupart des navigateurs affichent des caractères gras et italiques, mais ils ne sont pas obligés de le faire (ils peuvent utiliser différentes couleurs, tailles de police, polices, peu importe). Vous pouvez utiliser CSS pour changer le comportement comme vous le souhaitez. Vous pouvez les rendre audacieux si vous aimez fort et audacieux et rouge par exemple.

0
Mecki