Was ist der Unterschied zwischen <b>
y <strong>
, <i>
y <em>
in HTML/XHTML? Wann sollten Sie beide verwenden?
Antworten
Zu viele Anzeigen?<b>
y <i>
, die keine tatsächliche semantische Bedeutung haben (wie @splattne hervorhob), wahr war, eine lange Zeit vor. In modernem HTML5 ( <!DOCTYPE html>
) sie faire Bedeutung haben. Sehen Sie sich die folgenden Links an.
Semantische Bedeutung (aus MDN)
-
<b>
: Aufmerksamkeit auf das Element lenken- Schlüsselwörter in einer Zusammenfassung
- Produktnamen.
<p>Here at company XYZ, we use <b>HTML</b> and <b>Javascript</b>.</p>
-
<i>
: Idiomatisches Textelement- Alternative Stimme oder Stimmung
- Taxonomische Bezeichnungen (wie z. B. die Gattung und Art "Homo sapiens")
- Idiomatische Begriffe aus einer anderen Sprache (wie "et cetera")
- Technische Begriffe
<p>I <i>did</i> tell him, to arrive on time for the meeting.</p>
<b>
vs. <strong>
Es mag hilfreich sein, sich klarzumachen, dass beides gültige und semantische Elemente in HTML5 sind und dass es ein Zufall ist, dass beide in den meisten Browsern das gleiche Standard-Styling (Fettschrift) haben (obwohl einige ältere Browser tatsächlich unterstreichen <strong>
). Jedes Element ist für bestimmte Arten von Szenarien gedacht, und wenn Sie Text zu Dekorationszwecken fett drucken möchten, sollten Sie stattdessen die CSS-Eigenschaft font-weight verwenden. fuente
<i>
vs. <em>
El <em>
Element stellt die Betonung seines Inhalts dar, während das <i>
Element steht für Text, der von der normalen Prosa abgesetzt ist. fuente
Meine 2 Cents
Ich persönlich bevorzuge <b>
y <i>
über <strong>
y <em>
.
Sie sind kürzer, und ihre semantische Bedeutung ist einfach macht Sinn auch aus der Sicht der Entwickler. Ich habe keine Ahnung, ob die heutigen Screenreader mit ihnen arbeiten können. Wenn nicht, denke ich, dass sie es irgendwann tun werden. A18n ist ein schwieriges Thema, ich folge einfach den Anweisungen der Dokumentation. MDN sagt, ich kann sie verwenden, also tue ich es.
As others have said <b> and <i> are explicit (i.e. "make this text bold"), whereas <strong> and <em> are semantic (i.e. "this text should be emphasised").
Im Kontext eines modernen Webbrowsers ist es schwierig, den Unterschied zu erkennen (beide scheinen das gleiche Ergebnis zu liefern, nicht wahr?), aber denken Sie an Bildschirmlesegeräte für sehbehinderte Menschen. If a screen-reader came across an <i> tag, it wouldn't know what to do. But if it comes across a <em> tag, it knows that whatever is within should be emphasised to the listener. And therein you get the practical difference.
Ich verwende sowohl <strong> als auch <b>, und zwar aus genau den Gründen, die in den Antworten in diesem Thread genannt wurden. Es gibt Zeiten, in denen ein fettgedruckter Text einfach siehe besser, aber er ist nicht unbedingt semantisch wichtiger als der Rest des Satzes. Hier ist ein Beispiel von einer Seite, an der ich gerade arbeite:
"Retrieves <strong>all</strong> books about <b>lacrosse</b>."
In diesem Satz ist das Wort "all" sehr wichtig und "Lacrosse" weniger - ich wollte es lediglich fett drucken, weil es einen Suchbegriff darstellt, und deshalb wollte ich eine optische Trennung. Wenn Sie die Seite mit einem Bildschirmlesegerät betrachten, muss das Wort "Lacrosse" meiner Meinung nach nicht übermäßig hervorgehoben werden.
Ich könnte mir vorstellen, dass die meisten Webentwickler das eine oder das andere verwenden, aber beides ist in Ordnung -<b> ist ganz sicher nicht veraltet, wie einige Leute behauptet haben. Für mich ist es nur ein schmaler Grat zwischen visueller Attraktivität und Bedeutung.
Verwenden Sie sie nur, wenn die Verwendung von CSS-Stilklassen aus irgendeinem Grund nicht sinnvoll oder unmöglich ist (wie bei Blog-Systemen, die nur bestimmte Tags zur Verwendung in Beiträgen und eventuell eingebettete Stile zulassen). Ein weiterer Grund ist die Unterstützung von sehr alten Browsern (einige mobile Geräte?) oder primitiven Suchmaschinen (die Punkte für <b>
o <strong>
Tags, anstatt die CSS-Stile zu analysieren).
Wenn Sie CSS-Stile definieren können, verwenden Sie diese.
Wie bereits erwähnt, besteht der Unterschied darin, dass <b>
y <i>
Hardcode-Schriftstile, während <strong>
y <em>
die semantische Bedeutung diktieren, wobei der Schriftstil (oder die Intonation des Sprachbrowsers oder was auch immer) zum Zeitpunkt der Wiedergabe (oder des Sprechens) des Textes bestimmt wird.
Wenn Sie so wollen, können Sie dies als Unterschied zwischen einem "physischen" und einem "logischen" Schriftstil betrachten. Zu einem späteren Zeitpunkt möchten Sie vielleicht die Art und Weise ändern <strong>
y <em>
Text angezeigt werden, z. B. durch Ändern von Eigenschaften in einer Stilvorlage, um Farbe und Größe zu ändern oder sogar ganz andere Schriftarten zu verwenden. Wenn Sie "logisches" Markup anstelle von hartkodiertem "physischem" Markup verwendet haben, können Sie die Anzeigeeigenschaften einfach an jeweils einer Stelle in Ihrer Stilvorlage ändern, und dann alle Seiten, die auf diese Formatvorlage verweisen, werden automatisch geändert ohne sie jemals bearbeiten zu müssen.
Ziemlich raffiniert, oder?
Dies ist auch der Grund für die Definition von Unterstilen (referenziert mit der style=
Eigenschaft in Text-Tags) für Absätze, Tabellenzellen, Kopfzeilentext, Beschriftungen usw., und mit <div>
Tags. Sie können die physische Darstellung für Ihre logischen Stile in der Stilvorlage definieren, und die Änderungen werden automatisch in den Webseiten, die auf diese Stilvorlage verweisen, übernommen. Sie möchten eine andere Darstellung für den Quellcode? Definieren Sie Schriftart, Größe, Gewicht, Abstände usw. für Ihren "Code"-Stil neu.
Wenn Sie XHTML verwenden, können Sie sogar Ihre eigenen semantischen Tags definieren, und Ihre Formatvorlage würde die Umwandlung in physische Schriftstile und Layouts für Sie übernehmen.