Was ist der Unterschied zwischen <b> und <strong>, <i> und <em>?

Was ist der Unterschied zwischen <b>und <strong>, <i>und <em>in HTML / XHTML? Wann sollten Sie jeden verwenden?

Sie haben den gleichen Effekt auf normale Webbrowser-Rendering-Engines , aber es gibt einen grundlegenden Unterschied zwischen ihnen.

Wie der Autor in einem Diskussionslistenbeitrag schreibt :

Stellen Sie sich drei verschiedene Situationen vor:

• Internetbrowser
• blinde Leute
• Mobiltelefone

"Fett" ist ein Stil - wenn Sie "Fett ein Wort" sagen , wissen die Leute im Grunde, dass es bedeutet, mehr, sagen wir "Tinte", um die Buchstaben herum hinzuzufügen, bis sie sich mehr von den übrigen Buchstaben abheben.

Für einen Blinden bedeutet das leider nichts. Auf Mobiltelefonen und anderen PDAs ist der Text bereits fett gedruckt, da die Bildschirmauflösung sehr gering ist. Sie können nicht mutig kühn sein, ohne etwas zu vermasseln.

<b>ist ein Stil - wir wissen, wie "fett" aussehen soll.

<strong>ist jedoch ein Hinweis darauf, wie etwas verstanden werden sollte . "Stark" könnte (und oft auch) in einem Browser "fett" bedeuten, aber es könnte auch einen niedrigeren Ton für ein sprechendes Programm wie Jaws (für Blinde) bedeuten oder durch eine Unterstreichung dargestellt werden (da Sie a nicht fett schreiben können) fett) auf einem Palm Pilot.

HTML sollte sich nie mit Stilen befassen. Haben einige Recherchen für „Tim Berners-Lee“ und „das semantische Web.“ <strong>ist semantisch - es beschreibt den Text, den es umgibt (z. B. "dieser Text sollte stärker sein als der Rest des von Ihnen angezeigten Textes" ), anstatt zu beschreiben, wie der umgebende Text angezeigt werden soll (z. B. "dieser Text sollte sein" fett " ).

<b>und <i>sind explizit - sie geben Fett bzw. Kursiv an.

<strong>und <em>sind semantisch - sie geben an, dass der beigefügte Text in irgendeiner Weise "stark" oder "hervorgehoben" sein soll, normalerweise fett und kursiv, aber ermöglichen, dass das eigentliche Styling über CSS gesteuert wird. Daher werden diese in modernen Webseiten bevorzugt.

<strong>und <em>fügen Sie Ihrem Dokument eine zusätzliche semantische Bedeutung hinzu. Es kommt einfach so vor, dass sie Ihrem Text auch einen fetten und kursiven Stil verleihen.

Sie können das Styling natürlich mit CSS überschreiben.

<b>und <i>andererseits nur Schriftstil anwenden und sollte nicht mehr verwendet werden. (Weil Sie mit CSS formatieren sollten und wenn der Text tatsächlich wichtig wäre, würden Sie ihn wahrscheinlich trotzdem "stark" oder "hervorgehoben" machen!)

Hoffe das macht Sinn.

Hier ist eine Zusammenfassung der Definitionen zusammen mit der vorgeschlagenen Verwendung:

<b>... eine Textspanne, auf die zu nützlichen Zwecken hingewiesen wird, ohne dass eine zusätzliche Bedeutung vermittelt wird und ohne dass eine alternative Stimme oder Stimmung impliziert wird, z. B. Schlüsselwörter in einer Dokumentzusammenfassung, Produktnamen in einer Rezension, umsetzbare Wörter in interaktive textgesteuerte Software oder ein Artikel lede .

<strong> ... steht jetzt eher für Wichtigkeit als für starke Betonung.

<i>... eine Spanne von Text in einer anderen Stimme oder Stimmung oder auf andere Weise von der normalen Prosa in einer Weise versetzt, die auf eine andere Textqualität hinweist, wie z. B. eine taxonomische Bezeichnung , einen Fachbegriff , eine Redewendung aus einer anderen Sprache , einen Gedanken oder ein Schiffsname in westlichen Texten.

<em> ... zeigt Betonung an.

(Dies sind alles direkte Zitate aus W3C-Quellen, wobei mein Schwerpunkt hinzugefügt wurde. Siehe: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements und http://www.w3.org /TR/html401/struct/text.html#h-9.2.1 für die Originale)

<b>und <i>sind beide mit dem Stil verbunden, während <em>und <strong>sind semantisch. In HTML 4 werden die ersten als Schriftstilelemente und die letzteren als Phrasenelemente klassifiziert .

Wie Sie richtig angegeben haben <i>und <em>häufig als ähnlich angesehen werden, da Browser häufig beide kursiv darstellen. Aber gemäß den Spezifikationen <em> zeigt Betonung und <strong> zeigt stärkere Betonung an , was ziemlich klar ist, aber oft falsch interpretiert wird. Auf der anderen Seite ist die Unterscheidung zwischen dem Zeitpunkt der Verwendung <i>oder der <b>Frage des Stils eine Frage des Stils.

Während <strong>und <em>natürlich semantisch korrekter sind, scheint es eindeutige legitime Gründe zu geben, die Tags <b>und <i>für vom Kunden geschriebene Inhalte zu verwenden.

In solchen Inhalten können Wörter oder Phrasen fett oder kursiv geschrieben sein, und es liegt im Allgemeinen nicht an uns, die semantischen Gründe für eine solche Fettschrift oder Kursivschrift zu analysieren.

Ferner kann sich ein solcher Inhalt auf fettgedruckte und kursiv geschriebene Wörter und Phrasen beziehen, um eine bestimmte Bedeutung zu vermitteln.

Ein Beispiel wäre eine Englischprüfungsfrage, die einen Schüler anweist, das fettgedruckte Wort zu ersetzen.

<em>und <strong>verbrauchen mehr Bandbreite als <i>und <b>.

Sie erfordern auch mehr Eingabe (wenn nicht automatisch generiert).

Sie überladen auch den Editorbildschirm mit mehr Text. Ich erinnere mich, dass Programmierer kleinere Quelldateien mögen, wenn sie gleich sind. (Und seien wir ehrlich, sie sind die gleichen. Ja, es gibt "technische" (<i> Husten </ i>, ähm, entschuldigen Sie mich) Unterschiede, aber das ist meistens falsch.)

Mit jedem der oben genannten Tags können Sie mithilfe von Stylesheets anpassen, wie sie angezeigt werden sollen, wenn Sie möchten, dass sie anders als ihre Standard-Renderings angezeigt werden.

Wie andere gesagt haben, sind <b> und <i> explizit (dh "diesen Text fett machen"), während <strong> und <em> semantisch sind (dh "dieser Text sollte hervorgehoben werden").

Im Kontext eines modernen Webbrowsers ist es schwierig, den Unterschied zu erkennen (beide scheinen das gleiche Ergebnis zu erzielen, oder?), Aber denken Sie an Bildschirmleser für Sehbehinderte. Wenn ein Bildschirmleser auf ein <i> -Tag stoßen würde, würde er nicht wissen, was er tun soll. Wenn es jedoch auf ein <em> -Tag stößt, weiß es, dass alles, was sich darin befindet, für den Hörer hervorgehoben werden sollte. Und darin erhalten Sie den praktischen Unterschied.

<i>, <b>, <em>Und <strong>Tags sind traditionell gegenständlich. Aber sie wurden gegeben neuen in HTML5 semantische Bedeutung erhalten .

<i>und <b>wurde für den Schriftstil in HTML4 verwendet. <i>wurde für kursiv und <b>für fett verwendet. In HTML5 hat das <i>Tag eine neue semantische Bedeutung von ' alternative Stimme oder Stimmung ' und<b> Tag hat die Bedeutung eines stilistischen Versatzes .

Beispielverwendungen von <i> Tags sind - taxonomische Bezeichnung, Fachbegriff, Redewendung aus einer anderen Sprache, Transliteration, ein Gedanke, Schiffsnamen in westlichen Texten. Sowie -

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

Beispielhafte Verwendungen von <b>Tags sind Schlüsselwörter in einem Dokumentextrakt, Produktnamen in einer Überprüfung, umsetzbare Wörter in einer interaktiven textgesteuerten Software und Artikelführung.

Der folgende Beispielabsatz ist stilistisch von den folgenden Absätzen versetzt.

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

<em>und <strong>hatte die Bedeutung von Betonung und starker Betonung in HTML4. Aber in HTML5 <em>bedeutet betonte Betonung und <strong>bedeutet starke Bedeutung .

Im folgenden Beispiel sollte es beim Lesen des Wortes vor ...

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

Im selben Beispiel können wir das <strong>Tag wie folgt verwenden.

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

am Veranstaltungstermin Bedeutung zu geben.

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

Wie die anderen gesagt haben, ist der Unterschied, dass <b> und <i>Hardcode-Schriftstile, während <strong>und <em>bestimmen die semantische Bedeutung, wobei der Schriftstil (oder die sprechende Browser-Intonation oder was-haben-Sie) zum Zeitpunkt des Renderns des Textes (oder) festgelegt werden muss gesprochen).

Sie können sich dies als einen Unterschied zwischen einem „physischen“ Schriftstil und einem „logischen“ Stil vorstellen, wenn Sie so wollen. Zu einem späteren Zeitpunkt möchten Sie möglicherweise den Weg ändern<strong> und<em> Text angezeigt wird, indem Sie beispielsweise die Eigenschaften in einem Stylesheet ändern, um Farb- und Größenänderungen hinzuzufügen, oder sogar ganz andere Schriftarten verwenden. Wenn Sie "logisches" Markup anstelle von fest codiertem "physischem" Markup verwendet haben, können Sie die Anzeigeeigenschaften einfach an jeweils einer Stelle in Ihrem Stylesheet ändern. Anschließend werden alle Seiten, die auf dieses Stylesheet verweisen, automatisch ohne geändert jemals bearbeiten müssen.

Ziemlich schlau, oder?

Dies ist auch der Grund für die Definition von Unterstilen (auf die mit dem verwiesen wird) style= Eigenschaft in Text-Tags ) für Absätze, Tabellenzellen, Kopfzeilentext, Beschriftungen usw. und deren Verwendung<div> Tags. Sie können die physische Darstellung Ihrer logischen Stile im Stylesheet definieren. Die Änderungen werden automatisch auf den Webseiten angezeigt, die auf dieses Stylesheet verweisen. Möchten Sie eine andere Darstellung für den Quellcode? Definieren Sie Schriftart, Größe, Gewicht, Abstand usw. für Ihren "Code" -Stil neu.

Wenn Sie XHTML verwenden, können Sie sogar Ihre eigenen semantischen Tags definieren, und Ihr Stylesheet führt die Konvertierungen in physische Schriftstile und Layouts für Sie durch.

Ich verwende sowohl <strong> als auch <b> aus genau den in diesem Antwort-Thread genannten Gründen. Es gibt Zeiten, in denen fett gedruckte Texte einfach besser aussehen , aber nicht unbedingt semantisch wichtiger sind als der Rest des Satzes. Hier ist ein Beispiel von einer Seite, an der ich gerade arbeite:

"Ruft <strong> alle </ strong> Bücher über <b> Lacrosse </ b> ab."

In diesem Satz ist das Wort "alles" sehr wichtig und "Lacrosse" weniger - ich wollte es nur fett, weil es einen Suchbegriff darstellt, also wollte ich eine visuelle Trennung. Wenn Sie die Seite mit einem Bildschirmleser anzeigen, muss sie meiner Meinung nach nicht aus dem Weg gehen, um das Wort "Lacrosse" hervorzuheben.

Ich würde mir eher vorstellen, dass die meisten Webentwickler einen der anderen verwenden, aber beide sind in Ordnung - <b> ist definitiv nicht veraltet, wie einige Leute behauptet haben. Für mich ist es nur eine feine Linie zwischen visueller Anziehungskraft und Bedeutung.

Verwenden Sie sie nur, wenn die Verwendung von CSS-Stilklassen aus irgendeinem Grund nicht überzeugend oder unmöglich ist (wie bei Blogsystemen dürfen nur einige Tags in Posts und eventuell eingebetteten Stilen verwendet werden). Ein weiterer Grund ist die Unterstützung für sehr alte Browser (einige mobile Geräte?) Oder primitive Suchmaschinen (die Punkte für <b>oder geben<strong> Tags vergeben, anstatt CSS-Stile zu analysieren).

Wenn Sie CSS-Stile definieren können, verwenden Sie diese.

Für fett gedruckten Text mit <b> gedruckten Tag

Für Text wichtig mit <strong> Tag

Für kursiven Textstil mit <i> Tag

Für hervorgehobenen Text mit <em> Tag

<b>und <i>sollten vermieden werden, da sie den Stil des Textes beschreiben. Verwenden Sie stattdessen <strong>und<em> weil dies die Semantik (die Bedeutung) des Textes beschreibt.

Wie bei allen Dingen in HTML sollten Sie nicht darüber nachdenken, wie es aussehen soll , sondern was Sie eigentlich meinen . Sicher, es ist für Sie vielleicht nur fett und kursiv, für einen Bildschirmleser jedoch nicht.

b oder i bedeutet, dass der Text fett oder kursiv dargestellt werden soll. stark oder em bedeutet, dass der Text so gerendert werden soll, dass der Benutzer ihn als "wichtig" versteht. Standardmäßig wird stark so fett und kursiv dargestellt, aber einige andere Kulturen verwenden möglicherweise eine andere Zuordnung.

Wie Strings in einem Programm wären b und i "hartcodiert", während strong und em "lokalisiert" wären.

"Sie haben den gleichen Effekt. XHTML, eine sauberere, neuere Version von HTML, empfiehlt jedoch die Verwendung des <strong>Tags. Stark ist besser, weil es leichter zu lesen ist - seine Bedeutung ist klarer. <strong>Vermittelt außerdem eine Bedeutung - zeigt den Text stark - während<b> (für fett) eine Methode vermittelt - Fettdruck des Textes. Mit stark macht Ihr Code immer noch Sinn, wenn Sie CSS-Stylesheets verwenden, um die Methoden zum Stärken des Textes zu ändern.

Gleiches gilt für den Unterschied zwischen <i>und <em>".

Google Dixit:

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

HTML-Formatierungselemente:

HTML definiert auch spezielle Elemente zum Definieren von Text mit einer besonderen Bedeutung. HTML verwendet Elemente wie <b> und <i> zum Formatieren der Ausgabe, z. B. fett oder kursiv.

HTML Fettdruck und starke Formatierung:

Das HTML-Element <b> definiert fetten Text ohne zusätzliche Bedeutung.

<b>This text is bold</b>

Das HTML <strong> -Element definiert starken Text mit zusätzlicher semantischer "starker" Bedeutung.

<strong>This text is strong</strong>

HTML Kursiv und Hervorgehobene Formatierung:

Das HTML <i> -Element definiert kursiven Text ohne zusätzliche Bedeutung.

<i>This text is italic</i>

Das HTML <em> -Element definiert hervorgehobenen Text mit zusätzlicher semantischer Bedeutung.

<em>This text is emphasized</em>

Sie sollten generell versuchen, <b>und zu vermeiden <i>. Sie wurden in früheren HMTL-Versionen vor der Erstellung von CSS für das Layout der Seite (das Ändern des Aussehens) eingeführt, wie das inzwischen entfernte fontTag, und wurden hauptsächlich aus Gründen der Abwärtskompatibilität beibehalten, da einige Foren Inline-HTML zulassen und dies einfach ist Möglichkeit, das Aussehen von Text zu ändern (wie BBCode mit [i], können Sie verwenden <i>und so weiter).

Seit der Erstellung von CSS ist das Layout eigentlich nichts mehr, was in HTML durchgeführt werden sollte. Deshalb wurde CSS in erster Linie erstellt (HTML == Struktur, CSS == Layout). Diese Tags können auch in Zukunft verschwinden. Schließlich können Sie nur CSS und spanTags verwenden, um Text fett / kursiv zu machen, wenn Sie eine "bedeutungslose" Schriftvariante benötigen. HTML 5 erlaubt sie weiterhin, erklärt jedoch, dass das Markieren von Text auf diese Weise keine Bedeutung hat .

<em>und <strong>sagt andererseits nur, dass etwas "betont" oder "stark betont" ist, es lässt es für den Browser völlig offen, wie es gerendert werden soll. Die meisten Browser werden standardmäßig emso kursiv und strongfett dargestellt, wie es der Standard vorschlägt. Sie sind jedoch nicht dazu gezwungen (sie verwenden möglicherweise unterschiedliche Farben, Schriftgrößen, Schriftarten usw.). Sie können CSS verwenden, um das Verhalten nach Ihren Wünschen zu ändern. Sie können emfett machen, wenn Sie möchten, und strongfett und rot, zum Beispiel.

<strong>und <em>sind abstrakt (was die Leute meinen, wenn sie sagen, dass es semantisch ist). <b>und <i>sind spezifische Wege, um etwas "stark" oder "betont" zu machen

Analogie:

Beides <strong>ist zu <b>und <em>ist zu<i>

wie

"Fahrzeug" ist zu "Jeep"

Wir verwenden das <strong>Tag für Text, der für SEO-Zwecke wie Produktname, Firmenname usw. eine hohe Priorität hat, während <b>einfach es fett macht.

In ähnlicher Weise verwenden wir <em>Text, der für SEO eine hohe Priorität hat, während <i>der Text einfach kursiv dargestellt wird.