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

Ich habe in die Quelle von Facebook geschaut, sie verwenden das <i>Tag, um Symbole anzuzeigen.

Außerdem habe ich mir heute den Bootstrap von Twitter angesehen. Es verwendet auch <i>Tags, um Symbole anzuzeigen.

Aber,

Aus der HTML5-Spezifikation :

Das I-Element repräsentiert eine Spanne von Text in einer anderen Stimme oder Stimmung oder auf andere Weise von der normalen Prosa versetzt, wie z. B. eine taxonomische Bezeichnung, einen Fachbegriff, eine Redewendung aus einer anderen Sprache, einen Gedanken, einen Schiffsnamen oder eine andere Prosa, deren typische typografische Darstellung kursiv geschrieben ist.

Warum verwenden sie <i>Tags, um Symbole anzuzeigen?

Ist es nicht eine schlechte Praxis?

Oder fehlt mir hier etwas?

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

Aktualisieren:

Bootstrap 3 wird jetzt spanfür Symbole verwendet. Offizieller Doc

Warum verwenden sie <i>Tags, 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.

Ich springe etwas spät hier rein, bin aber auf diese Seite gestoßen, als ich selbst darüber nachgedacht habe. Natürlich weiß ich nicht, wie Facebook oder Twitter es gerechtfertigt haben, 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 netten Assoziation von "i is for icon" denke ich, dass dies die semantischste Wahl für ein Symbol ist, 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>ein Symbol ziemlich leicht aufnehmen könnte. Immerhin sagt das Antwortpfeilsymbol auf andere Weise "Antwort". Es drückt einen Fachbegriff aus, der dem Leser möglicherweise unbekannt ist und normalerweise kursiv geschrieben wird. ("Hier bei Twitter nennen wir das einen Antwortpfeil .") Und es ist ein Begriff aus einer anderen Sprache: einer symbolischen Sprache.

Wenn anstelle des Pfeilsymbols Twitter <i>shout out</i>oder <i>[Japanese character for reply]</i>(auf einer englischen Seite) verwendet wird, stimmt dies mit der Spezifikation überein. 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, gegen den die Verwendung von Symbolen ausdrücklich verstößt, die Phrase "Spanne des Textes" (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 des Inhalts es enthält, sondern welche Bedeutung dieser Inhalt hat.

Dies gilt insbesondere dann, wenn Sie bedenken, dass die Linie zwischen "Text" und "Symbol" auf Websites fast 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 ersetzt oder erweitert werden ein Bild über CSS. Text, Bild - wen interessiert das? Es ist alles Inhalt. Solange jeder - Menschen mit Behinderungen, Browser mit Behinderungen, Suchmaschinenspinnen und andere Maschinen verschiedener Art - diese Bedeutung verstehen kann, haben wir unsere Arbeit erledigt.

Die Tatsache, dass die Verfasser der Spezifikation nicht daran gedacht (oder entschieden) haben, dies zu klären, sollte uns nicht davon abhalten, das zu tun, was Sinn macht und mit dem Geist des Tags übereinstimmt. Das <a>Tag sollte den Benutzer ursprünglich an einen anderen Ort bringen, aber jetzt wird möglicherweise ein Leuchtkasten angezeigt. Großer Schrei, richtig? Wenn jemand herausgefunden hätte, wie ein Leuchtkasten beim Klicken geöffnet werden kann, bevor die Spezifikation eingeholt wurde, hätte er immer noch das <a>Tag verwenden sollen, nicht a <span>, auch wenn es nicht ganz mit der aktuellen Definition übereinstimmt - weil es am nächsten kam und war immer noch im Einklang mit dem Geist des Tags ("etwas wird passieren, wenn Sie hier klicken"). Gleiches gilt für <i>- was auch immer Sie hineinstecken oder wie kreativ Sie es verwenden,

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

Die alternative Möglichkeit, eine Icon-Klasse für sich zu führen, besteht darin <span>, dass sie natürlich keinerlei semantische Bedeutung hat. Wenn eine Maschine fragt, <span>was sie enthält, heißt es: "Ich weiß nicht. Könnte alles sein." Aber auf dem <i>Etikett steht: "Ich habe eine andere Art, etwas zu sagen als die übliche oder vielleicht einen unbekannten Begriff." Das ist nicht dasselbe wie "Ich habe ein Symbol", aber es ist viel näher dran als es ist <span>!

3. Schließlich macht die allgemeine Verwendung richtig.

Darüber hinaus ist zu berücksichtigen, dass Maschinenleser (ob Suchmaschine, Bildschirmleser oder was auch immer) jederzeit berücksichtigen können, dass Facebook, Twitter und andere Websites das <i>Tag für Symbole verwenden. Sie kümmern sich nicht so sehr um die Spezifikation, sondern darum, die Bedeutung des Codes mit allen erforderlichen Mitteln zu extrahieren. Sie können dieses Wissen über die allgemeine Verwendung verwenden, um einfach aufzuzeichnen, 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 also die <i>for-Symbole auf Ihrer Website verwenden, geben Sie möglicherweise mehr Bedeutung als die Spezifikation.

Wenn diese Verwendung weit verbreitet wird, wird sie wahrscheinlich in Zukunft in der Spezifikation enthalten sein. Dann werden Sie Ihren Code durchgehen und <span>s durch <i>'s ersetzen ! Daher kann es sinnvoll sein, sich an die Richtung der Spezifikation zu halten, insbesondere wenn diese nicht eindeutig mit der aktuellen Spezifikation in Konflikt steht. Die allgemeine 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 bestanden darauf, dass es einen Leerzeichen geben muss 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 bald,

4. Also mache ich weiter und benutze es.

So <i>bietet aufgrund der spec Maschinen mehr Sinn, es bietet mehr Sinn für die Menschen , weil wir leicht assoziieren „i“ mit „Symbol“, und es ist nur ein Buchstabe lang. Sieg! Und wenn Sie sicherstellen, dass gleichwertiger Text entweder in das <i>Tag oder direkt daneben eingefügt wird (wie dies bei Twitter der Fall ist), wissen die Bildschirmleser, wo sie klicken müssen, um zu antworten. Der Link kann verwendet werden, wenn CSS nicht geladen wird, und die menschlichen Leser sind gut Sehkraft und ein anständiger Browser sehen ein hübsches Symbol. In diesem Sinne sehe ich keinen Nachteil.

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

Aber Holly schlug vor, dass dies an spansich keine Bedeutung hat und stimmte für ianstelle von spantag.

Nur wenige schlagen vor, imges als semantisch zu verwenden und enthält altTags. Wir sollten es aber auch nicht verwenden, imgda selbst leer srceine Anfrage an den Server sendet. Lies hier

Ich denke, der richtige Weg wäre,

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

Dies löst das Problem, dass kein altTag vorhanden ist, spanund macht es für Benutzer mit Sehbehinderung zugänglich. Es ist semantisch und missbraucht (hackt) kein Tag.

Meine Vermutung: Weil Twitter die Notwendigkeit sieht, ältere Browser zu unterstützen, würden sie sonst die :before/ :afterpseudo-Elemente verwenden.

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

Sie hätten sicherlich ein verwenden können <span>, genau wie Sie (was VOLLSTÄNDIG in Ordnung ist), aber wahrscheinlich aus dem oben genannten Grund und den von Quentin erwähnten ist auch der Grund , warum Bootstrap das <i>Tag verwendet.

Es ist eine schlechte Praxis, wenn Sie aus Stylinggründen zusätzliches Markup verwenden. Deshalb wurden Pseudoelemente erfunden, um Inhalte vom Stil zu trennen. Wenn Sie jedoch die Notwendigkeit sehen, ältere Browser zu unterstützen, sind Sie manchmal gezwungen, dies zu tun Dinge.

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

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

Nichts hindert Sie daran, benutzerdefinierte Elemente zu erstellen, die für den eigentlichen Zweck selbsterklärend sind.

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

<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 Unterlegscheibe, 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?

Um meine Argumentation zu unterstützen, verwenden sowohl die Angular Directives von Google als auch die neuen Polymer-Projekte das Konzept benutzerdefinierter HTML-Tags.

Ich fand das ziemlich schlecht - weil ich kürzlich an einer Joomla-Vorlage gearbeitet habe und die Vorlage immer wieder W3C fehlschlug, weil sie das <i>Tag verwendete und das veraltet war, da die ursprüngliche Verwendung darin bestand, etwas kursiv zu schreiben, was jetzt über CSS erfolgt kein HTML mehr.

Es ist wirklich eine schlechte Übung, denn als ich es sah, ging ich die Vorlage durch und änderte stattdessen alle <i>Tags <span style="font-style:italic">und fragte mich dann, 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 und "davon ausgehen" wird, dass Sie wirklich versucht haben, den Text kursiv zu schreiben, anstatt einen anzuzeigen Symbol. 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 (sagen wir, ich wollte sie größer oder kleiner oder abgerundete Ränder usw.). Der Alternativtext gibt den Bildschirmlesern die Möglichkeit, der Person zu sagen, was Das Symbol wird nicht nur "kursiv geschrieben, Ende kursiv" angezeigt (ich weiß nicht genau, wie Bildschirmleser Bildschirme lesen, aber ich denke, es ist so ähnlich), und der Titel gibt dem Benutzer auch die Möglichkeit, mit der Maus darüber zu fahren das Bild und erhalten Sie einen Tooltip, der ihnen sagt, was das Symbol ist, falls sie es nicht herausfinden können. Viel besser als zu benutzen <i>- und es erfüllt auch den W3C-Standard.

Ich fand dies auch nützlich, wenn 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 Rand-Styling und / oder Schatteneffekte. Außerdem fühlt es sich falsch an, ein <img>Tag zu verwenden, ohne ein "src" -Attribut zu definieren, während ich eine Hintergrundbild-Stylesheet-Deklaration verwende, damit das Bild nicht geisterhaft und schleppend wirkt.

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

Alles in allem denke ich, dass es nicht nur intuitiv ist, dass es nur minimale Anpassungen des Stylesheets erfordert, damit dieses Tag als Symbol funktioniert.