Simgeler için <span> yerine <i> etiketini kullanmalı mıyım? [kapalı]


572

Facebook kaynağına baktım, <i>simgeleri görüntülemek için etiketi kullanıyorlar .

Ayrıca, bugün Twitter'ın Bootstrap'ına baktım. Ayrıca <i>simgeleri görüntülemek için etiketi kullanır .

Fakat,

Gönderen HTML5 spec :

I öğesi, alternatif bir ses veya ruh halindeki bir metin aralığını temsil eder veya taksonomik bir atama, teknik bir terim, başka bir dilden deyimsel bir ifade, bir düşünce, bir gemi adı veya başka bir şey gibi normal nesirden ofset Tipografik sunumu italik olan nesir.

<i>Simgeleri görüntülemek için neden etiketi kullanıyorlar ?

Kötü bir uygulama değil mi?

Yoksa burada bir şey mi kaçırıyorum?

spanSimgeleri görüntülemek için kullanıyorum ve şimdiye kadar benim için çalışıyor gibi görünüyor.

Güncelleme:

Bootstrap 3 artık spansimgeler için kullanılıyor. Resmi Doküman


5
Örnek: Cevap Twitter'da tweet aşağıda ok: <i class="sm-reply"></i>.
kay - SE kötülük

2
Neden <span>kullanılmamalıdır?
Jashwant

6
Bana öyle geliyor ki, matematik ve erişilebilirlik için, img etiketi her zaman alt metinle birlikte simgeler için kullanılmalıdır.
nroose

12
@nroose Bunu benim üstlendiğim, simgeler için kullanılan görüntülerin içeriğin değil, sayfanın stilinin bir parçası olmasıdır (örneğin, wikipedia sayfasında inekler hakkında bir ineğin resmi). Bu nedenle, img etiketinde bir resim olarak değil, css'de tanımlanmalıdır.
CJStuart

6
HTML5'teki anlamsal kararların "görüş tabanlı" olarak düşünülmesi gerektiğini düşünmüyorum.
Aaron

Yanıtlar:


597

<i>Simgeleri görüntülemek için neden etiketi kullanıyorlar ?

Çünkü o:

  • Kısa
  • i simge anlamına gelir (HTML'de olmasa da)

Kötü bir uygulama değil mi?

Kötü uygulama. Anlambilimin üzerinde bir performans zaferi.


87
Twitter'ın bootstrapını öğrenmek için ilk günüm ve en iyi uygulamaları takip etmemeleri kötü hissettiriyor.
Jashwant

25
bazı insanlar daha ileri gidip, <tt>= araç ipucu vb.Gibi diğer öğeleri kötüye kullanıyorlar ... "HTML-Elements'ın anlamsal kötüye kullanımına karşı"
Christoph

18
Bu web sitelerinin her gün milyonlarca sayfası görüntüleniyor. Bir müşteri bu uygulamayla her sayfa istediğinde 100 bayt veri kaydederse, önemli miktarda bant genişliği kaydeder.
Dalmas

62
100 bayt kaydetmek için 16 simge içermeleri ve sıkıştırmayı etkinleştirmemeleri gerekir .
Quentin

7
Kullanımı ile ligatures kullanarak, isimgeleri göstermek için etiket anlamsal olduğunu. Aslında, Google, Malzeme simgeleri kılavuzundai etiketin bitişik harfler ile kullanılmasını önerir .
Aust

269

Buraya biraz geç geliyorum, ama kendimi düşünürken bu sayfaya rastladım. Tabii ki Facebook veya Twitter'ın bunu nasıl haklı bulduğunu bilmiyorum, ama işte buna değer için kendi düşünce sürecim.

Sonunda, bu uygulamanın o kadar da acımasız olmadığı sonucuna vardım (bu bir kelime mi?). Aslında, kısalık ve "i for icon" un güzel birlikteliğinin yanı sıra, basit bir şekilde bir simge için aslında en anlamsal seçim olduğunu düşünüyorum<img> etiket pratik olmadığında .

1. Kullanım özellikleri ile tutarlıdır.

W3'ün aklında olan şey olmasa da, bana göre resmi spekülasyon <i>bir simgeyi kolayca barındırabilir. Sonuçta, cevap ok sembolü başka bir şekilde "cevap" diyor. Okuyucuya aşina olmayan ve tipik olarak italik olan teknik bir terimi ifade eder. ("İşte Twitter'da buna cevap oku diyoruz .") Ve bu başka bir dilden gelen bir terim: sembolik bir dil.

Ok sembolü yerine Twitter kullanılırsa <i>shout out</i>veya <i>[Japanese character for reply]</i>(İngilizce bir sayfada), bu özellikle tutarlı olur. O zaman neden olmasın <i>[reply arrow]</i>? (Burada tam olarak HTML anlambiliminden bahsediyorum, erişebileceğim erişilebilirlikten değil.)

Görebildiğim kadarıyla, spesifikasyonun simge kullanımı ile açıkça ihlal edilen tek kısmı "metin aralığı" ifadesidir (etiket de metin içermiyorsa). <i>Etiketin esas olarak metin için kullanıldığı açıktır , ancak bu, etiketin genel amacına kıyasla oldukça küçük bir ayrıntıdır. Bu etiket için önemli soru, içeriğin hangi biçimini içerdiği değil, içeriğin ne anlama geldiği.

Bu, özellikle "metin" ve "simge" arasındaki çizginin web sitelerinde neredeyse yok olabileceğini düşündüğünüzde geçerlidir. Metin daha çok bir simge gibi görünebilir (Japon örneğinde olduğu gibi) veya bir simge metin gibi görünebilir ("Gönder" yazan bir jpg düğmesinde olduğu gibi veya üstyazılı altyazılı bir kedi fotoğrafı) veya metin değiştirilebilir veya CSS üzerinden bir resim. Metin, resim - kimin umurunda? Hepsi içerik. Herkes - bozukluğu olan insanlar, bozukluğu olan tarayıcılar, arama motoru örümcekleri ve çeşitli türdeki makineler bu anlamı anlayabildiği sürece, işimizi yaptık.

Dolayısıyla, spekülasyonun yazarlarının bunu açıklığa kavuşturmayı düşünmemesi (veya seçmemesi), ellerimizi mantıklı olan ve etiketin ruhu ile tutarlı olan şeyleri yapmaktan bağlamamalıdır. <a>Etiket Aslında başka bir yerde kullanıcıyı almaya, ama şimdi bir lightbox açılır diye düşünülmüştü. Büyük çember, değil mi? Birisi, spesifikasyon yakalanmadan önce bir ışık kutusunu nasıl açacağını çözmüş olsaydı, <a>etiketi <span>şu anki tanımla tamamen tutarlı olmasa bile a değil, kullanmış olmalıydı - çünkü en yakın geldi ve etiketinin ruhuyla hala tutarlı ("burayı tıkladığınızda bir şeyler olur"). Aynı anlaşma <i>- içine ne tür bir şey koyarsanız koyun, ya da yaratıcı bir şekilde kullanırsanız,

2. <i>Etiket , bir simge öğesine anlamsal anlam katar .

Bir ikon sınıfını tek başına taşımak için alternatif seçenek <span>, elbette hiçbir anlamsal anlamı olmayan şeydir. Bir makine <span>ne içerdiğini sorduğunda , "Bilmiyorum. Bir şey olabilir." Ancak <i>etiket, "Her zamanki gibi bir şey söylemenin farklı bir yolunu veya belki de bilmediğiniz bir terimi içeriyor" diyor. Bu "Ben bir simge içerdim" ile aynı şey değildir, ama ona çok daha yakın <span>!

3. Sonunda, ortak kullanım doğru olur.

Yukarıdakilere ek olarak, makine okuyucularının (arama motoru, ekran okuyucu veya her ne olursa olsun) Facebook, Twitter ve diğer web sitelerinin <i>simgeler için etiketi kullandığını herhangi bir zamanda dikkate almaya başlayabileceğini düşünmeye değer . Şartnameyi, ne anlama gelirse gelsin koddan anlam çıkarmayı önemsediği kadar umursamıyorlar. Bu nedenle, bu yaygın kullanım bilgisini basitçe "burada bir simge olabilir" kaydetmek için kullanabilirler veya anlam için bir ipucu için CSS'ye bakmayı tetiklemek veya neyi kimin bildiğini daha gelişmiş bir şey yapabilirler. Dolayısıyla <i>, web sitenizdeki for simgelerini kullanmayı seçerseniz , spesifikasyondan daha fazla anlam sağlanıyor olabilirsiniz.

Ayrıca, bu kullanım yaygınlaşırsa, gelecekte spesifikasyona dahil edilecektir. Ardından, kodunuzu <span>kullanarak<i> s'! Bu nedenle, özellikle mevcut spesifikasyonla açıkça çelişmediğinde, spesifikasyonun yönü gibi görünen şeylerle uğraşmak mantıklı olabilir. Yaygın kullanım, dil kurallarını diğerlerinden daha fazla dikte etme eğilimindedir. Yeterince yaşlıysanız, kelime yeni olduğunda "Web sitesi" nin resmi yazım olduğunu hatırlıyor musunuz? Sözlükler bir alan olması ve Web'in büyük harf kullanımı gerektiğinde ısrar etti. Bunun anlamsal nedenleri vardı. Ancak yaygın kullanım, "Her neyse, bu aptalca. 'Web sitesi' kullanıyorum çünkü daha özlü ve daha iyi görünüyor." Ve çok geçmeden,

4. Bu yüzden devam ediyorum ve kullanıyorum.

Bu nedenle, <i>spesifikasyon nedeniyle makineler için daha fazla anlam sağlar, insanlar için daha fazla anlam sağlar, çünkü "i" yi "simge" ile kolayca ilişkilendiririz ve bu sadece bir harf uzunluğundadır. Kazan! Ayrıca, <i>etiketin içine veya hemen yanına eşdeğer metin eklediğinizden emin olursanız (Twitter'ın yaptığı gibi), ekran okuyucuları nereye yanıt verileceğini anlar, CSS yüklenmezse bağlantı kullanılabilir ve iyi olan insan okuyucuları görme yeteneği ve iyi bir tarayıcı güzel bir simge görüyor. Tüm bunları göz önünde bulundurarak, olumsuz tarafı görmüyorum.


33
Ancak bunu kötüye kullanmadan yapmanın yolları vardır <i>: düğmeler veya bağlantılar da dahil olmak üzere herhangi bir metin öğesini kullanın ve arka plan grafiği ve bazı dolguları kullanarak bir simge ekleyin <i>. HTML <a ...>Reply</a>, semantik gibi görünüyor , stil sayfası ek olarak bir simge gösterir. Simge tek birincil öğeyse, bir olmalıdır <img src="..." alt="Reply">.
deceze

36
@Holly, Tamamen farklı bir tarafa aldın ama üzgünüm, söylediğin her bir çizgiye katılmıyorum.
Ocak'ta Jashwant

11
Boşluk (bir simge bile) metin değildir ve spesifikasyonda özel olarak yazılan metindir.
Ry-

17
Spesifikasyonda özellikle yazılan jack anlamına gelir. Biliyorsunuz ve herkes biliyor. Bu bir rehber. Başka bir şey yok. IE özelliğe önem veriyor mu? İyileşiyorlar. Her bir tarayıcının spesifikasyonu mükemmelleştirmeye çalıştığını düşünüyor musunuz? Gezegendeki herkesin <code> nav, üstbilgi, altbilgi, bölüm, bir yana, ... n </code> 'ı doğru kullandığını düşünüyor musunuz? Hayır! Sayfadan sonra bir kenara giderim, burada bir kenara <code> <div class = "sidebar"> </code> yerine ne olur biliyor musunuz? İnsanların kullanmaya devam etme şekli, gelecekte "anlambilimsel" olarak tanımlanacak olan şeydir.
o_O

17
Büyük tartışmalar, bence beni ikna ettin. Özellikle inandırıcı # 3, "ortak kullanım doğru yapar". Tıpkı ortak dilde olduğu gibi, herkes bir kelimeyi bu şekilde kullanmaya başlarsa, standart kullanım haline gelir. HTML özellikleri bir süredir gelişen bir belgedir ve ona dogmatik olarak bağlı kalmak saçmadır. Benim görüşüme göre, ortak sözleşmeye bağlı kalmak daha sürdürülebilir bir yoldur. Ayrıca, <i> elementi şu anda kullanımdan kaldırıldı, bu yüzden ona yeni, anlamsal açıdan zengin bir hayat verme konusunda iyi hissediyorum! Kuşkusuz bu özelliğin bu kullanımla nasıl gelişeceğini merak ediyorum.
Mantık Sanatçısı

59

Quentin'in cevabı açıkça ietiketlerin simgeleri tanımlamak için kullanılmaması gerektiğini belirtir .

Ancak Holly bunun spankendi başına bir anlamı olmadığını ve etiket iyerine lehine oy verdiğini öne sürdü span.

imgSemantik ve altetiket içerdiği için çok az önerilen Ancak, imgboş bile srcsunucuya bir istek gönderdiği için kullanmamalıyız . Burayı oku

Bence, doğru yol,

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

Bu, altetiket bulunmaması sorununu çözer ve spangörme engelli kullanıcılar tarafından erişilebilir olmasını sağlar. Anlamsaldır ve herhangi bir etiketi yanlış kullanmaz (hacklemez).


6
@GeorgeMauer, tüm saygılı html / web tasarımcıları alt etiketleri önemser. spec orada bir nedenden dolayı. binalardaki rampalar gibi, alt, başlık ve aria etiketleri bir sebepten dolayı var.
osiris

3
@osiris artık beklemede, teknik özellikler sürekli değişiyor. İzlemenin iyi olduğuna katılıyorum, ancak temel amacı dikkate almalısınız. Olduğu söyleniyor, baktığımdan beri, sadece ekran okuyucular / eksik görüntüler / araç ipuçları için değil, aslında farkında olmadığım bir semantik var. MDN: "Bu özniteliğin atlanması, görüntünün içeriğin önemli bir parçası olduğunu, ancak metinsel eşdeğerinin bulunmadığını gösterir. Bu özniteliğin boş dizeye ayarlanması, bu görüntünün içeriğin önemli bir parçası olmadığını gösterir; görsel olmayan tarayıcılar oluşturma işlemini atlayın. "
George Mauer

3
Bir yan not olarak, bir simge için doğru aria rolünün sunum olduğuna inanıyorum . İmg değil .
Sylvain Leroux

2
@SylvainLeroux, sanırım simge metinle birlikte bir düğmede kullanılıyorsa, o zaman rol sunumdur. Ancak düğmede (metin yok) yalnızca simge kullanılıyorsa, rolü img'dir.
Jashwant

2
BUNLARI ERİŞİLEBİLMEZ! Ekran okuyucularla test ettiniz mi ?! Doğal erişilebilir çözüm değiştirilmesi <img alt="...">ile <span role="img">markaları her şey daha kötü. Kullanmayın aria-labelbir SPAN olmayan odaklanabilir elemana. Her zaman beklendiği gibi çalışmaz. Ne roleyaptığınızı bilmiyorsanız kullanmayın . ARIA'yı aşırı kullanmak her şeyi herkes için daha da kötüleştiriyor. Bir ürüne erişilemez hale getirilmesi ve kodun okunması ve bakımı daha zordur. SEO ne olacak? ARIA iyidir ama akıllıca kullanın - accessibility-developer-guide.com/knowledge/aria/bad-practices
Hrvoje Golcic

12

Tahminim: Twitter eski tarayıcıları destekleme gereği gördüğünden, aksi takdirde :before/ :afterpseudo-elements kullanıyor olabilirler.

Eski tarayıcılar, bahsettiğim sözde öğeleri desteklemediğinden, simgeler için gerçek bir HTML öğesi kullanmaları gerekir ve simgeler 'özel' etikete sahip olmadığından, yalnızca etiketle birlikte gelir <i>ve tüm tarayıcılar desteklenir bu etiketi.

Kesinlikle a <span>, tıpkı sizin gibi (ki tamamen iyi) kullanmış olabilirlerdi , ancak muhtemelen yukarıda bahsettiğim sebeplerden ötürü ve Quentin tarafından belirtilenler yüzünden Bootstrap <i>etiketi neden kullanıyor .

Stil oluşturma nedenleriyle ekstra işaretleme kullandığınızda kötü bir uygulama, bu yüzden içeriği stilden ayırmak için sözde öğeler icat edildi ... ancak eski tarayıcıları destekleme gereğini gördüğünüzde, bazen bu tür bir şeyler.

PS. Simgelerin bir 'i' ile başlaması ve bir <i>etiketin olması tamamen tesadüf.


3
Gerçekten değil, Eğer orada kod I bakmak önce bir element
DCdaz

12

Burada herkesin cevaplarına tamamen farklı bir yaklaşım benimsiyorum. Çözümümün ön ekini yapalım ve bazen standartların ve kuralların, özellikle standart HTML sözlük etiketi tanımları bağlamında kırılması gerektiğini belirterim.

Kendi amacına açıklayıcı özel öğeler oluşturmanızı engelleyecek hiçbir şey yok.

Hem modern tarayıcılar hem de IE 6+ (wim / shim) aşağıdakileri destekleyebilir:

<icon class="plus">

veya

<icon-add>

Etiketi normalleştirdiğinizden emin olun:

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

ve IE9 veya önceki sürümlerini desteklemeniz gerekiyorsa bir dolgu kullanın (aşağıdaki gönderiye bakın).

Bu StackOverflow Yayını'na göz atın:

HTML5'te kendi html etiketinizi oluşturmanın bir yolu var mı

Argümanımı daha da ileriye taşımak için hem Google'ın Açısal Yönergeleri hem de yeni Polimer projeleri özel HTML etiketleri kavramını kullanıyor.


2
Ve sonra W3C doğrulayıcısına gidip girip <!doctype html> <html lang="en"> <head> <title>Hello</title> </head> <body> <icon></icon> </body> </html>tek bir hata alıyorsunuz, diyerekError: Element icon not allowed as child of element body in this context.
Digital Ninja

6

Bunun oldukça kötü göründüğünü düşündüm - çünkü son zamanlarda bir Joomla şablonu üzerinde çalışıyordum ve W3C'de başarısız olan şablonu almaya devam ettim çünkü <i>etiketi kullanıyordu ve kullanımdan kaldırılmıştı, çünkü asıl kullanım şu anda CSS ile yapılan bir şeyi italikleştirmekti. artık HTML değil.

Gerçekten kötü bir uygulama yapıyor çünkü gördüğümde şablondan geçtim ve tüm <i>etiketleri değiştirdim <span style="font-style:italic">ve ardından tüm şablonun neden garip göründüğünü merak ettim.

<i>Etiketi bu şekilde kullanmanın kötü bir nedeni budur - daha sonra işinize kimin bakacağını asla bilemezsiniz ve gerçekten yapmaya çalıştığınız şeyin metni görüntülemek yerine italik yazmak olduğunu "varsaymazsınız" simgesi. Sadece bir web sitesine bazı simgeler koydum ve aşağıdaki kodla yaptım

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

Bu şekilde tüm simgelerimi tek bir sınıfta aldım, böylece yaptığım herhangi bir değişiklik tüm simgeleri etkiler (daha büyük veya daha küçük olmasını istedim veya yuvarlak kenarlıklar vb.), alt metin ekran okuyuculara kişiye ne olduğunu söyleme şansı verir. simge sadece "italik metin, italik sonu" almaktan ziyade (ekran okuyucularının ekranları nasıl okuduğunu tam olarak bilmiyorum ama sanırım böyle bir şey) ve başlık da kullanıcıya fareyle üzerine gelme şansı veriyor resim ve anlayamamaları durumunda simgenin ne olduğunu söyleyen bir ipucu edinin. Kullanmaktan çok daha iyi <i>- ve ayrıca W3C standardını geçiyor.


7
<i>kullanımdan kaldırılmış değil.
user2867288

3
"İmg" etiketi yazı tipi simgeleri için çalışmaz. Demek istediğim, ancak tarayıcınız her ayrıştırıldığında sitenize bir istek gönderir.
Navin

1
Bunun yerine <span style="font-style:italic" />daha yeni bir alternatif kullanabilirsiniz<strong />
ewino

@ewino Kelimeleri vurgulamak için semantik yerine geçen <em> </em> demek istediğine inanıyorum (sadece italik
yazmaktan

Gerçekten
haklısın

2

Ben de bir bağlantı <a>etiketi içinde mutlak konumlandırma ile bir simge yerleştirmek istedim bu yararlı bulundu .

<img>Önce etiketi düşündüm , ancak bağlantıların içindeki bu etiketlerin varsayılan stilinin genellikle kenarlık stili ve / veya gölge efektleri var. Artı, <img>bir "src" özniteliği tanımlamadan bir etiket kullanmak yanlış hissederken , ben de arka plan görüntüsü stil sayfası bildirimi kullanıyorum böylece görüntü gölgelemek ve sürüklemek değil.

Bu noktada <span>veya gibi etiketleri düşünüyorsunuz <i>- bu durumda <i>bu tür bir simge kadar mantıklı.

Sonuçta sezgisel olmanın yanı sıra, bu etiketin bir simge olarak çalışmasını sağlamak için minimal stil sayfası ayarlamaları gerektirdiğini düşünüyorum.


Tamam İşte bu yüzden kötü bir uygulama olduğunu düşünüyorum. Tarihsel olarak <B> kalın ve <I> italik içindi. Yani <i> kullandıysanız bunun için olmayan boş bir italik etiket oluşturursunuz. Bunlar <strong> ve <em> ile değiştirildi. Yani eski tarayıcılar için bir sayfayı boş italik etiketlerle işaretlemek istemezsiniz ve kör için ekran okuyucular hakkında ne varsa bağlantıdaki simgeler METİN deyin. Yazı tipi boyutunu sıfırlayabileceğiniz ve simgeye sahip olabileceğiniz için <span> daha iyi bir seçimdir.
user1712691

1
@ user1712691 Yaygın olarak kullanılan ve sırasıyla <b>ve <i>ile değiştirilen bir efsane . Ama gerçek şu ki, ve kaldırılmış değildir ve yeni semantik anlamları üzerinde almış. Daha fazla bilgi edinmek için resmi teknik özellikleri okuyun . <strong><em><b><i>
chharvey
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.