Warum sind die Tags <b> und <i> veraltet?

98

Diese Frage tauchte in einer meiner Hochschulklassen auf. Der Professor gab nur die Antwort, dass es aussagekräftiger war, aber es scheint, als ob <b>und <i>in ihrer Bedeutung eher explizit und einfacher zu tippen als <strong>und <em>.

Was waren die offiziellen Argumente für die Ablehnung dieser Tags?

LanceLafontaine
quelle
38
Ich bin mir ziemlich sicher <b>und bin <i>nicht veraltet.
Doval
4
Ich neige dazu, darüber so zu argumentieren: Soll ein Screenreader dies anders lesen oder nicht? Wenn ich nur Wörter heraussuchen möchte, die für einen (nicht blinden) Leser leicht zu finden sind, könnte ich sie verwenden b- sie bedeuten wörtlich "das ist fett", nicht "das ist betont". Aber das Wichtigste ist, dass sie unterschiedliche Bedeutungen haben - es gibt keine Abwertung, nur nicht das, was Sie früher getan haben boder i, was Sie normalerweise gemeint haben strongoder em.
Luaan
1
@MichaelT Ich erinnere mich, als ich mit LaTeX anfing, war ich verwirrt über die verschiedenen Möglichkeiten, wie Text kursiv und fett geschrieben werden kann, wenn ich mit einem leeren Dokument beginne (ohne Stilpakete).
Cole Johnson
@Luaan: Auch wenn <i>und <b>nicht wirklich veraltet sind <tt>und <u>sind, und die Frage wäre für diese genauso zutreffend.
Supercat

Antworten:

135

Letzten Sommer habe ich die gesamte HTML5-Spezifikation und alle vorherigen HTML-Spezifikationen (auch die verlassenen) sowie alle CSS-Spezifikationen, die ich finden konnte, und viele XML-Spezifikationen gelesen. Da ich semantisch reiche Hypertext-Dokumente liebe, möchte ich Ihnen die Idee hinter der relevanten HTML-Semantik in HTML5 geben.

Vor HTML5

Vor HTML5 iund bwaren in der Tat aus der Mode. Der Grund war, dass sie im Wesentlichen wie embzw. strongarbeiteten, jedoch mit Fokus auf Präsentation und nicht auf Semantik (was schlecht ist).

iBedeutete in der Tat, dass der Text kursiv gedruckt werden sollte (etwas darüber, wie der Text auf dem Bildschirm gerendert werden sollte). Andererseits embedeutete dies, dass der Text hervorgehoben werden sollte (er sagte etwas über die Semantik des Textes aus).

Hier gibt es einen wichtigen theoretischen Unterschied. Wenn Sie verwenden em, weiß das Benutzerprogramm (= Browser), dass der Text hervorgehoben werden muss, damit er kursiv dargestellt werden kann, wenn das Dokument auf dem Bildschirm angezeigt wird (oder Großbuchstaben, wenn keine Formatierung möglich ist, oder vielleicht sogar fett der Benutzer bevorzugt das), er kann es anders aussprechen, wenn das Dokument mit dem Benutzer gesprochen wird usw.

Beachten Sie, dass es bei der Betonung wirklich um Semantik geht. Zum Beispiel die Phrasen

  • Die Katze gehört mir. (= nicht der Hund!)
  • Die Katze gehört mir . (= nicht deins!)

habe nicht die gleiche Bedeutung.

Der gleiche Unterschied gilt für b(Fettdruck) und strong(starke Betonung).

Ein allgemeines Prinzip des digitalen Schreibens im Allgemeinen und des Hypertext-Erstellens im Besonderen ist, dass Sie Inhalt und Stil trennen sollten. Bei der Hypertext-Erstellung bedeutet dies, dass sich der Inhalt in der HTML-Datei und der Stil in einer CSS-Datei (oder einer Reihe von CSS-Dateien) befinden sollte. Ein anderes, aber verwandtes Prinzip ist, dass das Dokument reich an Semantik sein sollte (wie das Markieren von Kopf- und Fußzeilen, Listen, Hervorhebungen, Adressen, Navigationsbereichen usw.). Dies hat eine Reihe von Vorteilen:

  • Es ist für Computerprogramme viel einfacher, das Dokument zu interpretieren. Diese Programme umfassen Browser, Text-to-Speech-Anwendungen, Suchmaschinen und digitale Assistenten. (Mit dem Browser können Sie beispielsweise eine Adresse in Ihrem Adressbuch speichern, wenn sie nur gefunden und interpretiert werden kann. Außerdem wissen Sie möglicherweise, dass Microsoft Word ein Inhaltsverzeichnis für Sie erstellen und automatisch aktualisieren kann, wenn Sie Ihre Überschriften korrekt markieren .)
  • Es ist viel einfacher, den Stil später zu ändern. (Wenn Sie die Farbe aller Überschriften der dritten Ebene in Ihrem 860-seitigen Dokument ändern möchten, können Sie eine einzelne Zeile im Stylesheet ändern. Wenn Sie Inhalt und Präsentation gemischt hätten, müssten Sie das gesamte Dokument manuell durchgehen Und Sie würden wahrscheinlich ein oder zwei Überschriften verpassen, wodurch das Dokument unprofessionell aussieht.)
  • Sie können je nach den Umständen unterschiedliche Stylesheets verwenden (wird das Dokument auf dem Bildschirm angezeigt oder auf Papier gedruckt?). Sie können sogar den Endbenutzer den Stil selbst auswählen lassen. (Meine Website bietet eine Reihe alternativer Stylesheets. In IE und FF können Sie diese über das Menü Ansicht ändern.)

Also, kurz gesagt, iund bwaren veraltet, weil es sich um HTML-Tags handelte , die sich um Präsentationen handelten , was völlig falsch ist.

In HTML5

In HTML5 iund bsind nicht mehr veraltet. Stattdessen erhalten sie eine sematische Bedeutung . Es geht also jetzt eigentlich um Semantik und nicht um Präsentation.

Nach wie vor emkennzeichnen Sie die Betonung mit: "Die Katze gehört mir." Sie verwenden sie jedoch ifür fast alle anderen Fälle, in denen Sie Kursivschrift in einem gedruckten Werk verwenden würden. Zum Beispiel:

  • Sie verwenden i, um taxonomische Bezeichnungen zu markieren: "Ich mag R. norvegicus ."
  • Sie ikennzeichnen eine Phrase in einer anderen Sprache als den umgebenden Text: À la carte
  • Sie verwenden i, um ein Wort zu markieren, wenn Sie über das Wort selbst sprechen: " Getränk ist sowohl ein Substantiv als auch ein Verb"

Es ist auch eine gute Idee, das classAttribut zu verwenden, um die genaue Verwendung anzugeben (auch Google "Mikroformat" und "Mikrodaten"). Und natürlich sollten Sie im zweiten Fall das langAttribut wirklich verwenden , um die richtige Sprache anzugeben. (Andernfalls könnte beispielsweise ein Text-to-Speech-Agent den Text falsch aussprechen.)

Vor ungefähr einem Jahr stand in der HTML5-Spezifikation auch, dass citeBücher, Filme, Opern, Gemälde usw. mit Namen versehen werden sollten:

  • Was haltet ihr von Nymphomanin ?

Schließlich wird seit langem dfnverwendet, um die definierende Instanz einer Phrase in einem Text zu markieren (wie eine mathematische Definition oder die Definition eines Begriffs):

  • Eine Gruppe ist eine Menge X, die mit einer einzelnen Binäroperation * ausgestattet ist, so dass ...

Die Kursivschrift in Ihrem gedruckten Buch, die viele verschiedene Bedeutungen haben kann, wird also durch vier verschiedene HTML5-Tags dargestellt. Das ist wirklich großartig, weil die Semantik gut ist, wie ich Sie zuvor zu überzeugen versucht habe. (Zum Beispiel können Sie Ihren Browser bitten, eine Liste aller Definitionen im Text zu erstellen, damit Sie sicherstellen können, dass Sie alle vor der Prüfung kennen.)

In Bezug auf strongund bheißt es in der HTML5-Spezifikation, dass strongein wichtiger Teil des Textes markiert werden sollte, z. B. eine Warnung oder ein sehr wichtiges Wort in einem Satz. Auf der anderen Seite bsollte es verwendet werden, um Dinge zu markieren, die im Text leicht zu finden sein müssen, wie z. B. Stichwörter. Ich benutze auch bals Überschriften in Listenelementen (LIs).

Andreas Rejbrand
quelle
1
Korrektur: Das Definitions-Tag ist <dfn>nicht <def>. Ansonsten tolle ausführliche Zusammenfassung aller Themen. Ihr Vorschlag, <b>als Überschriften in Listenelementen zu verwenden, ist interessant. Der semantische Ansatz besteht darin, eine Definitionsliste zu verwenden. Da derzeit keine Browser diese Liste unterstützen display:run-in, sollten Sie Inline-Keyword-Markups mit <b>oder verwenden, <span>um das bestmögliche Ergebnis zu erzielen.
AmeliaBR
@AmeliaBR. Vielen Dank, dass Sie den Tippfehler (def) beobachtet haben. Zu den Definitionslisten: Definitionslisten sollten für Name-Wert-Paare verwendet werden, und ich verwende sie immer dafür (siehe zum Beispiel mein Gästebuch ). Ich habe auch geliebt display:run-in, aber da die Unterstützung abnimmt , müssen Sie den floatoder den content:Trick verwenden, siehe rejbrand.se/rejbrand/news.asp?ItemIndex=169 . Wenn ich über bdas Markieren von Überschriften in Listen spreche, meine ich nicht Name-Wert-Paare, sondern einfache Listen, in denen ich in jedem Element eine Überschrift verwenden möchte.
Andreas Rejbrand
1
@SarahofGaia Es gibt mindestens zwei Begründungsfehler, <b>die ermutigten Text garantieren. 1) Screenreader, Braillezeilen und andere Mittel zum Verzehren von Text, für die dickere Glyphen bedeutungslos sind. 2) b { font-weight: normal }, was bedeutet, dass der Anzeigestil auch nicht festgelegt ist <b>.
8bittree
1
Schließlich sind Sie immer Ihre eigene CSS zu liefern , wenn Sie den Browser nicht trauen: b, strong { font-weight:bold; }. Auf diese Weise können Sie so sicher sein, wie Sie nur könnten. Mit CSS können Sie das visuelle Format festlegen. Bei HTML geht es um die Bedeutung (Inhalt), bei CSS um die visuelle Darstellung.
Andreas Rejbrand
1
Diese Antwort gab mir das Verständnis, warum ich meine Schriftart-Tags in CSS ändern muss. Ich mochte Schrift-Tags immer fett und das alles, jetzt verstehe ich, warum ich sie nicht verwenden sollte. Vielen Dank
Andreas
58

Wie Doval sagt, sind sie nicht veraltet. Sie existieren immer noch , sollten aber anders verwendet werden, als es viele Leute vor HTML5 gewohnt waren.

Es geht um 'semantisches' HTML. Es sollte beschreiben, was es ist, anstatt wie es aussehen sollte. Der Browser oder theoretisch jedes andere Anzeigemedium (z. B. eine Lese-App für Blinde) sollte entscheiden können, wie genau interpretiert werden soll.

Aus diesem Grund sollten Sie keine CSS-Klassennamen wie "rot" und beschreibendere Klassen verwenden, die die funktionale Idee beschreiben, die hinter der Verwendung einer anderen Farbe steht. Sie können später entscheiden, dass Grün besser ist (und möglicherweise sollte alles "Starke" mit roter Farbe anstelle von fettem Text angezeigt werden). Oder ein farbenblinder Benutzer kann einige spezielle Browsereinstellungen haben, bei denen Farben durch andere Mittel ersetzt werden.

thorsten müller
quelle
1
Gibt es Situationen, in denen es vorzuziehen ist, <b> anstelle von <strong> zu verwenden? Oder ist <strong> immer ein "semantischeres" Tag?
LanceLafontaine
4
In etwa könnten Sie <b> für Dinge verwenden, die "hervorgehoben", aber nicht "hervorgehoben" werden sollen, wie Schlüsselwörter in einem Text. In der technischen Dokumentation finden Sie häufig verschiedene Textstile, mit denen bestimmte Attribute angezeigt werden, z. B. Codebeispiele für Programmierbücher oder technische Begriffe. Für solche Anwendungsfälle könnte ein technischer Begriff <b> oder <i> verwendet werden.
Thorsten Müller
3
@LanceLafontaine Schauen Sie sich den offiziellen Standard an .
Rufflewind
4
@ thorstenmüller Ich denke, das ist auch ein schlechtes Beispiel ... es ist der Lehrbuchfall, in dem das Management später entscheidet, dass die Attribute nicht fett, sondern unterstrichen, sondern in <span class="keyword">...</span>Schreibschrift geschrieben werden sollen eine Menge Ärger.
CompuChip
2
@LanceLafontaine <b>ist ein Randfall , aber es gibt gute Beispiele für <i>Fälle, in denen dies <em>unangemessen ist: wissenschaftliche Namen von Arten oder lateinische Wörter, die ins Englische übernommen wurden (Sie könnten eine Spanne mit einem Sprachattribut verwenden, aber das hat alle möglichen anderen Implikationen - - Ein Screenreader kann Stimmen für eine andere Sprache wechseln. Es kann auch verwendet werden, um Titel anderer Werke kursiv zu schreiben, obwohl der semantisch korrekte Ansatz zu verwenden ist <cite>.
AmeliaBR
41

Die wahre Geschichte ist , dass bund iwurden zum ersten Mal überholt, veraltet, verflucht, und als „Präsentations“ in verschiedenen HTML5 Entwürfen (allgemein gesprochen) anatematized, aber dann erkannten sie , dass diese Tags sind weit verbreitet und auch von vielen Authoring - Programmen erzeugt. Anstatt sie einfach zuzulassen, entwickelten sie erfundene neue „semantische“ Definitionen, um die Elemente zulassen zu können, aber dennoch so zu tun, als seien sie strikt in Bezug auf das „Präsentations-Markup“. Die neuen Definitionen sind von Entwurf zu Entwurf unterschiedlich und unklar: Es gibt kaum zwei Personen, die sie auf die gleiche Weise verstehen und interpretieren.

Sorry, keine Referenzen. Die obige Beschreibung ist das Ergebnis des Verfolgens der Änderungen und des Lesens der Entwürfe und Diskussionen, häufig zwischen den Zeilen. Sie erklären nicht ausdrücklich die Ursache. Ich denke immer noch, dass es die wahre Geschichte ist.

Die Schlussfolgerung lautet: Weiter. Hier gibt es nichts Nützliches. Die Elemente bund itun dasselbe wie immer: Sie machen die Schrift fett bzw. kursiv mit den üblichen Einschränkungen. Dies ist die Realität, die Sie berücksichtigen sollten, nicht die quasischolastische „Semantik“, die keinen Einfluss auf Browser, Suchmaschinen oder andere Software hat.

Jukka K. Korpela
quelle
3
Das heißt, Sie können der quasischolastischen Semantik folgen, indem Sie diese <b>als eine lustige Art behandeln <span>, die standardmäßig fett dargestellt wird. Wenn Sie sich dann die Mühe machen, geben Sie Ihren Verwendungszwecken auch ein classAttribut, damit Sie bei Bedarf mehrere Dinge gleichzeitig neu formatieren können, die es verwendet haben, weil sie eine gemeinsame Semantik haben. Es ist quasischolastisch in dem Sinne, dass die Leute denken, Sie wären im Kopf, b.productname {font-weight: normal; font-style: italic; }nachdem Sie Ihre Meinung über die Präsentation geändert und Ihre weise Wahl des semantischen Markups ausgenutzt haben ;-)
Steve Jessop
1
@SteveJessop: Für die wenigen von uns auf der Welt, die sich immer noch für die Dateigröße interessieren, <b>this</b>scheint es viel vernünftiger zu sein als <span class="bold">this</b>(der 8-Byte-Overhead des ersteren ist lästig genug; der 23-Byte-Overhead des letzteren scheint verrückt zu sein). Ich frage mich, warum HTML niemals eine Kurzformdarstellung <@quack>this</@>als äquivalent zu definiert hat <span class="quack">this</span>.
Supercat
4
@supercat: dafür ist transfer-encoding: gzip da. Oder vielleicht XML + XSLT, je nachdem, wo und wie Sie eine präzisere Notation für "Quacksalber" einführen möchten.
Steve Jessop
7
@supercat class='bold'? Meister Suku von The Codeless Code würde mit Ihnen über die Verwendung solcher schlechten Klassennamen sprechen . Betrachten Sie dies als Ihren letzten fettgedruckten Text .
2
In den Tagen von 14.4-Modems war CSS eine Idee , die noch in keinem Benutzeragenten verwirklicht oder implementiert wurde. Bei diesen HTML-Elementen handelt es sich lediglich um uralte Legacy-Cruft, an die wir uns für immer halten werden.
Michael Hampton
11

Die Tags <b>und <i>sind mit den Begriffen "Fett" und "Kursiv" entstanden. Das Problem ist, dass diese möglicherweise für einige Benutzerprogramme völlig bedeutungslos sind. Wie klingt zum Beispiel "kursiv" in einem Screenreader für Blinde?

Durch Ersetzen durch <strong>und <em>Entfernen der direkten Verknüpfung zu typografischen Konzepten. Stattdessen kann das Benutzerprogramm sie rendern, wie es für richtig erachtet wird.

Simon B
quelle
2
Streng genommen kann der User Agent rendern <b>und <i>es sieht auch so aus, als ob es passt.
Jonathan Eunice
8

Die Tags <b>und <i>sind wichtig, wenn Sie Text in Fettdruck oder Kursivdruck benötigen.

Wenn Sie eine Gleichung in HTML schreiben, bei der ein kursives " Ich " eine andere Bedeutung hat als ein nicht kursives "Ich", ist es wichtig, diese Unterscheidung treffen zu können.

Ich denke an sie in der gleichen Art und Weise ich denken <sup>oder <sub>Tags - Sie können nicht richtig die Bedeutung einer Gleichung ohne Verwendung eines solchen ‚Erscheinung‘ Tags darstellen kann.

Der puristische Ansatz wäre, MathML oder TeX zu verwenden, aber die Browserunterstützung gibt es noch nicht ...

SAL
quelle
14
Ich wünschte, die Leute, die sich für "semantisches" Markup einsetzen, würden erkennen, dass die alten Tags in einigen Fällen semantisch korrekter waren als alle Alternativen. Wenn der Text eines Dokuments auf bestimmte unterstrichene Wörter verweist, wäre es semantisch falsch, diese Wörter auf eine andere Weise als durch Unterstreichen anzuzeigen. Wenn man Text aus einem System importiert, das einige davon enthält, in a monospaced typefaceaber keinen Unterschied macht, warum, dann würde die Verwendung eines der "Ersetzungen" für <tt>fälschlicherweise bedeuten, dass der Code, der den Import ausführt, mehr wusste als er über den Zweck wusste.
Supercat
Ich bin mit der Eignung von bund iin mathematischen (und physikalischen) Zusammenhängen einverstanden , aber eine solche Verwendung wird in HTML5-Entwürfen nicht erwähnt. Als ich diese Frage stellte, wurde ernsthaft geantwortet, dass stattdessen die Unicode-Sonderzeichen (mathematische fette Buchstaben und mathematische kursive Buchstaben) verwendet werden!
Jukka K. Korpela
1
@supercat: Die allgemeine Behauptung (die ich zugebe, gilt nicht immer) ist, dass Sie keine Schecks ausstellen sollten, die der User-Agent nicht einlösen kann. Insbesondere sollten Sie keine Seite schreiben, die behauptet, dass der Bildschirmleser eines anderen Benutzers in einer monospaced Schriftart spricht (ich stelle mir eine Roboterstimme vor, die angemessen wäre: Ich habe noch nie einen Bildschirmleser verwendet). Natürlich ignoriert dies, dass die meisten Seiten der Leute überhaupt nicht mit Screen-Readern funktionieren, und es hat keinen Sinn, dass sie für eine hypothetische Zugänglichkeit, die ihnen egal ist, einen Preis zahlen. Aber W3C vernachlässigt diese Tatsache aus Prinzip absichtlich .
Steve Jessop
Im Falle des Code-Imports, nehme ich an, ist die kanonische (wenn nicht zufriedenstellende) Antwort eine class="source-X-asserts-it-should-be-monospace"Unterscheidung von semantisch unterschiedlichem Text in dem Sinne, dass eine andere Quelle aus unbekannten Gründen behauptet, es sollte Monospace sein. Tatsächlich überprüft dies das Zeug, das HTML als schlecht ansieht, anstatt nur die Schlechtigkeit in HTML zu übersetzen.
Steve Jessop
1
@SteveJessop: Mit anderen Worten, wir sollten uns verbessern <TT>, was direkt vorschlug, dass Text in einer kontrastierenden Monospace-Schriftart mit Markup gesetzt werden sollte, die nach einigen Indirektionsebenen angibt, dass Text in einer bestimmten Schriftart angezeigt werden sollte, die passiert Monospace sein. Ich würde nicht erwarten, dass alle Screenreader etwas Nützliches tun <tt>, aber ich würde erwarten, dass sie es viel einfacher haben <tt>als <span class="styleNameThisImportUtilityPicked">.
Supercat
0

Die den HTML-Tags zugrunde liegenden Gestaltungsprinzipien sind, dass sie "semantisch" sein sollten, dh dass sie eher Bedeutung und Absicht als Anweisungen auf niedriger Ebene angeben sollten.

Der klassische Test lautet: "Können die Tags in einem Browser für Blinde sinnvoll verwendet werden?".

Für einen Audio-basierten Browser ist das "i" für Kursivschrift also ziemlich nutzlos, da Sie keine Kursivschrift verwenden können. Das "em" -Tag ist jedoch sinnvoll, da ein Audiogerät eine Phrase in vielerlei Hinsicht hervorheben kann: durch Erhöhen der Tonhöhe, Erhöhen der Lautstärke oder Ändern des Akzents. Ein Braille-Renderer kann durch Anheben der Punkte, Ändern des Abstands, Ändern der Größe oder Hinzufügen von Vibrationen eine Hervorhebung erzielen.

James Anderson
quelle
Wie Sie sagen, Sie können keine kursive Sprache verwenden - aber Sie können kursiven Text verwenden, wenn die Tatsache, dass er kursiv ist, semantische Bedeutung hat, z. B. Gleichungen ...
SAL
2
"Für einen Audio-basierten Browser ist das" i "für Kursivschrift ziemlich nutzlos, da Sie keine Kursivschrift verwenden können." ... Ja, und so ist es, <img>weil Sie kein Bild sprechen können und ein System ohne Soundhardware nicht präsentieren kann <audio>. Manchmal ist die Präsentation der eigentliche Zweck eines Elements und es muss nicht allgemein unterstützt werden (und im Gegensatz zu anderen möglicherweise nicht unterstützten Elementen ist <i>kein Alternativtext erforderlich, da nur die Tatsache, dass es kursiv ist, Informationen verloren gehen). Das eigentliche Problem ist, wenn die Leute sagen, iwann sie es meinen em .
Nmclean
@SAL: Warum kann man nicht "kursiv" sprechen? Wenn normale Sprache mit einem "Tonhöhen" -Wert von 100 gesprochen wird, würde es dem Hörer ermöglichen , Text innerhalb eines <i>Tags mit einer Tonhöhe von 120 und Text innerhalb eines <b>Tags mit 80 zu verwenden und Text innerhalb einer <tt>Synchronisation der Sprache mit einer synthetisierten Schreibmaschine zu haben, die den Text erzeugt diese Formen der Auszeichnung leicht zu unterscheiden. Die Arbeit wäre viel schwieriger, wenn anstelle eines <i>Tags ein Text verwendet würde, bei <span class="whatever">dem Teile des Texts mit "Acme SemiScript" anstatt mit "Waldorf Sans"
angezeigt würden
... haben keine gute kursive Schrift, aber manchmal kann eine kursive Schrift gut aussehen, wenn sie in Text eingefügt wird, der mit einer anderen Schriftfamilie geschrieben wurde.
Supercat
@supercat Sie beschreiben hervorgehobene Sprache, nicht kursive Sprache. Wenn Sie einen anderen Ton wünschen, sollten Sie em verwenden, wie nmclean sagte. Wenn Sie es kursiv schreiben möchten, verwenden Sie i. Es spielt keine Rolle, dass ein Bildschirmleser nicht weiß, was er tun soll, weil es nichts dafür gibt. Buchtitel werden häufig kursiv geschrieben, aber Sie sprechen sie nicht anders aus.
DCShannon