What's the difference between <b> and <strong>, <i> and <em>?

Question

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

Answer 1

Sie haben die gleiche Wirkung auf normale Webbrowser-Rendering-Engines aber es gibt eine grundlegender Unterschied zwischen ihnen.

Der Autor schreibt in einen Beitrag zur Diskussionsliste :

Denken Sie an drei verschiedene Situationen:

• Web-Browser
• blinde Menschen
• Handys

"Kühn" ist ein Stil - wenn Sie sagen "Ein fettes Wort" wissen die Leute grundsätzlich, dass es bedeutet, mehr, sagen wir "Tinte", um die Buchstaben herum hinzuzufügen, bis sie sich von den übrigen Buchstaben abheben.

Für einen Blinden bedeutet das leider nichts. Auf Handys und anderen PDAs ist der Text bereits fett, weil die Bildschirmauflösung sehr klein ist. Man kann einen fettgedruckten Text nicht fett machen, ohne etwas zu vermasseln.

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

<strong> jedoch ist ein Hinweis darauf, wie etwas verstanden werden sollte . "Stark" kann in einem Browser "fett" bedeuten (und tut es oft auch), aber es kann auch einen niedrigeren Ton für ein Sprachprogramm wie Jaws (für Blinde) bedeuten oder auf einem Palm Pilot durch eine Unterstreichung dargestellt werden (da man ein fettes Wort nicht fett machen kann).

HTML war nie dazu gedacht, sich um Stile zu kümmern. Machen Sie einige Suchen para "Tim Berners-Lee" y "das semantische Web". <strong> ist semantisch - er beschreibt den Text, den er umgibt (z. B., "Dieser Text sollte stärker sein als der Rest des Textes, den Sie angezeigt haben". ) im Gegensatz zur Beschreibung von wie den Text, der ihn umgibt sollte angezeigt werden (z.B., "dieser Text sollte fett sein" ).

Answer 2

<b> y <i> sind explizit - sie spezifizieren Fett- bzw. Kursivdruck.

<strong> y <em> sind semantisch - sie geben an, dass der eingeschlossene Text in irgendeiner Weise "stark" oder "betont" sein soll, in der Regel fett und kursiv, ermöglichen aber die Steuerung der tatsächlichen Gestaltung über CSS. Daher werden sie auf modernen Webseiten bevorzugt.

Answer 3

<strong> y <em> Ihrem Dokument zusätzliche semantische Bedeutung verleihen. Zufälligerweise verleihen sie Ihrem Text auch einen fetten und kursiven Stil.

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

<b> y <i> hingegen dienen nur der Gestaltung der Schrift und sollten nicht mehr verwendet werden. (Denn man soll ja mit CSS formatieren, und wenn der Text wirklich wichtig wäre, würde man ihn wahrscheinlich sowieso "stark" oder "betont" machen!)

Ich hoffe, das macht Sinn.

Answer 4

Ich wage hier eine historische und praktische Betrachtung:

Ja, gemäß den Spezifikationen, <strong> hatte in HTML4 eine semantische Bedeutung und <b> hatte eine rein präsentative Bedeutung.

Ja, als HTML5 aufkam, wurde eine neue semantische Bedeutung eingeführt, die etwas anders war für b y i .

Ja, die Das W3C empfiehlt - Grundsätzlich - TL,DR; verwenden Sie nicht b und i.

Sie sollten immer bedenken, dass der Inhalt eines b-Elements nicht immer fett und der eines i-Elements nicht immer kursiv sein muss. Der tatsächliche Stil ist von den CSS-Stildefinitionen abhängig. Sie sollten auch bedenken, dass fett und kursiv in bestimmten Sprachen nicht der bevorzugte Stil für Inhalte sein kann. Sie sollten die Tags b und i nicht verwenden, wenn es ein beschreibenderes und relevanteres Tag gibt.

ABER:

In der realen Welt des Internets gibt es Unmengen an bestehendem HTML, das niemals aktualisiert wird. Das reale Internet muss Inhalte berücksichtigen, die in einem riesigen Netzwerk von Software- und CMS-Systemen erstellt und per Copy & Paste übertragen werden, die alle unterschiedliche Entwicklerteams haben und in verschiedenen Epochen entwickelt wurden.

Wenn Sie also HTML schreiben oder ein System aufbauen, das HTML für andere Leute schreibt - sicher - verwenden Sie unbedingt <strong> anstelle von <b> für "stark hervorgehoben", weil es semantisch korrekter ist.

In der Praxis sieht es jedoch so aus, dass die semantische und stilistische Bedeutung von <strong> y <b> haben sich im Laufe der Zeit aus der Not heraus zusammengeschlossen.

Wenn ich ein CMS aufbaue, das das Einfügen von gestyltem Text erlaubt, muss ich sowohl für die Leute, die den Text einfügen <b> und bedeutet "stark hervorgehoben" und für Leute, die einfügen <strong> und bedeutet "diesen Text fett machen". Das mag nicht "richtig" sein, aber so funktioniert die reale Welt im Moment.

Wenn ich also ein Stylesheet für diese Website schreibe, werde ich wahrscheinlich am Ende einige Styles schreiben, die so aussehen:

b,
strong {
  font-weight: 700;
  /* ... more styles here */
}

i,
em {
  font-style: italic;
  /* ... more styles here */
}

Oder ich verlasse mich auf die Standardeinstellungen des Browsers, die in allen modernen Browsern, die ich kenne, das Gleiche tun wie der obige Code.

Oder ich bin eine von wahrscheinlich Millionen von Websites, die normalize.css, die dafür sorgt, dass b und strong gleich behandelt werden .

Es gibt bereits einen riesigen Ozean von HTML, der mit dieser Erwartung arbeitet, ich kann mir einfach nicht vorstellen, dass b wird IMMER abgeschrieben zugunsten von strong oder dass die Browser jemals anfangen werden, sie standardmäßig anders darzustellen.

Das war's also. Das ist mein heißer Draht zu Semantik, Geschichte und der realen Welt. Sind b/i und stark/em dasselbe? Nein. Werden beide wahrscheinlich bis zum Zusammenbruch der modernen Zivilisation existieren und in fast jeder Situation als identisch behandelt werden? Ich denke, ja.

Answer 5

Hier finden Sie eine Zusammenfassung der Definitionen und Vorschläge für die Verwendung:

<b> ...eine Textpassage, auf die aus Gründen der Zweckmäßigkeit aufmerksam gemacht wird, ohne dass eine zusätzliche Bedeutung vermittelt wird und ohne dass eine andere Stimme oder Stimmung angedeutet wird, wie z. B. Schlüsselwörter in einer Zusammenfassung des Dokuments, Produktnamen in einer Rezension, handlungsfähige Worte in interaktiver, textgesteuerter Software, oder ein Artikelüberschrift .

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

<i> ...eine Textpassage in einer anderen Stimme oder Stimmung oder in einer anderen Weise, die von der normalen Prosa abweicht und eine andere Qualität des Textes anzeigt, wie z. B. ein taxonomische Bezeichnung , a Fachbegriff an idiomatische Phrase aus einer anderen Sprache , a dachte oder ein Schiffsname in westlichen Texten.

<em> ...zeigt die Betonung an.

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