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


780

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



Au moins pour l'instant, tout ce que j'ai vu dans StackOverflow a été "mis en gras" en utilisant l'élément <b>
OverCoder

Description claire a MDN (avec des exemples) sur la façon dont ces balises doivent être utilisées: <em>, <strong>, <b>,<i>
totymedli

Réponses:


1045

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'écrit l'auteur dans un article de la liste de discussion :

Pensez à trois situations différentes:

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

"Bold" est un style - quand vous dites "bold a word" , les gens savent fondamentalement que cela signifie ajouter plus, disons "encre", autour des lettres jusqu'à ce qu'elles ressortent davantage parmi les autres lettres.

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

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

<strong> toutefois est une indication de la façon dont quelque chose doit être compris . "Fort" pourrait (et signifie souvent) "gras" dans un navigateur, mais cela pourrait également signifier un ton plus bas pour un programme parlant comme Jaws (pour les aveugles) ou être représenté par un soulignement (puisque vous ne pouvez pas mettre en gras un gras) sur un Palm Pilot.

Le HTML n'a jamais été conçu pour concerner les styles. Faites des recherches sur «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é" ) plutôt que de décrire comment le texte qu'il entoure doit être affiché (par exemple, "ce texte doit être gras " ).


160
Notez que <b> et <i> n'ont pas été dépréciés en HTML5. Leur nouvelle utilisation est de représenter sémantiquement les styles (ou la présentation voulue), tandis que <strong> et <em> représentent la structure . Vous devez lire stellify.net/…
Natan Yellin

12
Excellente réponse mais je dirais que "vous ne pouvez pas mettre en gras un gras" est faux parce que vous supposez que c'est un concept booléen, lorsque le poids de la police: adopte une approche plus variable. Maintenant qu'il existe des écrans haute fidélité, il y a des niveaux d'audace.
TravisO

4
@TravisO Je pense qu'il parlait des restrictions techniques spécifiques du Palm Pilot.
Brian Ortiz

4
Je ne crois pas que des tas de lettres aient une signification intrinsèque, <b> peut avoir exactement la même signification sémantique que <strong> si nous le décidons. Qu'ont décidé les créateurs de lecteurs, les traitent-ils différemment ou exactement de la même manière?
Aprillion

21
@deathApril Mais ils le font! Ils ont un sens! Le HTML n'est pas défini par ce que vous croyez ou ce que vous décidez.
M. Lister du

231

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

<strong>et <em>sont sémantiques - ils spécifient que le texte joint doit être "fort" ou "souligné" d'une certaine manière, généralement en 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.


15
Bonne explication. D'un autre côté, avec HTML 5, <i> et <b> sont aussi sémantiques qu'explicites. Soupir.
OregonGhost

1
Sont-ils? Je suis en retard ...!
Tony Andrews

5
Oui, la meilleure explication que j'ai lue est stellify.net/…
Natan Yellin

25
HTML5 a de nouvelles significations sémantiques pour bet i. Ce sont des balises que vous devez utiliser lorsque vous devez attirer l'attention sur une partie de la prose, ou pour compenser la prose normale, sans transmettre l'accent ( em), l'importance (pour strong) ou la pertinence (pour mark). best pour les mots clés, les noms de produits, les mots exploitables, etc., tandis que ipour les termes techniques, les pensées, les phrases, etc. Honnêtement, l'OMI, il doit y avoir une plus grande distinction entre les deux.
chharvey

2
Dommage que le texte (et le titre) de stellify.net soit complètement illisible sur la plupart des moniteurs et configurations de bureau bon marché ^^ (le manque de contraste est tout simplement magnifique)
Oskar Duveborn

23

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

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

<b> et <i> d'autre part appliquer uniquement le style de police et ne doit plus être utilisé. (Parce que vous êtes censé formater avec CSS, et si le texte était réellement important, vous le rendriez probablement "fort" ou "souligné" de toute façon!)

J'espère que cela a du sens.


2
si vous dites que <b> et <i> ne devraient plus être utilisés, alors qu'en est-il de l'ancien navigateur qui ne prend pas en charge <em> et <strong>?
Nirman

4
@Nirman Si quelqu'un utilise un ancien navigateur pour naviguer sur le Web, il ou elle a déjà de nombreux problèmes, d'un point de vue visuel et de sécurité. Pour cette raison, je pense que les programmeurs et les concepteurs ne devraient plus prendre en charge les anciens navigateurs.
yeyo

4
Remarque: si nous parlons d'anciens navigateurs, nous entendons ici Netscape 3 et IE2 (IE3 et NS4 déjà pris en charge <strong> et <em>). Si vous avez vraiment besoin de continuer à prendre en charge ces navigateurs du 20e siècle, vous rencontrez de gros problèmes.
M. Lister

<b> and <i> on the other hand only apply font styling and should no longer be used.Les documents HTML5 officiels disent le contraire. Citation requise?

1
Cette réponse a été publiée ~ 6 ans avant la sortie de HTML5!
James

8

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

<b>... une étendue de texte sur laquelle l'attention est attirée à des fins utilitaires sans transmettre d'importance supplémentaire et sans implication d'une voix ou d'une humeur alternative, comme les mots clés dans un résumé de document, les noms de produits dans une revue, des mots exploitables dans un logiciel interactif basé sur du texte ou une barre d'articles .

<strong> ... représente désormais une importance plutôt qu'un accent fort.

<i>... une étendue de texte dans une voix ou une humeur alternative, ou autrement décalée de la prose normale d'une manière indiquant une qualité de texte différente, comme une désignation taxonomique , un terme technique , une phrase idiomatique d'une autre langue , une pensée ou un nom de navire dans les textes occidentaux.

<em> ... indique l'accent.

(Ce sont toutes des citations directes de sources du W3C, avec mon accent 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

<b>et <i>sont tous deux liés au style, tandis que <em>et <strong>sont sémantiques. En HTML 4, les premiers sont classés comme éléments de style de police et les seconds 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 un accent et <strong> indique un accent plus fort , ce qui est assez clair, mais souvent mal interprété. D'un autre côté, la distinction entre quand utiliser <i>ou <b>est vraiment une question de style.


1
strongn'indique pas "une plus grande emphase" mais plutôt une " importance ". Pour un accent plus fort , imbriquez un emélément dans un autre emélément.
chharvey

@ TestSubject528491 si vous suivez le lien pour les éléments de phrase que j'ai utilisés ci-dessus, vous verrez que je viens de citer la spécification. Je ne pense pas que cela entre en conflit avec la sémantique de l'importance, ni qu'un emboîtement de deux emaccentue dans un accent, ce que je comprends que vous proposiez.
Kariem

3
Je pense que la spécification HTML5 fait juste plus de distinction entre les deux. Dans mon interprétation, «accent» signifie stress dans le ton de la voix. Par exemple: « Tu veux par CES jeans? » contre "Vous voulez ACHETER ces jeans?" ont des significations différentes en raison du placement de l'accentuation. OTOH, "Importance" n'a pas d'effet basé sur le placement. Par exemple, " ATTENTION : méfiez-vous des chiens!" aurait le même sens si l'importance était supprimée.
chharvey

<b> and <i> are both related to styleeuh. Les documents HTML5 officiels disent le contraire. Citation requise?

@vaxquis lié ci-dessus pour HTML 4: <b>et <i>sont des éléments de style de police, tandis que <em>et <strong>sont des éléments de phrase. Des suggestions pour améliorer cela? Par souci d'exhaustivité, et aussi parce que votre commentaire ne comprenait pas de citation, dans HTML 5.2, tous ces éléments sont décrits dans le contenu de la formulation
Kariem

7

Bien que, <strong>et <em>bien sûr, plus sémantiquement corrects, il existe des raisons légitimes précises 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 ne nous appartient généralement pas d'analyser le raisonnement sémantique pour un tel caractère 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 une signification spécifique.

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


"plus sémantiquement correct"? Que veux-tu dire par là? Avez-vous lu la spécification HTML5 sur les balises b / i?

4

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

Ils nécessitent également plus de saisie (s'ils ne sont pas générés automatiquement).

Ils encombrent également l'écran de l'éditeur avec plus de texte. Il me semble que les programmeurs aiment les fichiers source plus petits s'ils sont identiques. (Et soyons réalistes, ce sont les mêmes. Oui, il y a des "techniques" (<i> toux </i>, ahem, excusez-moi), mais c'est surtout faux pour commencer.)

Avec l'une des balises ci-dessus, vous pouvez utiliser des feuilles de style pour personnaliser leur apparence comme vous le souhaitez si vous avez besoin qu'elles apparaissent différemment de leurs rendus par défaut.


1
Lol, ce devrait être la réponse acceptée (HHOS). La vôtre est la réponse la plus terre-à-terre et correcte sur toute cette page, même si c'est un peu une blague. Toute cette histoire de "sémantique" est un jeu idiot pour commencer. Nous savons tous que quiconque regarde cette question travaille ici avec les principaux éditeurs de navigateurs à l' esprit, Chrome, Firefox, IE, etc. Nous voulons juste savoir ce que le réel , réelles différences peut - être, pas ce que les débats d' un comité au sujet de son abondance de temps libre.
GDP2

2

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

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, non?), 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 qu'il contient doit être souligné par l'auditeur. Et là, vous obtenez la différence pratique.


<b> and <i> are explicit (i.e. "make this text bold"),euh. Les documents HTML5 officiels disent le contraire. Citation requise?

2

<i>, <b>, <em>Et les <strong>balises sont traditionnellement représentationnel. Mais ils ont reçu une nouvelle signification sémantique en HTML5 .

<i>et a <b>été utilisé pour le style de police en HTML4. <i>a été utilisé pour l'italique et <b>pour le gras. Dans HTML5, la <i>balise a une nouvelle signification sémantique de « voix ou humeur alternative » et la <b>balise a la signification de décalage stylistique .

Exemples d'utilisation d' <i>étiquette: désignation taxonomique, terme technique, expression idiomatique d'une autre langue, translittération, pensée, noms de navires dans les textes occidentaux. Tel que -

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

Les exemples d'utilisation de la <b>balise sont les mots-clés dans un extrait de document, les noms de produits dans une revue, les mots exploitables dans un logiciel interactif basé sur du texte, le chef d'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>avait le sens d'accentuation et d'accentuation forte en HTML4. Mais en HTML5 <em>signifie accent mis et <strong>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 <strong>balise comme suit.

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

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

Réf MDN:

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

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

Vous pouvez considérer cela comme une différence entre un style de police «physique» et un style «logique», si vous voulez. À un certain moment plus tard, vous voudrez peut - être changer la façon <strong>et le <em>texte sont affichés, par exemple, par des propriétés altérant dans une feuille de style pour ajouter des changements de couleur et de taille, ou même d'utiliser différents caractères des polices entièrement. 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 au même endroit chacune dans votre feuille de style, puis toutes les 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 d'être de la définition de sous-styles (référencés à l'aide de la style=propriété dans les balises de texte) pour les paragraphes, les cellules de tableau, le texte d'en-tête, les légendes, etc., et l'utilisation de <div>balises. Vous pouvez définir la représentation physique de vos styles logiques dans la feuille de style et les modifications sont automatiquement reflétées dans les pages Web faisant référence à cette feuille de style. Vous voulez une représentation différente du 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 ferait pour vous les conversions en styles et mises en page de polices physiques.


1
Vous pouvez utiliser les feuilles de style pour changer complètement la façon dont <b>et <i>sont rendus aussi. Assez lisse, hein?
Thomas Eding

bet ine rien coder. Tout comme n'importe quelle balise HMTL, ils ont un style CSS par défaut et, comme avec n'importe quelle balise, vous pouvez le changer pour avoir l'apparence que vous souhaitez.
Mecki

1

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ù le texte en gras semble simplement meilleur, mais ce n'est pas nécessairement sémantiquement plus important que le reste de la phrase. Voici un exemple d'une page sur laquelle je travaille en ce moment:

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

Dans cette phrase, le mot "tous" est très important, et "crosse" moins - je le voulais simplement en gras parce qu'il représente un terme de recherche, donc je voulais une certaine séparation visuelle. Si vous visualisez la page avec un lecteur d'écran, je ne pense vraiment pas qu'il soit nécessaire de mettre le doigt sur le mot "crosse".

J'aurais tendance à imaginer que la plupart des développeurs Web utilisent l'un de l'autre, mais les deux sont très bien - <b> n'est certainement pas obsolète, comme certains l'ont prétendu. Pour moi, c'est juste une fine ligne entre l'attrait visuel et le sens.


1

Utilisez-les uniquement si l'utilisation de classes de style CSS est pour quelque raison que ce soit inconvenante ou impossible (comme les systèmes de blog, n'autorisez que certaines balises à utiliser dans les publications et éventuellement les styles intégrés). Une autre raison est la prise en charge de navigateurs très anciens (certains appareils mobiles?) Ou de moteurs de recherche primitifs (qui donnent des points pour <b>ou<strong> balises, au lieu d'analyser les styles CSS).

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


1

Pour le texte en gras avec <b> balise

Pour le texte important à l'aide <strong> balise

Pour le texte en italique avec <i> balise

Pour le texte souligné à l'aide de la <em> balise


0

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

Comme pour toutes les choses en HTML, vous ne devriez pas penser à quoi vous voulez qu'il ressemble , mais à ce que vous voulez réellement dire . Bien sûr, cela pourrait être en gras et en italique pour vous, mais pas pour un lecteur d'écran.


2
Complètement incorrect, <b> et <i> ne doivent pas être évités. Ils ont des significations sémantiques en HTML5.
user2867288

0

b ou i signifie que vous voulez que le texte soit rendu en gras ou en italique. fort ou em signifie que vous voulez que le texte soit rendu d'une manière que l'utilisateur considère comme "importante". La valeur par défaut est de rendre fort en gras et em en italique, mais certaines autres cultures peuvent utiliser un mappage différent.

Comme les chaînes dans un programme, b et i seraient "codés en dur" tandis que strong et em seraient "localisés".


0

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

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


0

Éléments de mise en forme HTML:

HTML définit également des éléments spéciaux pour définir du texte avec une signification spéciale. HTML utilise des éléments comme <b> et <i> pour la mise en forme de la sortie, comme du texte en gras ou en italique.

Formatage HTML gras et fort:

L'élément HTML <b> définit du texte en gras, sans aucune importance supplémentaire.

<b>This text is bold</b>

L'élément HTML <strong> définit un 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 <i> définit le texte en italique, sans aucune importance supplémentaire.

<i>This text is italic</i>

L'élément HTML <em> définit le texte souligné, avec une importance sémantique supplémentaire.

<em>This text is emphasized</em>

The HTML <b> element defines bold text, without any extra importance. The HTML <i> element defines italic text, without any extra importance.euh. Les documents HTML5 officiels disent le contraire. Citation requise?

0

Vous devriez généralement essayer d'éviter <b>et <i>. Ils ont été introduits pour la mise en page de la page (en changeant l'apparence) dans les premières versions de HMTL avant la création de CSS, comme la fontbalise supprimée entre-temps , et ont été principalement conservés pour des raisons de compatibilité descendante et parce que certains forums autorisent le HTML en ligne et c'est facile façon de changer l'apparence du texte (comme BBCode à l'aide [i], vous pouvez utiliser <i>et ainsi de suite).

Depuis la création de CSS, la mise en page n'est plus rien qui devrait être fait en HTML, c'est pourquoi CSS a été créé en premier lieu (HTML == Structure, CSS == Layout). Ces balises pourraient également disparaître à l'avenir, après tout, vous pouvez simplement utiliser CSS et des spanbalises pour mettre le texte en gras / italique si vous avez besoin d'une variation de police "sans signification". HTML 5 les autorise toujours mais déclare que le marquage de texte de cette façon n'a aucun sens .

<em>et <strong>d'autre part dit seulement que quelque chose est "souligné" ou "fortement souligné", cela laisse complètement au navigateur la possibilité de le rendre. La plupart des navigateurs s'affichent emen italique et strongen gras comme le suggère la norme par défaut, mais ils ne sont pas obligés de le faire (ils peuvent utiliser différentes couleurs, tailles de police, polices, etc.). Vous pouvez utiliser CSS pour changer le comportement comme vous le souhaitez. Vous pouvez mettre en emgras si vous le souhaitez et en stronggras et rouge, par exemple.


7
<b> et <i> ne sont PAS obsolètes dans HTML 4, et sont toujours entièrement pris en charge même dans le prochain HTML 5. <em> et <strong> ne les remplacent pas. Voir aussi w3.org/TR/html401/index/elements.html
thomasrutter

1
@thomasrutter Ils sont toujours en HMTL5 mais avec une signification différente et avec une explication très détaillée sur la façon de les utiliser ou plutôt, de ne pas les utiliser. Notez que ces balises n'ont aucune signification (le gras et l'italique ne sont pas des significations , ce sont des instructions de conception et HMTL concerne la signification, CSS est une conception simplifiée) - HTML est une description de ce qu'est un texte et non de la façon de le rendre (qui a été séparé après HMTL3 pour une bonne raison) ,.
Mecki

-2

<strong>et <em>sont abstraits (c'est ce que les gens veulent dire quand ils disent que c'est sémantique). <b>et <i>sont des moyens spécifiques de rendre quelque chose de "fort" ou "souligné"

Analogie:

Les deux, <strong>c'est <b>et <em>c'est<i>

comme

"véhicule" signifie "jeep"


1
Je ne vois pas pourquoi cette réponse a été rejetée. De nombreuses autres réponses au contenu similaire ont été bien accueillies.
aditya_m

-4

Nous utilisons la <strong>balise pour le texte qui a une priorité élevée à des fins de référencement comme le nom du produit, le nom de l'entreprise, etc., tandis que le <b>simple le rend en gras.

De même, nous utilisons <em>pour le texte qui a une priorité élevée pour le référencement, tout <i>en rendant le texte en italique.


4
Certaines balises HTML ont vraiment une application SEO. Meta description, meta robot ou lien canonique pour n'en nommer que quelques-uns. Pour autant que nous le sachions, strong / em n'en fait pas partie, ni en théorie ni en pratique.
Sheepy
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.