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 les utiliser?

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 " ).

<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.

<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.

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)

<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.

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.

<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.

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.

<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

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.

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.

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.

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

<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.

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".

"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

É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>

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.

<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"

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.