Haruskah saya menggunakan tag <i> untuk ikon alih-alih <span>? [Tutup]

Saya sudah melihat ke sumber Facebook, mereka menggunakan <i>tag untuk menampilkan ikon.

Juga, hari ini saya melihat Bootstrap Twitter. Itu juga menggunakan <i>tag untuk menampilkan ikon.

Tapi,

Dari spesifikasi HTML5 :

Elemen I mewakili rentang teks dalam suara atau suasana hati alternatif, atau sebaliknya mengimbangi dari prosa normal, seperti sebutan taksonomi, istilah teknis, frase idiomatik dari bahasa lain, pemikiran, nama kapal, atau lainnya prosa yang presentasi tipografiknya dicetak miring.

Mengapa mereka menggunakan <i>tag untuk menampilkan ikon?

Apakah ini bukan praktik yang buruk?

Atau saya kehilangan sesuatu di sini?

Saya menggunakan spanuntuk menampilkan ikon dan sepertinya berfungsi untuk saya sampai sekarang.

Memperbarui:

Bootstrap 3 sekarang digunakan spanuntuk ikon. Dok resmi

Mengapa mereka menggunakan <i>tag untuk menampilkan ikon?

Karena:

• Pendek
• saya singkatan ikon (meskipun tidak dalam HTML)

Apakah ini bukan praktik yang buruk?

Latihan yang mengerikan. Ini adalah kemenangan kinerja atas semantik.

Saya sedikit terlambat masuk ke sini, tetapi menemukan halaman ini ketika merenungkannya sendiri. Tentu saja saya tidak tahu bagaimana Facebook atau Twitter membenarkannya, tetapi di sini ada proses pemikiran saya sendiri untuk apa nilainya.

Pada akhirnya, saya menyimpulkan bahwa praktik ini tidak terlalu tidak romantis (apakah itu sebuah kata?). Faktanya, selain kekurangan dan asosiasi "i adalah untuk ikon," saya pikir itu sebenarnya adalah pilihan yang paling semantik untuk sebuah ikon ketika <img>label sederhana tidak praktis.

1. Penggunaan konsisten dengan spesifikasi.

Meskipun mungkin bukan apa yang dipikirkan W3, menurut saya spesifikasi resmi untuk <i>dapat mengakomodasi ikon cukup mudah. Lagi pula, simbol panah balasan mengatakan "balas" dengan cara lain. Ini mengungkapkan istilah teknis yang mungkin asing bagi pembaca dan biasanya dicetak miring. ("Di sini, di Twitter, ini adalah apa yang kami sebut panah balasan .") Dan itu adalah istilah dari bahasa lain: bahasa simbolik.

Jika, alih-alih simbol panah, Twitter menggunakan <i>shout out</i>atau <i>[Japanese character for reply]</i>(pada halaman bahasa Inggris), itu akan konsisten dengan spesifikasi. Lalu mengapa tidak <i>[reply arrow]</i>? (Saya berbicara semantik HTML di sini, bukan aksesibilitas, yang akan saya bahas.)

Sejauh yang saya bisa lihat, satu-satunya bagian dari spesifikasi yang secara eksplisit dilanggar oleh penggunaan ikon adalah frasa "rentang teks" (ketika tag tidak mengandung teks juga). Jelas bahwa <i>tag ini terutama ditujukan untuk teks, tapi itu detail yang cukup kecil dibandingkan dengan keseluruhan maksud tag. Pertanyaan penting untuk tag ini bukanlah format konten yang dikandungnya, tetapi apa arti konten itu.

Ini terutama benar ketika Anda menganggap bahwa garis antara "teks" dan "ikon" hampir tidak ada di situs web. Teks mungkin terlihat lebih mirip ikon (seperti dalam contoh Jepang) atau ikon mungkin terlihat seperti teks (seperti pada tombol jpg yang bertuliskan "Kirim" atau foto kucing dengan teks yang dilapiskan) atau teks dapat diganti atau ditingkatkan dengan gambar melalui CSS. Teks, gambar - siapa yang peduli? Itu semua konten. Selama semua orang - manusia dengan disabilitas, browser dengan disabilitas, spider mesin pencari, dan mesin lain dari berbagai jenis dapat memahami makna itu, kami telah melakukan tugas kami.

Jadi fakta bahwa penulis spec tidak berpikir (atau memilih) untuk mengklarifikasi ini seharusnya tidak mengikat tangan kami dari melakukan apa yang masuk akal dan konsisten dengan semangat tag. The <a>tag pada awalnya ditujukan untuk membawa pengguna ke tempat lain, tapi sekarang mungkin muncul lightbox. Teriakan besar, kan? Jika seseorang menemukan cara memunculkan lightbox pada klik sebelum specnya ditemukan, mereka masih harus menggunakan <a>tag, bukan a <span>, bahkan jika itu tidak sepenuhnya konsisten dengan definisi saat ini - karena itu datang paling dekat dan merupakan masih konsisten dengan semangat tag ("sesuatu akan terjadi ketika Anda mengklik di sini"). Kesepakatan yang sama <i>- apa pun jenis yang Anda masukkan ke dalamnya, atau seberapa kreatif Anda menggunakannya,

2. <i>Tag menambahkan makna semantik ke elemen ikon.

Pilihan alternatif untuk membawa kelas ikon dengan sendirinya adalah <span>, yang tentu saja tidak memiliki makna semantik sama sekali. Ketika sebuah mesin menanyakan <span>isinya, ia berkata, "Saya tidak tahu. Bisa apa saja." Tetapi <i>tag itu berkata, "Saya mengandung cara yang berbeda untuk mengatakan sesuatu dari cara biasa, atau mungkin istilah yang tidak dikenal." Itu tidak sama dengan "Saya mengandung ikon," tapi itu jauh lebih dekat daripada <span>mendapatkannya!

3. Akhirnya, penggunaan umum menjadi benar.

Selain hal di atas, ada baiknya mempertimbangkan bahwa mesin pembaca (apakah mesin pencari, pembaca layar, atau apa pun) dapat setiap saat mulai mempertimbangkan bahwa Facebook, Twitter, dan situs web lain menggunakan <i>tag untuk ikon. Mereka tidak peduli tentang spek sebanyak mereka peduli tentang penggalian makna dari kode dengan cara apa pun yang diperlukan. Jadi mereka mungkin menggunakan pengetahuan tentang penggunaan umum ini hanya untuk merekam bahwa "mungkin ada ikon di sini" atau melakukan sesuatu yang lebih maju seperti memicu pandangan ke CSS untuk petunjuk tentang makna, atau siapa yang tahu apa. Jadi jika Anda memilih untuk menggunakan <i>ikon for di situs web Anda, Anda mungkin memberikan lebih banyak makna daripada spesifikasi.

Selain itu, jika penggunaan ini menyebar luas, kemungkinan akan dimasukkan dalam spesifikasi di masa mendatang. Maka Anda akan melalui kode Anda, mengganti <span>dengan dengan <i>! Jadi mungkin masuk akal untuk bergabung dengan apa yang tampaknya menjadi arah spesifikasi, terutama ketika itu tidak jelas bertentangan dengan spesifikasi saat ini. Penggunaan umum cenderung mendikte aturan bahasa lebih dari sebaliknya. Jika Anda cukup tua, apakah Anda ingat bahwa "Situs web" adalah ejaan resmi ketika kata itu baru? Kamus bersikeras harus ada ruang dan Web harus ditulis dengan huruf besar. Ada alasan semantik untuk itu. Tetapi penggunaan umum mengatakan, "Apa pun, itu bodoh. Saya menggunakan 'situs web' karena lebih ringkas dan terlihat lebih baik." Dan tak lama kemudian,

4. Jadi saya akan maju dan menggunakannya.

Jadi, <i>memberikan lebih banyak makna ke mesin karena speknya, ia memberikan lebih banyak makna bagi manusia karena kita dengan mudah menghubungkan "i" dengan "ikon", dan panjangnya hanya satu huruf. Menang! Dan jika Anda memastikan untuk memasukkan teks yang setara baik di dalam <i>tag atau tepat di sebelahnya (seperti Twitter), maka pembaca layar memahami di mana harus mengklik untuk membalas, tautan tersebut dapat digunakan jika CSS tidak memuat, dan pembaca manusia dengan baik penglihatan dan peramban yang layak melihat ikon yang cantik. Dengan semua ini dalam pikiran, saya tidak melihat sisi buruknya.

Jawaban Quentin dengan jelas menyatakan bahwa itag tidak boleh digunakan untuk mendefinisikan ikon.

Namun, Holly menyarankan bahwa spantidak ada artinya dalam dirinya dan memilih mendukung ibukannya spantag.

Sedikit yang menyarankan untuk digunakan img karena semantik dan mengandung alttag. Tapi, kita juga tidak boleh menggunakan imgkarena bahkan kosong srcmengirimkan permintaan ke server. Baca di sini

Saya pikir, cara yang benar adalah,

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

Ini menyelesaikan masalah tidak ada alttag di spandan membuatnya dapat diakses oleh pengguna dengan gangguan penglihatan. Ini semantik dan tidak menyalahgunakan (meretas) tag apa pun.

Dugaan saya: Karena Twitter melihat kebutuhan untuk mendukung browser lawas, jika tidak mereka akan menggunakan :before/ :afterpseudo-elements.

Browser lama tidak mendukung elemen pseudo yang saya sebutkan, sehingga mereka perlu menggunakan elemen HTML yang sebenarnya untuk ikon, dan karena ikon tidak memiliki tag 'eksklusif', mereka hanya pergi dengan <i>tag, dan semua browser mendukung tag itu.

Mereka pasti bisa menggunakan <span>, sama seperti Anda (yang benar-benar baik-baik saja), tapi mungkin karena alasan yang saya sebutkan di atas ditambah yang disebutkan oleh Quentin , juga mengapa Bootstrap menggunakan <i>tag.

Ini adalah praktik yang buruk ketika Anda menggunakan markup tambahan untuk alasan gaya, itu sebabnya elemen semu diciptakan, untuk memisahkan konten dari gaya ... tetapi ketika Anda melihat kebutuhan untuk mendukung browser lawas, kadang-kadang Anda dipaksa untuk melakukan semacam ini. sesuatu.

PS. Fakta bahwa ikon dimulai dengan 'i' dan bahwa ada <i>tag, sepenuhnya kebetulan.

Saya mengambil pendekatan yang sama sekali berbeda untuk jawaban semua orang di sini. Biarkan saya awali solusi saya dan berdebat dengan menyatakan bahwa kadang-kadang standar dan konvensi dimaksudkan untuk dilanggar, terutama dalam konteks definisi tag leksikal standar HTML.

Tidak ada yang menghentikan Anda dari membuat elemen kustom yang bersifat deskriptif sendiri untuk itu sangat tujuan.

Browser modern dan bahkan IE 6+ (w / shim) dapat mendukung hal-hal seperti:

<icon class="plus">

atau

<icon-add>

Pastikan untuk menormalkan kembali tag:

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

dan gunakan shim jika Anda perlu mendukung IE9 atau sebelumnya (lihat posting di bawah).

Lihat StackOverflow Post ini:

Apakah ada cara untuk membuat tag html Anda sendiri di HTML5

Untuk memperdebatkan argumen saya, Google Angular Directive dan proyek Polymer baru menggunakan konsep tag HTML khusus.

Saya pikir ini terlihat sangat buruk - karena saya sedang mengerjakan template Joomla baru-baru ini dan saya terus mendapatkan template gagal W3C karena menggunakan <i>tag dan yang sudah usang, karena penggunaan aslinya adalah untuk mencetak miring sesuatu, yang sekarang dilakukan melalui CSS bukan HTML lagi.

Itu membuat praktik yang sangat buruk karena ketika saya melihatnya saya melihat templat dan mengubah semua <i>tag <span style="font-style:italic">sebagai gantinya dan kemudian bertanya-tanya mengapa seluruh templat tampak aneh.

Ini adalah alasan utama mengapa menggunakan <i>tag dengan cara ini adalah ide yang buruk - Anda tidak pernah tahu siapa yang akan melihat pekerjaan Anda sesudahnya dan "berasumsi" bahwa yang sebenarnya Anda coba lakukan adalah mencetak miring teks daripada menampilkan ikon. Saya baru saja meletakkan beberapa ikon di situs web dan saya melakukannya dengan kode berikut

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

dengan cara itu saya mendapatkan semua ikon saya dalam satu kelas sehingga setiap perubahan yang saya buat mempengaruhi semua ikon (katakan saya ingin mereka lebih besar atau lebih kecil, atau batas bulat, dll), teks alt memberikan pembaca layar kesempatan untuk memberi tahu orang itu apa ikon daripada hanya mungkin mendapatkan "teks dalam huruf miring, akhir huruf miring" (Saya tidak tahu persis bagaimana pembaca layar membaca layar tapi saya kira itu sesuatu seperti itu), dan judulnya juga memberi pengguna kesempatan untuk beralih ke gambar dan dapatkan tooltip memberi tahu mereka apa ikonnya jika mereka tidak bisa mengetahuinya. Jauh lebih baik daripada menggunakan <i>- dan juga melewati standar W3C.

Saya juga menemukan ini berguna ketika saya ingin menempatkan ikon dengan posisi absolut di dalam <a>tag tautan .

Saya memikirkan <img>tag terlebih dahulu, tetapi styling default dari tag tersebut di dalam tautan biasanya memiliki styling tepi dan / atau efek bayangan. Plus, rasanya salah menggunakan <img>tag tanpa mendefinisikan atribut "src" sedangkan saya menggunakan deklarasi style sheet gambar latar belakang sehingga gambar tidak hantu dan seret.

Pada titik ini Anda memikirkan tag seperti <span>atau <i>- dalam hal <i>ini sangat masuk akal sebagai jenis ikon ini.

Semua dalam semua saya pikir manfaatnya selain menjadi intuitif adalah bahwa ia memerlukan penyesuaian style sheet minimal untuk membuat tag ini berfungsi sebagai ikon.