wake-up-neo.com

Sollte ich anstelle von <span> das <i> -Tag für Symbole verwenden?

Ich habe mir die Quelle von Facebook angesehen, sie verwenden das <i> -Tag, um Symbole anzuzeigen.

Außerdem habe ich mir heute Twitter's Bootstrap angeschaut. Es verwendet auch das Tag <i>, um Symbole anzuzeigen.

Aber,

Aus der HTML5-Spezifikation :

Das I-Element repräsentiert einen Textabschnitt mit einer anderen Stimme oder Stimmung oder in anderer Weise versetzt von der normalen Prosa, wie z. B. eine taxonomische Bezeichnung, ein Fachbegriff, eine Redewendung aus einer anderen Sprache, ein Gedanke, ein Schiffsname oder eine andere Prosa, deren typische typografische Darstellung kursiv gedruckt ist.

Warum verwenden sie das <i> -Tag, um Symbole anzuzeigen?

Ist es nicht eine schlechte Praxis?

Oder fehle ich hier etwas?

Ich benutze span, um Symbole anzuzeigen, und es scheint bis jetzt für mich zu funktionieren.

Update:

Bootstrap 3 verwendet jetzt span für Symbole. Official Doc

542
Jashwant

Warum verwenden sie das <i> -Tag, um Symbole anzuzeigen?

Denn es ist:

  • Kurz
  • ich stehe für Symbol (obwohl nicht in HTML)

Ist es nicht eine schlechte Praxis?

Schreckliche Übung. Es ist ein Triumph der Leistung über die Semantik.

569
Quentin

Ich bin etwas spät hier reingesprungen, bin aber auf diese Seite gestoßen, als ich selbst darüber nachgedacht habe. Natürlich weiß ich nicht, wie Facebook oder Twitter es rechtfertigten, aber hier ist mein eigener Denkprozess für das, was es wert ist.

Am Ende kam ich zu dem Schluss, dass diese Praxis nicht so unsemantisch ist (ist das ein Wort?). Abgesehen von der Kürze und der Nizza-Assoziation von "Ich bin für Ikone" halte ich es für die semantischste Wahl für eine Ikone, wenn ein einfaches <img> -Tag nicht praktikabel ist.

1. Die Verwendung entspricht der Spezifikation.

Während es vielleicht nicht das ist, was der W3 hauptsächlich im Sinn hatte, scheint es mir, dass die offizielle Spezifikation für <i> ziemlich leicht ein Symbol aufnehmen könnte. Immerhin sagt das Symbol mit dem Antwortpfeil auf andere Weise "Antwort". Es drückt einen Fachbegriff aus, der dem Leser möglicherweise unbekannt und normalerweise kursiv geschrieben ist. ("Hier bei Twitter nennen wir das einen Antwortpfeil .") Und es ist ein Begriff aus einer anderen Sprache: einer symbolischen Sprache.

Wenn Twitter anstelle des Pfeilsymbols <i>shout out</i> oder <i>[Japanese character for reply]</i> (auf einer englischen Seite) verwendet, entspricht dies der Spezifikation. Warum dann nicht <i>[reply arrow]</i>? (Ich spreche hier ausschließlich von HTML-Semantik, nicht von Barrierefreiheit, auf die ich noch eingehen werde.)

Soweit ich sehen kann, ist der einzige Teil der Spezifikation, der durch die Verwendung von Symbolen explizit verletzt wird, der Ausdruck "Textspanne" (wenn das Tag auch keinen Text enthält). Es ist klar, dass das <i> -Tag hauptsächlich für Text gedacht ist, aber das ist ein ziemlich kleines Detail im Vergleich zur Gesamtabsicht des Tags. Die wichtige Frage für dieses Tag ist nicht, welches Format von Inhalt es enthält, sondern welche Bedeutung dieser Inhalt hat.

Dies gilt insbesondere, wenn Sie bedenken, dass die Grenze zwischen "Text" und "Symbol" auf Websites so gut wie nicht vorhanden sein kann. Text kann eher wie ein Symbol aussehen (wie im japanischen Beispiel) oder ein Symbol kann wie Text aussehen (wie in einer JPG-Schaltfläche mit der Aufschrift "Senden" oder einem Katzenfoto mit einer überlagerten Beschriftung) oder Text kann durch ersetzt oder verbessert werden ein Bild über CSS. Text, Bild - wen interessiert das? Es ist alles zufrieden. Solange jeder - Menschen mit Behinderungen, Browser mit Behinderungen, Suchmaschinenspinnen und andere Maschinen verschiedener Art - diese Bedeutung verstehen kann, haben wir unseren Job gemacht.

Die Tatsache, dass die Verfasser der Spezifikation nicht darüber nachdachten (oder entschieden), dies zu klären, sollte uns nicht daran hindern, das zu tun, was Sinn macht und dem Geist des Tags entspricht. Das <a> -Tag sollte den Benutzer ursprünglich an einen anderen Ort bringen, jetzt wird möglicherweise ein Leuchtkasten angezeigt. Big whoop, richtig? Wenn jemand herausgefunden hätte, wie er einen Leuchtkasten beim Klicken aufruft, bevor die Spezifikation eingeholt wurde, hätte er trotzdem das <a> -Tag verwenden sollen, kein <span>, auch wenn es nicht vollständig mit dem übereinstimmt Aktuelle Definition - weil es am nächsten kam und immer noch mit dem Geist des Tags übereinstimmt ("etwas wird passieren, wenn Sie hier klicken"). Gleiches gilt für <i> - unabhängig davon, welche Art von Dingen Sie in sie einfügen oder wie kreativ Sie sie verwenden, sie drücken die allgemeine Idee eines alternativen oder abgesetzten Begriffs aus.

2. Das <i> -Tag fügt einem Symbolelement eine semantische Bedeutung hinzu.

Die alternative Möglichkeit, eine Icon-Klasse alleine zu führen, ist <span>, was natürlich keinerlei semantische Bedeutung hat. Wenn eine Maschine den <span> fragt, was er enthält, heißt es: "Ich weiß nicht. Könnte alles sein." Aber das <i> -Tag sagt: "Ich habe eine andere Art, etwas zu sagen als die übliche, oder vielleicht einen unbekannten Begriff." Das ist nicht dasselbe wie "Ich habe eine Ikone", aber es ist viel näher dran als <span>!

. Irgendwann macht die allgemeine Verwendung richtig.

Darüber hinaus sollten Sie berücksichtigen, dass Maschinenleser (Suchmaschine, Bildschirmleser oder was auch immer) zu jeder Zeit damit beginnen können, zu berücksichtigen, dass Facebook, Twitter und andere Websites das <i> -Tag für Symbole verwenden . Sie kümmern sich nicht so sehr um die Spezifikation, wie es ihnen darum geht, die Bedeutung aus dem Code mit den erforderlichen Mitteln zu extrahieren. Sie können dieses Wissen der allgemeinen Verwendung verwenden, um einfach zu erfassen, dass "hier möglicherweise ein Symbol vorhanden ist", oder um etwas Fortgeschritteneres zu tun, z. B. einen Blick in das CSS zu werfen, um einen Hinweis auf die Bedeutung zu erhalten, oder wer weiß was. Wenn Sie sich also dafür entscheiden, <i> für Symbole auf Ihrer Website zu verwenden, geben Sie möglicherweise mehr Bedeutung als die Spezifikation.

Wenn diese Verwendung weit verbreitet wird, wird sie wahrscheinlich in Zukunft in die Spezifikation aufgenommen. Dann gehen Sie Ihren Code durch und ersetzen <span>s durch <i> 's! Es kann daher sinnvoll sein, sich an die Richtung der Spezifikation zu halten, insbesondere wenn diese nicht eindeutig mit der aktuellen Spezifikation in Konflikt steht. Die gebräuchliche Verwendung diktiert Sprachregeln eher als umgekehrt. Wenn Sie alt genug sind, erinnern Sie sich, dass "Website" die offizielle Schreibweise war, als das Wort neu war? Wörterbücher bestehen darauf, dass ein Leerzeichen vorhanden ist und das Web groß geschrieben werden muss. Dafür gab es semantische Gründe. Aber die allgemeine Verwendung sagte: "Was auch immer, das ist dumm. Ich benutze" Website ", weil es prägnanter ist und besser aussieht." Und in Kürze erkannten Wörterbücher offiziell an, dass die Schreibweise korrekt war.

4. Also mache ich weiter und benutze es.

<i> verleiht Maschinen aufgrund der Spezifikation mehr Bedeutung, es verleiht Menschen mehr Bedeutung, weil wir "i" leicht mit "icon", und assoziieren ein Brief lang. Sieg! Und wenn Sie sicherstellen, dass gleichwertiger Text entweder im <i> -Tag oder direkt daneben (wie bei Twitter) enthalten ist, verstehen die Bildschirmleser, wo sie klicken müssen, um zu antworten, der Link kann verwendet werden, wenn CSS nicht geladen wird. und menschliche Leser mit gutem Sehvermögen und einem anständigen Browser sehen ein hübsches Symbol. Vor diesem Hintergrund sehe ich keinen Nachteil.

253
Holly

In der Antwort von Quentin heißt es eindeutig, dass das Tag i nicht zum Definieren von Symbolen verwendet werden sollte.

Aber Holly schlug vor, dass span an sich keine Bedeutung hat und stimmte für i anstelle von span.

Nur wenige haben vorgeschlagen, img als Semantik zu verwenden und enthalten alt -Tag. Wir sollten jedoch nicht auch img verwenden, da auch leere src eine Anfrage an den Server senden. Lesen Sie hier

Ich denke, der richtige Weg wäre,

<span class="icon-fb" role="img" aria-label="facebook"></span>

Dies löst das Problem, dass in alt kein span -Tag vorhanden ist, und macht es für Benutzer mit eingeschränkter Sehkraft zugänglich. Es ist semantisch und es wird kein Tag missbraucht (gehackt).

54
Jashwant

Meine Vermutung: Weil Twitter die Notwendigkeit sieht, ältere Browser zu unterstützen, würden sie andernfalls die Pseudoelemente :before/:after verwenden.

Ältere Browser unterstützen diese von mir erwähnten Pseudo-Elemente nicht, daher müssen sie ein tatsächliches HTML-Element für die Symbole verwenden, und da Symbole kein "exklusives" Tag haben, haben sie einfach das <i> -Tag verwendet und alle Browser unterstützen dieses Tag.

Sie hätten sicherlich einen <span> verwenden können, genau wie Sie (was völlig in Ordnung ist), aber wahrscheinlich aus dem Grund, den ich oben erwähnte, plus denjenigen, die von Quentin ist auch der Grund, warum Bootstrap das <i> -Tag verwendet.

Es ist eine schlechte Praxis, wenn Sie aus Gründen des Stils zusätzliches Markup verwenden. Aus diesem Grund wurden Pseudo-Elemente erfunden, um den Inhalt vom Stil zu trennen. sind gezwungen, solche Dinge zu tun.

PS. Die Tatsache, dass Symbole mit einem 'i' beginnen und dass es ein <i> -Tag gibt, ist völlig zufällig.

12
Ricardo Zea

Ich gehe die Antworten aller anderen hier ganz anders an. Lassen Sie mich meiner Lösung ein Präfix voranstellen und argumentieren, dass Standards und Konventionen manchmal als nicht akzeptabel gelten, insbesondere im Kontext der lexikalischen Standard-HTML-Tag-Definitionen.

Es hindert Sie nichts daran, benutzerdefinierte Elemente zu erstellen, die für den jeweiligen Zweck selbsterklärend sind.

Sowohl moderne Browser als auch IE 6+ (mit Shim) können folgende Funktionen unterstützen:

<icon class="plus">

oder

<icon-add>

Stellen Sie einfach sicher, dass Sie das Tag normalisieren:

 icon { display:block; margin:0; padding:0; border:0; ... }

und verwenden Sie eine Beilage, wenn Sie IE9 oder früher unterstützen müssen (siehe Beitrag unten).

Schauen Sie sich diesen StackOverflow-Beitrag an:

Gibt es eine Möglichkeit, ein eigenes HTML-Tag in HTML5 zu erstellen?

Meiner Argumentation nach verwenden sowohl die Angular-Direktiven von Google als auch die neuen Polymer -Projekte das Konzept benutzerdefinierter HTML-Tags.

10
Timothy Perez

Ich fand das ziemlich schlecht - weil ich kürzlich an einer Joomla-Vorlage gearbeitet habe und die Vorlage immer wieder W3C-fehlerhaft war, weil das <i> -Tag verwendet wurde und dies veraltet war, da die ursprüngliche Verwendung darin bestand, etwas zu kursiv zu schreiben, was wird jetzt über CSS nicht mehr HTML gemacht.

Es ist wirklich eine schlechte Übung, denn als ich es sah, habe ich die Vorlage durchgesehen und stattdessen alle <i> -Tags in <span style="font-style:italic"> geändert und mich dann gefragt, warum die gesamte Vorlage seltsam aussah.

Dies ist der Hauptgrund, warum es eine schlechte Idee ist, das <i> -Tag auf diese Weise zu verwenden - Sie wissen nie, wer Ihre Arbeit danach betrachten wird, und "nehmen an", dass das, was Sie wirklich versucht haben, kursiv ist Text anstatt ein Symbol anzuzeigen. Ich habe gerade einige Symbole in eine Website eingefügt und dies mit dem folgenden Code getan

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

auf diese Weise habe ich alle meine Symbole in einer Klasse, sodass alle Änderungen, die ich vornehme, alle Symbole betreffen (z. B. größere oder kleinere Symbole oder abgerundete Ränder usw.). Der Alternativtext gibt dem Bildschirmleser die Möglichkeit, der Person mitzuteilen, was zu tun ist Das Symbol zeigt nicht nur "Text in Kursivschrift, Ende in Kursivschrift" an (ich weiß nicht genau, wie Bildschirmleser Bildschirme lesen, aber ich denke, es ist ungefähr so), und der Titel gibt dem Benutzer auch die Möglichkeit, mit der Maus darüber zu fahren Klicken Sie auf das Bild, und erhalten Sie einen Tooltip, in dem angegeben wird, um welches Symbol es sich handelt, falls sie es nicht erkennen können. Viel besser als die Verwendung von <i> - und es erfüllt auch den W3C-Standard.

5
TheKLF99

Ich fand das auch nützlich, als ich ein Symbol mit absoluter Positionierung in einem link <a> -Tag platzieren wollte.

Ich habe zuerst über das <img> -Tag nachgedacht, aber das Standard-Styling dieser Tags in Links hat normalerweise Rahmen-Styling- und/oder Schatteneffekte. Außerdem fühlt es sich falsch an, ein <img> -Tag zu verwenden, ohne ein "src" -Attribut zu definieren, wohingegen ich eine Hintergrundbild-Stylesheet-Deklaration verwende, damit das Bild nicht gespenstert und gezogen wird.

An dieser Stelle denken Sie an Tags wie <span> oder <i> - in diesem Fall ist <i> genauso sinnvoll wie diese Art von Symbol.

Alles in allem glaube ich, dass es nicht nur intuitiv zu bedienen ist, sondern auch minimale Anpassungen des Stylesheets erfordert, damit dieses Tag als Symbol funktioniert.

2
Emery King