Czy powinienem używać tag dla ikon zamiast? [zamknięte]

Wskakuję tu trochę późno, ale natknąłem się na tę stronę, gdy się nad nią zastanawiałam. Oczywiście Nie wiem, jak Facebook czy Twitter uzasadniał to, ale oto mój własny proces myślowy, jeśli to jest warte.

W końcu doszedłem do wniosku, że ta praktyka nie jest aż tak niemoralna (czy to słowo?). W rzeczywistości, oprócz skrótu i ładnego skojarzenia "I is for icon", myślę, że jest to najbardziej semantyczny wybór dla ikony, gdy prosty znacznik <img> nie jest praktyczne.

1. Użycie jest zgodne ze specyfikacją.

Choć może to nie to, co W3 głównie miało na myśli, wydaje mi się, że oficjalna specyfikacja <i> może pomieścić ikonę dość łatwo. W końcu symbol odpowiedzi-strzałka mówi "odpowiedz" w inny sposób. Wyraża termin techniczny, który może być Nieznany czytelnikowi i będzie zazwyczaj kursywą. ("Tutaj na Twitterze nazywamy to strzałką odpowiedzi .") I jest to określenie z innego język: język symboliczny.

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

Z tego co widzę, jedyną częścią specyfikacji jawnie naruszoną przez użycie ikon jest fraza "span of text" (gdy znacznik nie zawiera również tekstu). Jest oczywiste, że znacznik <i> jest przeznaczony głównie dla tekstu, ale to dość mały szczegół w porównaniu z ogólną intencją tagu. Ważnym pytaniem dla tego tagu nie jest format zawartości, ale jej znaczenie.

Jest to szczególnie ważne, gdy weźmiemy 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 nakładką podpis) lub tekst może być zastąpiony lub wzbogacony obrazem za pomocą CSS. Tekst, obraz-kogo to obchodzi? To wszystko jest zadowolone. Tak długo, jak 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 swoją pracę.

Więc fakt, że autorzy spec nie myśleli (lub wybrali), aby to wyjaśnić, nie powinien wiązać naszych rąk z robieniem tego, co ma sens i jest zgodne z duchem tagu. The <a> tag pierwotnie miał zabrać użytkownika gdzie indziej, ale teraz może wyskoczyć lightbox. Wielkie halo, prawda? Jeśli ktoś wymyślił, jak wyskakiwać lightbox przy kliknięciu, zanim spec się nadrobił, nadal powinien użyć znacznika <a>, a nie <span>, nawet jeśli nie był on całkowicie zgodny z obecną definicją-ponieważ był najbliżej i nadal był zgodny z duchem tagu ("coś się stanie, gdy klikniesz tutaj"). Ta sama umowa z <i> - niezależnie od rodzaju rzecz, którą wkładasz do niej, lub jakkolwiek twórczo jej używasz, wyraża ogólną ideę alternatywnego lub wyodrębnionego terminu.

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

Alternatywną opcją przenoszenia klasy icon jest <span>, która oczywiście nie ma żadnego znaczenia semantycznego. Kiedy maszyna pyta <span> co zawiera, mówi: "Nie wiem. To może być cokolwiek."Ale znacznik <i> mówi: coś niż zwykle, a może nieznane określenie."To nie to samo, co "i contains an icon", ale jest o wiele bliżej niż <span> dostał!

3. Ostatecznie powszechne użycie czyni prawo.

Oprócz powyższego, warto wziąć pod uwagę, że czytniki maszyn (czy to Wyszukiwarki, czytnik ekranu, czy cokolwiek innego) mogą w każdej chwili zacząć brać pod uwagę, że Facebook, Twitter i inne strony internetowe używają znacznika <i> dla ikon. Nie dbają o spec jak bardzo zależy im na wydobyciu znaczenia z kodu wszelkimi niezbędnymi środkami. Mogą więc użyć tej wiedzy o powszechnym użyciu, aby po prostu nagrać, że "może tu być ikona" lub zrobić coś bardziej zaawansowanego, takiego jak wyzwalanie spojrzenia na CSS w celu uzyskania wskazówki co do znaczenia, lub kto wie, co. Jeśli więc zdecydujesz się użyć <i> dla ikon na swojej stronie internetowej, możesz mieć większe znaczenie niż specyfikacja.

Ponadto, jeśli to użycie stanie się powszechne, prawdopodobnie zostanie włączone do spec w przyszłości. Następnie będziesz przeglądać swój kod, zastępując <span> s na <i>'s! Więc może mieć sens, aby dostać się do tego, co wydaje się być kierunek spec, zwłaszcza, gdy nie wyraźnie sprzeczne z obecnym spec. Powszechne użycie ma tendencję do dyktowania reguł językowych bardziej niż na odwrót. Jeśli jesteś wystarczająco stary, pamiętasz, że "strona internetowa" była oficjalną pisownią, gdy słowo było nowe? Słowniki podkreślały, że musi być spacja, a sieć musi być pisana wielkimi literami. Były na to semantyczne powody. Ale powszechne użycie mówiło: "nieważne, to głupie. Używam "strony internetowej", ponieważ jest bardziej zwięzła i wygląda lepiej."I wkrótce słowniki oficjalnie uznały tę pisownię za poprawną.

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

Tak więc, <i>nadaje większe znaczenie maszynom ze względu na specyfikację, daje większe znaczenie ludziom, ponieważ łatwo kojarzymy "ja" z "ikoną", i ma tylko jedną literę. Wygraj! A jeśli upewnisz się, że umieścisz równoważny tekst wewnątrz tagu <i> lub tuż obok niego (jak robi to Twitter), czytelnicy ekranu rozumieją, gdzie kliknąć, aby odpowiedzieć, link jest użyteczny, jeśli CSS nie ładuje się, a czytelnicy z dobrym wzrokiem i przyzwoitą przeglądarką widzą ładną ikonę. Mając to wszystko na uwadze, nie widzę minusów.

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

Niektórzy sugerowali użycie img jako znacznika semantycznego i zawierającego alt. Ale nie powinniśmy również używać img, ponieważ nawet empty src wysyła żądanie do serwera. czytaj tutaj

Myślę, że poprawnym sposobem byłoby,

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

To rozwiązuje wydanie znacznika No alt W span i sprawia, że jest on dostępny dla osób z zaburzeniami widzenia. Jest semantyczny i nie nadużywa (hacking ) żadnego tagu.

Moje przypuszczenie: ponieważ Twitter widzi potrzebę wspierania starszych przeglądarek, w przeciwnym razie będą używać :before / :after pseudoelementy.

Starsze przeglądarki nie obsługują tych pseudo-elementów, o których wspomniałem, więc muszą używać rzeczywistego elementu HTML dla ikon, a ponieważ ikony nie mają znacznika "exclusive", po prostu przeszły ze znacznikiem <i>, a wszystkie przeglądarki obsługują ten znacznik.

Z pewnością mogliby użyć <span>, tak jak ty (co jest całkowicie w porządku), ale prawdopodobnie z tego powodu, o którym wspomniałem powyżej oraz tych wymienionych przez Quentin, jest również powód, dla którego Bootstrap używa tagu <i>.

Używanie dodatkowych znaczników ze względów stylistycznych jest złą praktyką, 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 istnieje znacznik <i>, jest zupełnie przypadkowo.

Zupełnie inaczej podchodzę do odpowiedzi innych. Pozwól mi przedrostkiem moje rozwiązanie i argumentować stwierdzając, że czasami standardy i konwencje są przeznaczone do łamania, zwłaszcza w kontekście standardowych definicji znaczników leksykalnych HTML.

Nic nie powstrzyma cię przed tworzeniem niestandardowych elementów, które są samoopisowe dla samego celu.

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

<icon class="plus">

Lub

<icon-add>

Upewnij się, że znormalizujesz tag:

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

I użyj podkładki, jeśli chcesz obsługiwać IE9 lub wcześniej(patrz post poniżej).

Zobacz Ten Post:

Czy istnieje sposób na utworzenie własnego znacznika html w HTML5

Aby podtrzymać mój argument, zarówno kątowe dyrektywy Google, jak i nowe projekty polimerowe wykorzystują koncepcję niestandardowych znaczników HTML.

Myślałem, że to wygląda dość źle - ponieważ pracowałem nad szablonem Joomla niedawno i ciągle dostawał szablon nie W3C, ponieważ był za pomocą <i> tag i że był przestarzały, ponieważ jego oryginalne użycie było kursywą coś, co jest teraz robione przez CSS nie HTML więcej.

Robi to naprawdę złą praktykę, ponieważ kiedy go zobaczyłem, przeszedłem przez szablon i zmieniłem wszystkie tagi <i> na <span style="font-style:italic">, a następnie zastanawiałem się, dlaczego cały szablon wygląda dziwne.

To jest główny powód, dla którego używanie znacznika <i> w ten sposób jest złym pomysłem - nigdy nie wiesz, kto spojrzy później na Twoją pracę i "założy", że to, co naprawdę próbujesz zrobić, to kursywa zamiast wyświetlania ikony. Po prostu umieściłem kilka ikon na stronie internetowej i zrobiłem to za pomocą następującego kodu

<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 chcę je większe lub mniejsze, lub zaokrąglone obramowania, etc), tekst alternatywny daje czytelnikom ekranu szansę powiedzieć osobie, co ikona jest, a nie ewentualnie po prostu "tekst kursywą, koniec kursywy" (Nie wiem dokładnie, jak czytniki ekranu czytają ekrany, ale myślę, że to coś w tym stylu), a tytuł daje również użytkownikowi szansę, aby myszy nad obrazem i uzyskać podpowiedź informującą o tym, co ikona jest w przypadku, gdy nie mogą tego zrozumieć. Znacznie lepiej niż przy użyciu <i> - i również przechodzi standard W3C.

Uznałem to za przydatne, gdy chciałem umieścić ikonę z absolutnym pozycjonowaniem wewnątrz tagu linku <a>.

Myślałem najpierw o znaczniku <img>, ale domyślna stylizacja tych znaczników wewnątrz linków zazwyczaj ma efekty stylizacji obramowania i / lub cienia. Poza tym źle jest używać znacznika <img> bez definiowania atrybutu "src", podczas gdy używam deklaracji arkusza stylów tła, aby obraz nie był duchowany i przeciągany.

W tym momencie myślisz o tagach jak <span> lub <i> - w takim przypadku <i> ma tyle sensu, co tego typu ikona.

Podsumowując, myślę, że jego zaletą, oprócz intuicyjności, jest to, że wymaga minimalnych korekt arkusza stylów, aby ten znacznik działał jako ikona.