Haruskah saya menggunakan tag non-standar di halaman HTML untuk menyorot kata-kata?

Saya ingin tahu apakah itu praktik yang baik atau legal untuk menggunakan tag non-standar di halaman HTML untuk tujuan khusus tertentu.

Sebagai contoh:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Berikutnya, klik untuk melihat lebih banyak tentang laoreet, mulai dengan accumsan arcu, atau kemudian klik untuk melihat lebih banyak.

Saya ingin menyoroti "consectetur adipiscing elit" sebagai penting dan "nisi arcu accumsan arcu" seperti yang disorot.

Jadi dalam HTML saya akan menempatkan:

Lorem ipsum dolor sit amet, <important> consectetur adipiscing elite </important>. Akibatnya, klik di sini untuk melihat lebih banyak, <highlighted> nisi arcu accumsan arcu </highlighted>, atau tambahkan ke daftar lainnya.

dan di CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

Namun, karena ini bukan tag HTML yang valid, apakah ini oke?

Tidak, ini bukan praktik yang baik. Anda harus menggunakan tag semantik dan bermakna - mungkin <em>dalam kasus ini - dan menerapkan gaya CSS untuk mencapai persyaratan desain Anda.

Pertanyaan Anda diajukan apakah " praktik yang baik atau legal ".

Pertama: ini semacam hukum - setidaknya, itu ditoleransi. Peramban selalu diprogram untuk mengatasi tag yang tidak mereka pahami, meskipun itu berarti mereka mengabaikannya. Kode HTML ini:

Some <b>bold</b> and some <slanted>italic</slanted>.

Akan muncul seperti ini adalah setiap peramban tunggal:

Beberapa huruf tebal dan huruf miring.

Selain itu, sebagian besar browser akan memungkinkan Anda untuk menata elemen itu dalam CSS. Jadi, jika Anda menambahkan definisi CSS berikut:

slanted { font-style: italic; }

sebagian besar browser sekarang akan merender sebagai berikut:

Beberapa huruf tebal dan huruf miring .

Sungguh: coba sendiri . Kebetulan, ini adalah trik yang digunakan pengembang web untuk mencoba dan memastikan bahwa tag HTML5 baru ditampilkan dengan benar di browser lama.

Namun, itu bukan gambaran yang lengkap. Jawaban lengkapnya adalah tidak, ini bukan praktik yang baik . Anda mungkin telah memperhatikan penggunaan frasa " sebagian besar browser" saya. Sayangnya, semua versi Internet Explorer sebelum IE9 gagal menerapkan perilaku ini. Di IE8 dan sebelumnya, kode di atas masih akan terlihat seperti ini:

Beberapa huruf tebal dan huruf miring.

Ada deskripsi yang sangat terperinci tentang masalah ini di Dive Into HTML5 , di mana Anda juga akan menemukan detail solusinya. Namun, solusi memerlukan JavaScript sehingga ini bukan solusi HTML murni dan tidak akan berfungsi di semua skenario.

Jadi, jawaban singkat: tetap berpegang pada elemen HTML standar saja dan gaya mereka sesuka Anda di CSS Anda.

Jika Anda perlu menyimpan semantik <important/>untuk alasan tertentu, Anda dapat menggunakan XSL untuk mengubah tag khusus menjadi HTML yang valid. Anda dapat membaca lebih lanjut tentang topik ini di sini:

http://www.w3.org/Style/XSL/WhatIsXSL.html

http://www.4guysfromrolla.com/webtech/081300-2.shtml

http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

http://www.siteexperts.com/tips/xml/ts01/page5.asp

http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-using-xsl.html

Anda masih belum dapat memiliki <important/>dalam hasil HTML final, tetapi Anda dapat mengubahnya secara otomatis menjadi sesuatu seperti <span class="important"....

Ada beberapa jawaban di sini yang menjelaskan mengapa Anda tidak boleh membuat tag khusus sendiri. Bisa dibilang, mereka semua salah.

Analisis tag kustom WHATWG menyimpulkan bahwa tag itu dapat diterima, memenuhi standar (karena penanganan tag yang tidak dikenali didefinisikan dengan baik) dan lebih mudah diakses daripada, misalnya, merancang div generik.

<x-accordion> </x-accordion> tidak lebih buruk dari <div class = "accordion"> </div> dalam segala hal mekanis. Dengan tidak adanya definisi untuk "x-accordion" (atau dukungan model komponen), keduanya memiliki arti yang sama, keduanya dapat ditata dengan cara yang sama. Salah satunya adalah HTMLUnknownElement, yang lainnya adalah HTMLDivElement, dan permukaan API mereka identik.

Yang harus Anda lakukan, yang OP tidak lakukan, adalah awalan semua tag khusus dengan 'x-' per konvensi. Ini dengan jelas menunjukkan bahwa Anda bermaksud tag ini menjadi lokal untuk dokumen Anda dan menghindari konflik dengan elemen spesifikasi di masa mendatang.

Beberapa orang berpendapat bahwa karena browser populer tertentu tidak menangani tag khusus dengan cara yang sesuai standar, Anda tidak boleh menggunakannya. Namun, perilaku browser yang tidak patuh adalah masalahnya sendiri dan lebih disukai tidak akan memaksa Anda untuk menulis markup non-semantik. Ada beberapa solusi Javascript dan non-Javascript untuk masalah itu, yang seharusnya hanya diterapkan untuk browser yang tidak patuh yang ingin Anda dukung secara khusus.

Semua yang dikatakan, jika ada tag di spec (<mark>) yang dengan jelas mencakup makna semantik dari tag yang Anda buat (<highlight>), maka tentu saja lebih baik menggunakan tag yang ada.

Anda dapat menggunakan <em />dan <strong />dengan CSS khusus untuk mengubah cara ditampilkan.

Kuat, mengacu pada kepentingan yang lebih kuat.

Penekanan, mengacu pada peningkatan penekanan.

Di sisi praktis, tidak perlu menggunakan tag baru untuk menyorot. Anda dapat menggunakan ematau imenandai jika Anda lebih suka cetak miring sebagai render default (non-CSS) dan strongatau bjika Anda lebih suka huruf tebal sebagai default. Jika, karena alasan tertentu, Anda lebih suka rendering default sebagai teks normal, yaitu tanpa penyorotan, gunakan span. Dalam setiap kasus, Anda dapat menggunakan classatribut untuk membedakan penggunaan ini dari penggunaan lain yang mungkin Anda miliki untuk markup.

Spesifikasi HTML dan (HTML5) draf tidak jelas sehubungan dengan semantik elemen-elemen ini, tetapi ini tidak perlu menyebabkan sakit kepala besar.

Tidak, meskipun diizinkan untuk menambahkan tag baru dari namespace lain di XHTML, pemrosesan tag HTML yang tidak ditentukan sangat tidak disarankan.

Ya, itu legal karena kamu tidak akan ditangkap karena melakukannya. Tetapi jika pembunuh dari W3C muncul di depan pintu Anda, jangan kaget.

Pertama, pengembang lainnya tidak akan tahu apa artinya. Dalam kasus <important>dan <highlight>mereka, tetapi jika Anda menggunakan sesuatu seperti, katakanlah, <set>Anda mungkin tahu Anda merujuk pada set matematika, tetapi orang lain yang membaca kode Anda mungkin mengira itu untuk sesuatu yang lain. Tanpa spek di sana untuk memberikan jawaban, mungkin ada banyak kebingungan.

Kedua, bagaimana jika W3C memutuskan bahwa suatu <important>elemen adalah ide yang baik, tetapi berpikir itu harus berarti pemberitahuan segera, seperti

<important>This site is going to be down for maintenance 2/29/2012.</important>

Maka Anda kacau. Peramban dan sesama pengembang Anda akan agak bingung. Mereka mungkin akan memaksa Anda untuk mengurai kode Anda dengan regex sampai Anda menjadi gila. Dan kita semua tahu bagaimana hasilnya.

Ketiga, IE <9 tidak membiarkan Anda mendesain elemen yang tidak dikenal tanpa sedikit hack. Bukan hal besar, tapi menyebalkan.

Terakhir, dalam hal ini, <important>dan <highlight>sudah ada! <strong>dan <mark>apa yang Anda cari. Menurut spec HTML5

Elemen yang kuat mewakili kepentingan yang kuat untuk isinya.

dan

Elemen tanda mewakili serangkaian teks dalam satu dokumen yang ditandai atau disorot untuk tujuan referensi ...

Jika Anda tidak menggunakannya untuk "tujuan referensi", a <span>dengan kelas akan baik-baik saja.

http://www.w3.org/TR/html5/elements.html

Ini revisi 1.5612.

Penulis tidak boleh menggunakan elemen, atribut, atau nilai atribut yang tidak diizinkan oleh spesifikasi ini atau spesifikasi lain yang berlaku, karena hal itu membuat bahasa secara signifikan lebih sulit untuk diperluas di masa depan.

Mengabaikan pendapat semua orang di sini.

Ini bukan praktik yang baik karena dua alasan yang sangat penting:

Pertama, sangat mungkin bahwa pada titik tertentu komite standar memutuskan untuk menyertakan tag bernama <important>yang akhirnya merusak penggunaan Anda untuk itu. Tentu, mungkin butuh waktu .. Tapi mungkin Anda akan membuang waktu untuk merobeknya setelah itu.

Kedua, (ini adalah alasan sebenarnya) programmer yang mewarisi kode Anda akan terus-menerus mengatakan "wtf" pada pendekatan non-standar Anda sambil mencabut semua itu, atau, sama mungkin, menjadi sangat bingung dengan apa yang Anda Sudah selesai dan berhenti dengan frustrasi.

Jadi, bersikap baiklah. Anda tidak pernah tahu, Anda mungkin akhirnya meminta salah satu dari mereka untuk suatu pekerjaan.

Tidak, Anda tidak dapat membuat tag HTML Anda sendiri, karena Anda harus meminta semua browser utama untuk mengimplementasikannya, saat ini ketika browser menemukan tag yang tidak dikenal mereka mengabaikan semua yang ada di dalamnya, jadi kecuali jika Anda ingin membuat browser Anda sendiri membuat tag baru tag tidak ada gunanya, dan meskipun demikian mereka hanya akan berfungsi di browser Anda.

Anda dapat mencoba mengirim kasus penggunaan untuk mereka ke w3c, tapi saya ragu itu akan berhasil.

Tidak, ini bukan praktik yang baik karena semua alasan diberikan oleh semua jawaban lain. Alih-alih mengulangi poin-poin itu, saya ingin menyajikan opsi yang belum saya lihat dalam jawaban itu!

Jika tidak ada tag yang ada yang makna semantiknya sesuai dengan tujuan Anda, Anda dapat menggunakan kombinasi CSS dan data-*atribut baru dalam spesifikasi HTML 5. Tentu saja, ini akan berfungsi dengan sebagian besar tag yang Anda pilih.

Contoh:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

Meskipun ini bukan solusi yang sempurna, karena tidak ada makna semantik yang didefinisikan dengan baik untuk data-*atribut, ini setidaknya akan memungkinkan Anda untuk memberikan informasi tambahan kepada mereka yang tahu arti data-typeatribut Anda .