Atribut Non-Standar pada Tag HTML. Hal baik? Sesuatu yang buruk? Pikiran Anda?

HTML (atau mungkin hanya XHTML?) Relatif ketat dalam hal atribut non-standar pada tag. Jika bukan bagian dari spesifikasi, kode Anda dianggap tidak patuh.

Namun, atribut non-standar bisa sangat berguna untuk meneruskan meta-data ke Javascript. Misalnya, jika tautan seharusnya menampilkan munculan, Anda dapat menyetel nama munculan di atribut:

<a href="#null" class="popup" title="See the Popup!" 
   popup_title="Title for My Popup">click me</a>

Atau, Anda dapat menyimpan judul untuk popup di elemen tersembunyi, seperti span:

<style>
    .popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
    click me
    <span class="title">Title for My Popup</span>
</a>

Namun saya ragu mana yang harus menjadi metode yang disukai. Metode pertama lebih ringkas dan, saya rasa, tidak terlalu banyak mengacaukan mesin pencari dan pembaca layar. Sebaliknya, opsi kedua membuat penyimpanan data dalam jumlah besar menjadi lebih mudah dan karenanya, lebih fleksibel. Itu juga sesuai dengan standar.

Saya ingin tahu apa pendapat komunitas ini. Bagaimana Anda menangani situasi seperti ini? Apakah kesederhanaan metode pertama lebih besar daripada potensi kerugiannya (jika ada)?

Saya penggemar berat solusi HTML 5 yang diusulkan ( data-atribut awalan). Sunting: Saya akan menambahkan bahwa mungkin ada contoh yang lebih baik untuk penggunaan atribut khusus. Misalnya, data yang akan digunakan aplikasi khusus yang tidak memiliki analog dalam atribut standar (misalnya, penyesuaian untuk penangan peristiwa berdasarkan sesuatu yang tidak dapat selalu diekspresikan dalam className atau id).

Atribut khusus memberikan cara yang nyaman untuk membawa data tambahan ke sisi klien. Dojo Toolkit melakukan ini secara teratur dan telah ditunjukkan ( Membongkar Mitos Toolkit Dojo ) bahwa:

Atribut khusus selalu HTML yang valid, hanya saja tidak divalidasi saat diuji dengan DTD. [...] Spesifikasi HTML menyatakan bahwa atribut apa pun yang tidak dikenali harus diabaikan oleh mesin rendering HTML di agen pengguna, dan Dojo secara opsional memanfaatkan ini untuk meningkatkan kemudahan pengembangan.

Pilihan lainnya adalah dengan mendefinisikan sesuatu seperti ini di Javascript:

<script type="text/javascript">
var link_titles = {link1: "Title 1", link2: "Title 2"};
</script>

Kemudian Anda dapat menggunakan ini nanti di kode Javascript Anda, dengan asumsi tautan Anda memiliki ID yang sesuai dengan ID di hashtable ini.

Itu tidak memiliki kelemahan dari dua metode lainnya: tidak ada atribut non-standar atau rentang tersembunyi yang jelek.

Kerugiannya adalah bahwa ini mungkin sedikit berlebihan untuk hal-hal yang sederhana seperti contoh Anda. Tetapi untuk skenario yang lebih kompleks, di mana Anda memiliki lebih banyak data untuk diteruskan, itu adalah pilihan yang baik. Terutama mengingat datanya diteruskan sebagai JSON, jadi Anda bisa meneruskan objek yang kompleks dengan mudah.

Selain itu, Anda menjaga data tetap terpisah dari pemformatan, yang merupakan hal yang baik untuk pemeliharaan.

Anda bahkan dapat memiliki sesuatu seperti ini (yang tidak dapat Anda lakukan dengan metode lain):

var poi_types = {1: "City", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

<a id="poi-2" href="/poi/2/">Hatsune</a>

Dan karena Anda kemungkinan besar menggunakan beberapa bahasa pemrograman sisi server, tabel hash ini seharusnya mudah dibuat secara dinamis (cukup buat serial ke JSON dan ludahkan di bagian header halaman).

Nah dalam hal ini, solusi optimal adalah

<a href="#" alt="" title="Title of My Pop-up">click</a>

dan menggunakan atribut judul.

Terkadang saya merusak spesifikasi jika saya benar-benar membutuhkannya. Tapi jarang, dan hanya untuk alasan yang bagus.

EDIT: Tidak yakin mengapa -1, tapi saya menunjukkan bahwa terkadang Anda berpikir Anda perlu merusak spesifikasi, padahal tidak.

Mengapa tidak mendeklarasikan atribut popup_title di DTD kustom? Ini menyelesaikan masalah dengan validasi. Saya melakukan ini dengan setiap elemen non-standar, atribut dan nilai dan terima kasih validasi ini hanya menunjukkan masalah nyata dengan kode saya. Hal ini juga mengurangi kemungkinan kesalahan browser dengan HTML tersebut.

Anda bisa menyarangkan elemen masukan tersembunyi DI DALAM elemen jangkar

<a id="anchor_id">
  <input type="hidden" class="articleid" value="5">
  Link text here
</a>

Kemudian Anda dapat dengan mudah menarik data dengan

$('#anchor_id .articleid').val()

Solusi saya pada akhirnya adalah menyembunyikan data tambahan di tag id yang dipisahkan oleh semacam pemisah (satu garis bawah adalah spasi, dua adalah akhir dari argumen itu), argumen kedua ada id:

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a>

Jelek, dan mengasumsikan Anda belum menggunakan tag id untuk sesuatu yang lain, tetapi itu sesuai di semua browser.

Perasaan pribadi saya dalam contoh Anda adalah bahwa rute span lebih sesuai, karena memenuhi standar spesifikasi XHTML. Namun, saya dapat melihat argumen untuk atribut khusus, tetapi saya pikir mereka menambahkan tingkat kebingungan yang tidak diperlukan.

Saya telah memeras otak saya untuk ini juga. Saya suka keterbacaan atribut non-standar, tetapi saya tidak suka itu akan melanggar standar. Contoh span tersembunyi sesuai, tetapi tidak terlalu mudah dibaca. Bagaimana dengan ini:

<a href="#" alt="" title="" rel="{popup_title:'Title of My Pop-up'}">click</a>

Di sini kodenya sangat mudah dibaca, karena notasi pasangan kunci / nilai JSON. Anda dapat mengetahui bahwa ini adalah meta data yang memiliki tautan hanya dengan melihatnya. Satu-satunya kekurangan yang dapat saya lihat selain membajak atribut "rel" adalah hal ini akan membuat berantakan objek yang kompleks. Saya sangat menyukai gagasan tentang atribut awalan "data-" yang disebutkan di atas. Apakah ada browser terkini yang mendukung ini?

Berikut adalah hal lain untuk dipikirkan. Seberapa besar pengaruh tidak mematuhi kode pada SEO?