Czy powinienem używać znacznika <i> dla ikon zamiast <span>? [Zamknięte]

Zajrzałem do źródła Facebooka, używają <i>znacznika do wyświetlania ikon.

Również dzisiaj zajrzałem do Bootstrap na Twitterze. Używa także <i>znacznika do wyświetlania ikon.

Ale,

Ze specyfikacji HTML5 :

Element I reprezentuje rozpiętość tekstu naprzemiennym głosem lub nastrojem lub w inny sposób równoważony z normalną prozą, taką jak oznaczenie taksonomiczne, termin techniczny, idiomatyczne zdanie z innego języka, myśli, nazwy statku lub innego proza, której typowa prezentacja typograficzna jest pochylona.

Dlaczego używają <i>znaczników do wyświetlania ikon?

Czy to nie jest zła praktyka?

A może coś tu brakuje?

Używam spando wyświetlania ikon i wydaje mi się, że do tej pory działa.

Aktualizacja:

Bootstrap 3 używa teraz spanikon. Official Doc

Dlaczego używają <i>znaczników do wyświetlania ikon?

Ponieważ to jest:

• Krótki
• i oznacza ikonę (chociaż nie w HTML)

Czy to nie jest zła praktyka?

Okropna praktyka. To triumf wydajności nad semantyką.

Wskakuję tu trochę za późno, ale sam natknąłem się na tę stronę. Oczywiście nie wiem, w jaki sposób Facebook lub Twitter to uzasadniły, ale oto mój własny proces przemyślenia tego, co warto.

W końcu doszedłem do wniosku, że ta praktyka nie jest aż tak niekonwencjonalna (czy to słowo?). W rzeczywistości, oprócz skrótu i ​​miłego skojarzenia „i jest dla ikony”, myślę, że jest to najbardziej semantyczny wybór ikony, gdy prosty <img>tag nie jest praktyczny.

1. Użycie jest zgodne ze specyfikacją.

Chociaż może nie być to, co miał na myśli W3, wydaje mi się, że oficjalna specyfikacja <i>dość łatwo pomieści ikonę. W końcu symbol strzałki odpowiedzi mówi „odpowiedz” w inny sposób. Wyraża termin techniczny, który może być nieznany czytelnikowi i zwykle byłby pisany kursywą. („Tutaj na Twitterze nazywamy to strzałką odpowiedzi ”). Jest to termin z innego języka: języka symbolicznego.

Jeśli zamiast symbolu strzałki użyty zostanie Twitter <i>shout out</i>lub <i>[Japanese character for reply]</i>(na angielskiej stronie), byłoby to zgodne ze specyfikacją. Dlaczego więc nie <i>[reply arrow]</i>? (Mówię tu wyłącznie o semantyce HTML, a nie o dostępności, do której dojdę.)

O ile widzę, jedyną częścią specyfikacji wyraźnie naruszoną przez użycie ikony jest fraza „rozpiętość tekstu” (gdy znacznik również nie zawiera tekstu). Oczywiste jest, że <i>znacznik jest przeznaczony głównie do tekstu, ale jest to dość mały szczegół w porównaniu z ogólną intencją znacznika. Ważnym pytaniem dla tego znacznika nie jest to, jaki format treści zawiera, ale jakie jest znaczenie tej treści.

Jest to szczególnie prawdziwe, gdy weźmie się pod uwagę, że linia między „tekstem” a „ikoną” może prawie nie istnieć na stronach internetowych. Tekst może wyglądać bardziej jak ikona (jak w przykładzie japońskim) lub ikona może wyglądać jak tekst (jak w przycisku jpg z napisem „Prześlij” lub zdjęcie kota z nałożonym podpisem) lub tekst może zostać zastąpiony lub wzbogacony o obraz za pomocą CSS. Tekst, obraz - kogo to obchodzi? Cała zawartość. Dopóki wszyscy - ludzie z upośledzeniami, przeglądarki z upośledzeniami, pająki wyszukiwarek i inne maszyny różnego rodzaju mogą zrozumieć to znaczenie, wykonaliśmy naszą pracę.

Zatem fakt, że autorzy specyfikacji nie myśleli (ani nie wybrali), aby to wyjaśnić, nie powinien wiązać naszych rąk z robieniem tego, co ma sens i jest zgodne z duchem tagu. <a>Tag był pierwotnie przeznaczony do podjęcia użytkownikowi gdzieś indziej, ale teraz to może pojawi się schowek. Big whoop, prawda? Jeśli ktoś wymyślił, jak wyskoczyć lightbox po kliknięciu, zanim specyfikacja złapie, nadal powinien był użyć <a>tagu, a nie <span>, nawet jeśli nie był on całkowicie zgodny z obecną definicją - ponieważ był najbliższy i był nadal zgodny z duchem tagu („coś się stanie, gdy klikniesz tutaj”). To samo dotyczy <i>- niezależnie od tego, co w nim umieścisz lub jak twórczo z niego korzystasz,

2. <i>Znacznik dodaje semantyczne znaczenie do elementu ikony.

Alternatywną opcją przenoszenia samej klasy ikon jest <span>, co oczywiście nie ma żadnego znaczenia semantycznego. Gdy maszyna pyta, <span>co zawiera, mówi: „Nie wiem. To może być cokolwiek”. Ale <i>tag mówi: „Podaję inny sposób wypowiedzenia niż zwykły, a może nieznany termin”. To nie to samo, co „Zawieram ikonę”, ale jest o wiele bliżej niż <span>mam!

3. Ostatecznie powszechne użycie jest słuszne.

Oprócz powyższego warto wziąć pod uwagę, że czytniki maszynowe (czy to wyszukiwarka, czytnik ekranu itp.) Mogą w dowolnym momencie zacząć brać pod uwagę fakt, że Facebook, Twitter i inne strony internetowe używają <i>tagu jako ikon. Nie dbają o specyfikację tak bardzo, jak dbają o wydobywanie znaczenia z kodu wszelkimi niezbędnymi środkami. Mogą więc wykorzystać tę wiedzę o powszechnym użyciu, aby po prostu zarejestrować, że „może tu być ikona”, lub zrobić coś bardziej zaawansowanego, jak wywołanie CSS w celu podpowiedzi do znaczenia lub kto wie co. Jeśli więc zdecydujesz się na użycie <i>ikon for w swojej witrynie, być może zapewniasz więcej znaczenia niż specyfikacja.

Co więcej, jeśli to użycie stanie się powszechne, prawdopodobnie zostanie włączone do specyfikacji w przyszłości. Następnie przejrzysz swój kod, zastępując <span>s na <i>'s! Może więc mieć sens wejście w coś, co wydaje się być kierunkiem specyfikacji, szczególnie gdy nie jest ona wyraźnie sprzeczna z obecną specyfikacją. Powszechne stosowanie zwykle dyktuje reguły językowe bardziej niż na odwrót. Jeśli masz wystarczająco dużo lat, czy pamiętasz, że „strona internetowa” była oficjalną pisownią, kiedy słowo było nowe? Słowniki podkreślały, że musi być spacja, a sieć musi być pisana wielkimi literami. Powody były semantyczne. Ale powszechne użycie mówiło: „Cokolwiek, to głupie. Używam„ strony internetowej ”, ponieważ jest bardziej zwięzłe i wygląda lepiej”. I wkrótce

4. Więc idę dalej i używam go.

Tak więc <i>nadaje więcej znaczenia maszynom ze względu na specyfikację, zapewnia więcej znaczenia ludziom, ponieważ łatwo kojarzymy „i” z „ikoną” i ma on tylko jedną literę. Zdobyć! A jeśli upewnisz się, że umieścisz równoważny tekst wewnątrz <i>tagu lub tuż obok niego (tak jak robi to Twitter), to czytniki ekranu rozumieją, gdzie kliknąć, aby odpowiedzieć, link jest użyteczny, jeśli CSS nie ładuje się, a czytelnicy z dobrymi ludźmi wzrok i przyzwoita przeglądarka widzą ładną ikonę. Mając to na uwadze, nie widzę negatywnych skutków.

Odpowiedź Quentina wyraźnie stwierdza, że itag nie powinien być używany do definiowania ikon.

Ale Holly zasugerowała, że spannie ma to samo w sobie znaczenia, i głosowała za izamiast spantagu.

Niewielu sugerowało użycie, imgponieważ jest semantyczne i zawiera altznacznik. Ale nie powinniśmy również używać, imgponieważ nawet pusty srcwysyła żądanie do serwera. Przeczytaj tutaj

Myślę, że właściwym sposobem byłoby

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

To rozwiązuje problem braku alttagu spani czyni go dostępnym dla użytkowników z upośledzeniem wzroku. Jest semantyczny i nie nadużywa (hakuje) żadnego tagu.

Domyślam się: ponieważ Twitter widzi potrzebę obsługi starszych przeglądarek, w przeciwnym razie używaliby :before/ :afterpseudo-elementów.

Starsze przeglądarki nie obsługują tych pseudo-elementów, o których wspomniałem, dlatego muszą używać rzeczywistego elementu HTML dla ikon, a ponieważ ikony nie mają znacznika „wyłącznego”, po prostu poszły z tym <i>znacznikiem, a wszystkie przeglądarki obsługują ten tag.

Mogliby z pewnością użyć <span>, tak jak ty (co jest w zupełności w porządku), ale prawdopodobnie z powodu, o którym wspomniałem powyżej oraz tych wymienionych przez Quentin , również dlatego Bootstrap używa <i>tagu.

Jest to zła praktyka, gdy używasz dodatkowego znacznika ze względu na styl, dlatego wymyślono pseudoelementy , aby oddzielić zawartość od stylu ... ale kiedy widzisz potrzebę obsługi starszych przeglądarek, czasami jesteś zmuszony zrobić tego rodzaju rzeczy

PS. Fakt, że ikony zaczynają się od „i” i że jest <i>tag, jest całkowicie przypadkowy.

Całkowicie odmiennie podchodzę do odpowiedzi wszystkich innych tutaj. Pozwólcie mi prefiksować moje rozwiązanie i argumentować, stwierdzając, że czasami standardy i konwencje mają być łamane, szczególnie w kontekście standardowych definicji znaczników leksykalnych HTML.

Nic nie stoi na przeszkodzie, aby tworzyć niestandardowe elementy, które są samoopisujące w stosunku do swojego celu.

Zarówno nowoczesne przeglądarki, a nawet IE 6+ (w / shim) mogą obsługiwać takie rzeczy jak:

<icon class="plus">

lub

<icon-add>

Po prostu upewnij się, aby znormalizować tag:

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

i użyj podkładki dystansowej, jeśli potrzebujesz obsługi IE9 lub wcześniejszej (zobacz post poniżej).

Sprawdź ten post StackOverflow:

Czy istnieje sposób na utworzenie własnego tagu HTML w HTML5

Aby podnieść mój argument, zarówno dyrektywy Google Angular, jak i nowe projekty Polymer wykorzystują koncepcję niestandardowych tagów HTML.

Pomyślałem, że wygląda to całkiem źle - ponieważ ostatnio pracowałem nad szablonem Joomla i ciągle otrzymywałem błąd w W3C, ponieważ używał <i> znacznika i przestał obowiązywać, ponieważ pierwotnie użyto go do kursywy, co teraz odbywa się za pomocą CSS już nie HTML.

To naprawdę zła praktyka, ponieważ kiedy go zobaczyłem, przeszedłem przez szablon i zmieniłem wszystkie <i>tagi na<span style="font-style:italic"> a potem zastanawiałem się, dlaczego cały szablon wyglądał dziwnie.

Jest to główny powód, dla którego używanie <i>tagu w ten sposób jest kiepskie - nigdy nie wiadomo, kto będzie potem patrzył na twoją pracę i „zakładał”, że tak naprawdę próbujesz zrobić to kursywa, a nie wyświetlanie Ikona. Właśnie umieściłem kilka ikon na stronie i zrobiłem to z następującym kodem

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

w ten sposób mam wszystkie moje ikony w jednej klasie, więc wszelkie zmiany, które wprowadzę, wpływają na wszystkie ikony (powiedzmy, że chciałem, żeby były większe lub mniejsze, lub zaokrąglone ramki itp.), tekst alternatywny daje czytelnikom ekranu możliwość powiedzenia osobie, co ikona jest raczej niż „tekst pisany kursywą, koniec kursywą” (nie wiem dokładnie, jak czytniki ekranu czytają ekrany, ale wydaje mi się, że to coś takiego), a tytuł daje również szansę na najechanie myszką obraz i uzyskaj etykietkę z informacją, jaka jest ikona, na wypadek, gdyby nie mogli tego rozgryźć. O wiele lepsze niż używanie <i>- a także spełnia standard W3C.

Uznałem to również za przydatne, gdy chciałem umieścić ikonę z absolutnym pozycjonowaniem w linku <a> tagu .

<img>Najpierw pomyślałem o tagu, ale domyślna stylizacja tagów w linkach zazwyczaj ma stylizację ramek i / lub efekty cienia. Ponadto używanie an. Wydaje się niewłaściwe<img> znacznika bez zdefiniowania atrybutu „src”, podczas gdy używam deklaracji arkusza stylów tła-obrazu, aby obraz nie widniał i nie przeciągał się.

W tym momencie myślisz o tagach takich jak <span>lub <i>- w takim przypadku<i> ma to tyle sensu, co ten typ ikony.

Podsumowując, myślę, że jego zaletą jest intuicyjność, ponieważ wymaga minimalnej regulacji arkusza stylów, aby ten znacznik działał jak ikona.