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?
html
deprecation
LanceLafontaine
quelle
quelle
<b>
und bin<i>
nicht veraltet.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 habenb
oderi
, was Sie normalerweise gemeint habenstrong
oderem
.<i>
und<b>
nicht wirklich veraltet sind<tt>
und<u>
sind, und die Frage wäre für diese genauso zutreffend.Antworten:
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
i
undb
waren in der Tat aus der Mode. Der Grund war, dass sie im Wesentlichen wieem
bzw.strong
arbeiteten, jedoch mit Fokus auf Präsentation und nicht auf Semantik (was schlecht ist).i
Bedeutete in der Tat, dass der Text kursiv gedruckt werden sollte (etwas darüber, wie der Text auf dem Bildschirm gerendert werden sollte). Andererseitsem
bedeutete 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
habe nicht die gleiche Bedeutung.
Der gleiche Unterschied gilt für
b
(Fettdruck) undstrong
(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:
Also, kurz gesagt,
i
undb
waren veraltet, weil es sich um HTML-Tags handelte , die sich um Präsentationen handelten , was völlig falsch ist.In HTML5
In HTML5
i
undb
sind nicht mehr veraltet. Stattdessen erhalten sie eine sematische Bedeutung . Es geht also jetzt eigentlich um Semantik und nicht um Präsentation.Nach wie vor
em
kennzeichnen Sie die Betonung mit: "Die Katze gehört mir." Sie verwenden sie jedochi
für fast alle anderen Fälle, in denen Sie Kursivschrift in einem gedruckten Werk verwenden würden. Zum Beispiel:i
, um taxonomische Bezeichnungen zu markieren: "Ich mag R. norvegicus ."i
kennzeichnen eine Phrase in einer anderen Sprache als den umgebenden Text: À la cartei
, 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
class
Attribut zu verwenden, um die genaue Verwendung anzugeben (auch Google "Mikroformat" und "Mikrodaten"). Und natürlich sollten Sie im zweiten Fall daslang
Attribut 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
cite
Bücher, Filme, Opern, Gemälde usw. mit Namen versehen werden sollten:Schließlich wird seit langem
dfn
verwendet, um die definierende Instanz einer Phrase in einem Text zu markieren (wie eine mathematische Definition oder die Definition eines Begriffs):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
strong
undb
heißt es in der HTML5-Spezifikation, dassstrong
ein wichtiger Teil des Textes markiert werden sollte, z. B. eine Warnung oder ein sehr wichtiges Wort in einem Satz. Auf der anderen Seiteb
sollte es verwendet werden, um Dinge zu markieren, die im Text leicht zu finden sein müssen, wie z. B. Stichwörter. Ich benutze auchb
als Überschriften in Listenelementen (LIs).quelle
<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ützendisplay:run-in
, sollten Sie Inline-Keyword-Markups mit<b>
oder verwenden,<span>
um das bestmögliche Ergebnis zu erzielen.display:run-in
, aber da die Unterstützung abnimmt , müssen Sie denfloat
oder dencontent:
Trick verwenden, siehe rejbrand.se/rejbrand/news.asp?ItemIndex=169 . Wenn ich überb
das 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.<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>
.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.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.
quelle
<span class="keyword">...</span>
Schreibschrift geschrieben werden sollen eine Menge Ärger.<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>
.Die wahre Geschichte ist , dass
b
undi
wurden 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
b
undi
tun 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.quelle
<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 einclass
Attribut, 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 ;-)<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>
.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 .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.quelle
<b>
und<i>
es sieht auch so aus, als ob es passt.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 ...
quelle
in a monospaced typeface
aber 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.b
undi
in 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!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.<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">
.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.
quelle
<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,i
wann sie es meinenem
.<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"