Mengapa CSS bekerja dengan elemen palsu?

Di kelas saya, saya bermain-main dan menemukan bahwa CSS bekerja dengan elemen yang dibuat-buat.

Contoh:

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

Ketika profesor saya pertama kali melihat saya menggunakan ini, dia sedikit terkejut bahwa unsur-unsur make-up bekerja dan merekomendasikan saya hanya mengubah semua elemen make-up saya ke paragraf dengan ID.

Mengapa profesor saya tidak ingin saya menggunakan elemen buatan? Mereka bekerja secara efektif.

Juga, mengapa dia tidak tahu bahwa elemen-elemen buatan ada dan bekerja dengan CSS. Apakah itu tidak biasa?

Mengapa CSS bekerja dengan elemen palsu?

(Sebagian besar) peramban dirancang agar (pada tingkat tertentu) maju kompatibel dengan penambahan HTML yang akan datang. Elemen yang tidak dikenal diuraikan ke dalam DOM, tetapi tidak memiliki semantik atau rendering default khusus yang terkait dengannya.

Ketika elemen baru ditambahkan ke spesifikasi, kadang-kadang CSS, JavaScript dan ARIA dapat digunakan untuk menyediakan fungsionalitas yang sama di browser lama (dan elemen harus muncul di DOM agar bahasa tersebut dapat memanipulasi mereka untuk menambahkan fungsionalitas itu. ).

(Meskipun harus dicatat bahwa pekerjaan sedang dilakukan untuk menentukan cara untuk memperluas HTML dengan elemen khusus , tetapi pekerjaan ini masih dalam tahap awal pengembangan saat ini sehingga mungkin harus dihindari sampai jatuh tempo.)

Mengapa profesor saya tidak ingin saya menggunakan elemen buatan?

• Mereka tidak diizinkan oleh spesifikasi HTML
• Mereka mungkin bertentangan dengan elemen standar masa depan dengan nama yang sama
• Mungkin ada elemen HTML yang ada yang lebih cocok untuk tugas itu

Juga; mengapa dia tidak tahu bahwa elemen-elemen buatan ada dan bekerja dengan CSS. Apakah itu tidak biasa?

Iya. Orang tidak menggunakannya karena mereka memiliki masalah di atas.

TL; DR

• Tag khusus tidak valid dalam HTML. Ini dapat menyebabkan masalah rendering.
• Membuat pengembangan di masa depan lebih sulit karena kode tidak portabel.
• HTML yang valid menawarkan banyak manfaat seperti SEO, kecepatan, dan profesionalisme.

Jawaban panjang

Ada beberapa argumen bahwa kode dengan tag khusus lebih dapat digunakan.

Namun, itu mengarah ke HTML yang tidak valid. Yang tidak baik untuk situs Anda.

Titik Valid CSS / HTML | StackOverflow

• Google lebih suka jadi itu bagus untuk SEO.
• Itu membuat halaman web Anda lebih mungkin untuk bekerja di browser yang belum Anda uji.
• Itu membuat Anda terlihat lebih profesional (setidaknya untuk beberapa pengembang)
• Browser yang patuh dapat membuat [HTML yang lebih cepat lebih cepat]
• Ini menunjukkan banyak bug tidak jelas yang mungkin Anda lewatkan yang memengaruhi hal-hal yang mungkin belum Anda uji, misalnya kumpulan kode atau bahasa halaman.

Mengapa Memvalidasi | W3C

• Validasi sebagai alat debugging
• Validasi sebagai pemeriksaan kualitas bukti masa depan
• Validasi memudahkan perawatan
• Validasi membantu mengajarkan praktik yang baik
• Validasi adalah tanda profesionalisme

YADA (jawaban lain (berbeda))

Sunting: Silakan lihat komentar dari BoltClock di bawah ini mengenai tipe vs tag vs elemen. Saya biasanya tidak khawatir tentang semantik tetapi komentarnya sangat tepat dan informatif.

Meskipun sudah ada banyak balasan yang bagus, Anda mengindikasikan bahwa profesor Anda meminta Anda untuk mengirimkan pertanyaan ini sehingga tampaknya Anda (secara formal) ada di sekolah . Saya pikir saya akan menjelaskan sedikit lebih mendalam tentang tidak hanya CSS tetapi juga mekanisme browser web. Menurut Wikipedia , "CSS adalah bahasa style sheet yang digunakan untuk menggambarkan ... dokumen yang ditulis dalam sebuah bahasa markup." (Saya menambahkan penekanan pada "a") Perhatikan bahwa itu tidak mengatakan "ditulis dalam HTML" apalagi versi HTML tertentu. CSS dapat digunakan pada HTML, XHTML, XML, SGML, XAML, dll. Tentu saja, Anda membutuhkan sesuatu yang akan membuatmasing-masing tipe dokumen ini yang juga akan menerapkan gaya. Menurut definisi, CSS tidak tahu / mengerti / peduli dengan tag bahasa markup tertentu. Jadi, tag mungkin "tidak valid" sejauh menyangkut HTML, tetapi tidak ada konsep tag / elemen / tipe "valid" di CSS.

Browser visual modern bukanlah program monolitik. Mereka adalah campuran dari berbagai "mesin" yang memiliki pekerjaan spesifik untuk dilakukan. Pada minimal saya bisa memikirkan 3 mesin, mesin rendering, mesin CSS, dan mesin javascript / VM. Tidak yakin apakah parser adalah bagian dari mesin render (atau sebaliknya) atau jika itu adalah mesin yang terpisah, tetapi Anda mendapatkan idenya.

Apakah peramban visual atau tidak ( orang lain telah membahas fakta bahwa pembaca layar mungkin memiliki tantangan lain dalam berurusan dengan tag tidak valid ) menerapkan format tergantung pada apakah parser meninggalkan tag "tidak valid" dalam dokumen dan kemudian apakah mesin rendering menerapkan gaya ke tag itu. Karena akan membuatnya lebih sulit untuk dikembangkan / dipelihara, mesin CSS tidak ditulis untuk memahami bahwa "Ini adalah dokumen HTML jadi di sini adalah daftar tag / elemen / tipe yang valid." Mesin CSS cukup menemukan tag / elemen / jenis dan kemudian memberi tahu mesin rendering, "Berikut adalah gaya yang harus Anda terapkan." Apakah mesin rendering memutuskan untuk benar-benar menerapkan gaya sudah terserah.

Berikut ini adalah cara mudah untuk memikirkan aliran dasar dari engine ke engine: parser -> CSS -> rendering. Pada kenyataannya itu jauh lebih berbelit-belit tetapi ini cukup baik untuk pemula.

Jawaban ini sudah terlalu lama jadi saya akan berakhir di sana.

Elemen yang tidak dikenal diperlakukan sebagai divoleh browser modern. Itu sebabnya mereka bekerja. Ini adalah bagian dari standar HTML5 yang akan datang yang memperkenalkan struktur modular di mana elemen baru dapat ditambahkan.

Di browser yang lebih lama (saya pikir IE7-) Anda dapat menerapkan trik Javascript setelah itu mereka akan berfungsi juga.

Ini adalah pertanyaan terkait yang saya temukan ketika mencari contoh.

Ini pertanyaan tentang perbaikan Javascript . Ternyata memang IE7 yang tidak mendukung elemen-elemen ini di luar kotak.

Juga; mengapa dia tidak tahu bahwa tag buatan ada dan bekerja dengan CSS. Apakah itu tidak biasa?

Ya cukup. Tetapi terutama: mereka tidak melayani tujuan tambahan. Dan mereka baru mengenal HTML5. Dalam versi HTML yang lebih lama, tag yang tidak dikenal tidak valid.

Juga, guru tampaknya memiliki kesenjangan dalam pengetahuan mereka, kadang-kadang. Ini mungkin disebabkan oleh fakta bahwa mereka perlu mengajari siswa dasar-dasar tentang subjek yang diberikan, dan itu tidak benar-benar bermanfaat untuk mengetahui semua seluk beluk dan benar-benar terkini. Saya pernah mendapat penahanan karena seorang guru mengira saya memprogram virus, hanya karena saya bisa membuat komputer memutar musik menggunakan playperintah di GWBasic. (Kisah nyata, dan ya, dulu). Tapi apa pun alasannya, saya pikir saran untuk tidak menggunakan elemen custome adalah suara.

Sebenarnya Anda dapat menggunakan elemen khusus. Berikut adalah spesifikasi W3C tentang hal ini:

http://w3c.github.io/webcomponents/spec/custom/

Dan berikut ini adalah tutorial yang menjelaskan cara menggunakannya:

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

Seperti yang ditunjukkan oleh @ Quentin: ini adalah spesifikasi rancangan pada hari-hari awal pengembangan, dan itu memberlakukan pembatasan pada apa nama elemen dapat.

Ada beberapa hal tentang jawaban lain yang hanya diutarakan dengan buruk atau mungkin sedikit salah.

FALSE (ish): Elemen HTML non-standar "tidak diizinkan", "ilegal", atau "tidak valid".

Belum tentu. Mereka "tidak sesuai" . Apa bedanya? Sesuatu dapat "tidak sesuai" dan masih "diizinkan". W3C tidak akan mengirim polisi HTML ke rumah Anda dan membawa Anda pergi.

W3C meninggalkan hal-hal seperti ini karena suatu alasan. Kesesuaian dan spesifikasi ditentukan oleh suatu komunitas. Jika Anda memiliki komunitas yang lebih kecil yang mengonsumsi HTML untuk tujuan yang lebih spesifik dan mereka semua sepakat tentang beberapa Elemen baru yang mereka perlukan untuk mempermudah, mereka dapat memiliki apa yang W3C sebut sebagai "spesifikasi lain yang berlaku" . (Ini jelas lebih dari penyederhanaan, jelas, tetapi Anda mendapatkan ide)

Yang mengatakan, validator ketat akan menyatakan elemen non-standar Anda menjadi "tidak valid". tapi itu karena tugas validator adalah memastikan kesesuaian dengan spesifikasi apa pun yang divalidasi, bukan untuk memastikan "legalitas" untuk browser atau untuk digunakan .

FALSE (ish): Elemen HTML non-standar akan menghasilkan masalah rendering

Mungkin, tetapi tidak mungkin. (ganti "akan" dengan "mungkin") Satu-satunya cara ini menghasilkan masalah rendering adalah jika elemen kustom Anda bertentangan dengan spesifikasi lain, seperti perubahan pada spesifikasi HTML atau spesifikasi lain yang dihormati dalam sistem yang sama (seperti SVG, Matematika, atau sesuatu yang khusus).

Faktanya, alasan CSS dapat membuat tag non-standar adalah karena spesifikasi HTML dengan jelas menyatakan bahwa:

Agen pengguna harus memperlakukan elemen dan atribut yang tidak mereka pahami sebagai netral semantik; meninggalkan mereka di DOM (untuk prosesor DOM), dan menata mereka sesuai dengan CSS (untuk prosesor CSS), tetapi tidak menyimpulkan makna dari mereka

Catatan: jika Anda ingin menggunakan tag khusus, ingat saja perubahan pada spesifikasi HTML di lain waktu dapat meledakkan gaya Anda, jadi bersiaplah. Namun, sangat tidak mungkin W3C akan mengimplementasikan <imsocool>tag.

Tag dan JavaScript yang tidak standar (via DOM)

Alasan Anda dapat mengakses dan mengubah elemen khusus menggunakan JavaScript adalah karena spesifikasi bahkan berbicara tentang bagaimana mereka harus ditangani dalam DOM , yang merupakan API (sangat mengerikan) yang memungkinkan Anda untuk memanipulasi elemen pada halaman Anda.

Antarmuka HTMLUnknownElement harus digunakan untuk elemen HTML yang tidak ditentukan oleh spesifikasi ini (atau spesifikasi lain yang berlaku).

TL; DR: Sesuai dengan spesifikasi dilakukan untuk tujuan komunikasi dan keselamatan. Ketidaksesuaian masih diizinkan oleh segalanya kecuali validator , yang tujuan utamanya adalah untuk menegakkan kepatuhan, tetapi yang penggunaannya adalah opsional.

Sebagai contoh:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(Saya yakin ini akan menarik api, tapi ada 2 sen saya)

Menurut spesifikasi:

CSS

Sebuah pemilih jenis adalah nama sejenis dokumen elemen bahasa tertulis menggunakan sintaks dari nama-nama yang memenuhi syarat CSS

Saya pikir ini disebut pemilih elemen , tetapi ternyata itu sebenarnya adalah pemilih tipe . Spek selanjutnya berbicara tentang CSS qualified namesyang tidak membatasi apa nama sebenarnya. Artinya, selama pemilih jenis cocok dengan sintaks nama yang memenuhi syarat CSS, maka secara teknis itu adalah CSS yang benar dan akan cocok dengan elemen dalam dokumen. Tidak ada batasan khusus CSS pada elemen yang tidak ada dalam spesifikasi tertentu - HTML atau lainnya.

HTML

Tidak ada batasan resmi untuk memasukkan tag apa pun dalam dokumen yang Anda inginkan. Namun, dokumentasi itu mengatakan

Penulis tidak boleh menggunakan elemen, atribut, atau nilai atribut untuk tujuan selain tujuan semantik yang dimaksudkan, karena hal itu mencegah perangkat lunak dari memproses halaman dengan benar.

Dan kemudian dikatakan

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 mendatang.

Saya tidak yakin secara spesifik di mana atau apakah spesifikasi mengatakan bahwa elemen tidak dikenal diizinkan , tetapi ia berbicara tentang antarmuka HTMLUnknownElement untuk elemen yang tidak dikenal. Beberapa browser bahkan mungkin tidak mengenali elemen yang ada dalam spec saat ini (IE8 terlintas dalam pikiran).

Namun, ada konsep untuk elemen khusus , tapi saya ragu ini sudah diterapkan di mana saja.

Ini dimungkinkan dengan html5 tetapi Anda harus mempertimbangkan browser lama.

Jika Anda memutuskan untuk menggunakannya, pastikan untuk KOMENTAR html Anda !! Beberapa orang mungkin mengalami kesulitan mencari tahu apa itu sehingga komentar dapat menghemat banyak waktu.

Sesuatu seperti ini,

<!-- Custom tags in use, refer to their CSS for aid -->

Ketika Anda membuat tag / elemen kustom Anda sendiri, browser lama tidak akan tahu apa itu seperti elemen html5 seperti nav/ section.

Jika Anda tertarik dengan konsep ini maka saya sarankan untuk melakukannya dengan cara yang benar.

Mulai

Elemen Kustom memungkinkan pengembang web untuk menentukan tipe elemen HTML baru. Spec adalah salah satu dari beberapa primitif API baru yang mendarat di bawah payung Komponen Web, tetapi sangat mungkin yang paling penting. Komponen Web tidak ada tanpa fitur yang dikunci oleh elemen khusus:

Tetapkan elemen HTML / DOM baru. Buat elemen yang membentang dari elemen lain. Secara logis, kumpulkan fungsionalitas khusus menjadi satu tag. Perpanjang API elemen DOM yang ada

Ada banyak hal yang dapat Anda lakukan dengannya dan itu membuat skrip Anda indah karena artikel ini suka menuliskannya. Elemen Kustom mendefinisikan elemen baru dalam HTML .

Jadi mari kita rekap,

Pro

• Sangat elegan dan mudah dibaca.

• Sangat menyenangkan untuk tidak melihat begitu banyak divs. : p

• Memungkinkan rasa unik pada kode

Cons

• Dukungan browser yang lebih lama adalah hal yang kuat untuk dipertimbangkan.

• Pengembang lain mungkin tidak tahu apa yang harus dilakukan jika mereka tidak tahu tentang tag khusus. (Jelaskan kepada mereka atau tambahkan komentar untuk memberi tahu mereka)

• Terakhir satu hal yang perlu dipertimbangkan, tetapi saya tidak yakin, adalah elemen blok dan inline. Dengan menggunakan tag khusus Anda akhirnya akan menulis lebih banyak css karena tag khusus tidak akan memiliki sisi default untuk itu.

Pilihan sepenuhnya terserah Anda dan Anda harus mendasarkannya pada apa yang diminta proyek.

Perbarui 1/2/2014

Ini adalah artikel yang sangat membantu yang saya temukan dan saya pikir akan saya bagikan, Elemen Kustom .

Pelajari teknologi Mengapa Elemen Kustom? Elemen Kustom memungkinkan penulis menentukan elemen mereka sendiri. Penulis mengaitkan kode JavaScript dengan nama tag kustom, dan kemudian menggunakan nama tag kustom itu seperti yang mereka lakukan pada tag standar apa pun.

Misalnya, setelah mendaftarkan jenis tombol khusus yang disebut tombol super, gunakan tombol super seperti ini:

Elemen khusus masih merupakan elemen. Kita dapat membuat, menggunakan, memanipulasi, dan menyusunnya semudah standar atau hari ini.

Ini sepertinya perpustakaan yang sangat bagus untuk digunakan, tetapi saya perhatikan itu tidak melewati status Build Windows. Ini juga merupakan pra-alfa yang saya percayai sehingga saya akan mengawasi hal ini sementara itu berkembang.

Kenapa dia tidak ingin Anda menggunakannya? Mereka tidak umum atau bagian dari standar HTML5. Secara teknis, mereka tidak diizinkan. Mereka adalah peretasan.

Saya sendiri menyukai mereka. Anda mungkin tertarik pada XHTML5. Ini memungkinkan Anda untuk menentukan tag Anda sendiri dan menggunakannya sebagai bagian dari standar.

Juga, seperti yang ditunjukkan orang lain, mereka tidak valid dan karenanya tidak portabel.

Kenapa dia tidak tahu kalau mereka ada? Saya tidak tahu, kecuali bahwa itu tidak umum. Mungkin dia tidak sadar bahwa Anda bisa melakukannya.

Tag buatan hampir tidak pernah digunakan, karena tidak mungkin mereka akan bekerja dengan andal di setiap browser saat ini, dan setiap browser di masa depan.

Peramban harus mengurai kode HTML menjadi elemen yang diketahuinya, agar tag yang dibuat akan diubah menjadi sesuatu yang lain agar sesuai dengan model objek dokumen (DOM). Karena standar web tidak mencakup cara menangani semua yang ada di luar standar, browser web cenderung menangani kode yang tidak standar dengan cara yang berbeda.

Pengembangan web cukup rumit dengan sekelompok browser yang berbeda yang memiliki kebiasaan sendiri, tanpa menambahkan elemen ketidakpastian lainnya. Taruhan terbaik untuk tetap dengan hal-hal yang sebenarnya ada dalam standar, itulah yang coba diikuti oleh vendor browser, sehingga memiliki peluang terbaik untuk benar-benar berfungsi.

Saya pikir tag buatan hanya berpotensi lebih membingungkan atau tidak jelas daripada p's dengan ID (beberapa blok teks umumnya). Kita semua tahu bahwa ap dengan ID adalah paragraf, tetapi siapa yang tahu untuk apa tag buatan itu dibuat? Setidaknya itu yang saya pikirkan. :) Oleh karena itu ini lebih merupakan masalah gaya / kejelasan daripada salah satu fungsi.

Yang lain telah membuat poin bagus tetapi perlu dicatat bahwa jika Anda melihat kerangka kerja seperti AngularJS , ada kasus yang sangat valid untuk elemen dan atribut khusus. Ini tidak hanya memberikan makna semantik yang lebih baik kepada xml, tetapi mereka juga dapat memberikan perilaku, tampilan dan nuansa untuk halaman web.

CSS adalah bahasa style sheet yang dapat digunakan untuk menyajikan dokumen XML, tidak hanya (X) dokumen HTML. Cuplikan Anda dengan tag yang dibuat bisa menjadi bagian dari dokumen XML yang sah; itu akan menjadi satu jika Anda melampirkannya dalam elemen root tunggal. Mungkin Anda sudah memiliki <html> ...</html>sekitar itu? Setiap browser saat ini dapat menampilkan dokumen XML.

Tentu saja itu bukan dokumen XML yang sangat baik, tidak memiliki tata bahasa dan deklarasi XML. Jika Anda menggunakan tajuk deklarasi HTML sebagai gantinya (dan mungkin konfigurasi server yang mengirim tipe mime yang benar) itu bukan HTML yang ilegal.

(X) HTML memiliki keunggulan dibandingkan XML biasa karena elemen memiliki makna semantik yang berguna dalam konteks presentasi halaman web. Alat dapat bekerja dengan semantik ini, pengembang lain tahu artinya, lebih sedikit kesalahan cenderung dan lebih baik untuk dibaca.

Tetapi dalam konteks lain lebih baik menggunakan CSS dengan XML dan / atau XSLT untuk melakukan presentasi. Ini yang kamu lakukan. Karena ini bukan tugas Anda, Anda tidak tahu apa yang Anda lakukan, dan HTML / CSS adalah cara yang lebih baik untuk menghabiskan sebagian besar waktu yang harus Anda tempuh dalam skenario Anda.

Anda harus menambahkan header (X) HTML ke dokumen Anda sehingga alat dapat memberi Anda pesan kesalahan yang bermakna.

... Saya hanya mengubah semua tag saya menjadi paragraf dengan ID.

Saya sebenarnya mempermasalahkan sarannya tentang bagaimana melakukannya dengan benar.

1. Sebuah <p>tag adalah untuk paragraf. Saya melihat orang menggunakannya sepanjang waktu alih-alih div - hanya untuk tujuan jarak atau karena tampaknya lebih lembut. Jika ini bukan paragraf, jangan gunakan.

2. Anda tidak perlu atau ingin menempelkan ID pada segalanya kecuali Anda harus menargetkannya secara spesifik (misalnya dengan Javascript). Gunakan kelas atau hanya sebuah straight-up div.

Sejak awal, CSS dirancang untuk menjadi markup agnostik sehingga dapat digunakan dengan bahasa markup yang menghasilkan struktur DOM yang mirip pohon (misalnya SVG). Tag apa pun yang mematuhiname token produksi benar-benar valid dalam CSS. Jadi pertanyaan Anda lebih tentang HTML daripada CSS itu sendiri.

Elemen dengan tag khusus didukung oleh spesifikasi HTML5. HTML5 membakukan cara elemen-elemen yang tidak diketahui harus diuraikan dalam DOM. Jadi HTML5 adalah spesifikasi HTML pertama yang memungkinkan elemen khusus berbicara dengan tegas. Anda hanya perlu menggunakan DOCTYPE HTML5 <!DOCTYPE html>dalam dokumen Anda.

Pada nama tag kustom sendiri ...

Dokumen ini http://www.w3.org/TR/custom-elements/ merekomendasikan tag khusus yang Anda pilih mengandung setidaknya satu simbol '-' (tanda hubung). Dengan cara ini mereka tidak akan bertentangan dengan elemen HTML di masa depan. Karena itu, Anda sebaiknya mengubah dokumen Anda menjadi seperti ini:

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body> 

^{Rupanya tidak ada yang menyebutkannya, jadi saya akan.}

Ini adalah produk sampingan dari perang browser .

Kembali pada 1990-an ketika Internet pertama kali mulai menjadi arus utama, persaingan meningkat di pasar browser. Agar tetap kompetitif dan menarik pengguna, beberapa peramban (terutama Internet Explorer) mencoba membantu dan “ramah pengguna” dengan mencoba mencari tahu apa yang dimaksud perancang laman dan dengan demikian memungkinkan markup yang tidak benar (misalnya, <b><i>foobar</b></i>akan dengan benar diterjemahkan sebagai huruf tebal) huruf miring).

Ini masuk akal sampai batas tertentu karena jika satu browser terus mengeluh tentang kesalahan sintaksis sementara yang lain memakan apa pun yang Anda lemparkan dan mengeluarkan hasil (lebih atau kurang) yang benar, maka orang secara alami akan berbondong-bondong ke yang terakhir.

Sementara banyak yang mengira perang browser sudah berakhir, perang baru antara vendor browser telah kembali dalam beberapa tahun terakhir sejak Chrome dirilis, Apple mulai tumbuh lagi dan mendorong Safari, dan IE kehilangan dominasinya. (Anda bisa menyebutnya "perang dingin" karena adanya kerja sama yang dirasakan dan dukungan standar oleh vendor browser.) Oleh karena itu, tidak mengherankan bahwa bahkan browser kontemporer yang konon sesuai dengan standar web benar-benar mencoba untuk menjadi "pintar" dan memungkinkan perilaku melanggar standar seperti ini untuk mencoba mendapatkan keuntungan seperti sebelumnya.

Sayangnya, perilaku permisif ini menyebabkan pertumbuhan besar-besaran ( beberapa bahkan mungkin mengatakan kanker) pada laman web yang ditandai dengan buruk. Karena IE adalah peramban yang paling lunak dan populer, dan karena Microsoft terus menerus melanggar standar, IE menjadi terkenal karena mendorong dan mempromosikan desain yang buruk dan menyebarkan dan melestarikan halaman yang rusak.

Anda mungkin bisa lolos menggunakan kebiasaan aneh dan eksploitasi seperti itu di beberapa browser untuk saat ini, tetapi selain dari teka-teki atau permainan sesekali, Anda harus selalu berpegang pada standar web saat membuat halaman web dan situs untuk memastikan mereka ditampilkan dengan benar dan hindari menjadi rusak (mungkin diabaikan sama sekali) dengan pembaruan browser.

Meskipun browser umumnya akan menghubungkan CSS ke tag HTML terlepas dari apakah itu valid atau tidak, Anda harus TIDAK melakukan hal ini.

Secara teknis tidak ada yang salah dengan ini dari perspektif CSS. Namun, menggunakan tag buatan adalah sesuatu yang TIDAK PERNAH Anda lakukan dalam HTML.

HTML adalah bahasa markup, yang berarti bahwa setiap tag sesuai dengan jenis informasi tertentu.

Tag buatan Anda tidak sesuai dengan jenis informasi apa pun. Ini akan menimbulkan masalah dari perayap web, seperti Google.

Baca informasi lebih lanjut tentang pentingnya markup yang benar .

Edit

Divs merujuk pada grup dari beberapa elemen terkait, yang dimaksudkan untuk ditampilkan dalam bentuk blok dan dapat dimanipulasi.

Rentang mengacu pada elemen yang harus ditata berbeda dari konteks mereka saat ini dan dimaksudkan untuk ditampilkan secara inline, bukan sebagai blok. Contohnya adalah jika beberapa kata dalam sebuah kalimat harus semuanya huruf besar.

Tag khusus tidak berkorelasi dengan standar apa pun dan karenanya span / div harus digunakan dengan properti kelas / ID sebagai gantinya.

Ada pengecualian yang sangat spesifik untuk ini, seperti Angular JS

Meskipun CSS memiliki sesuatu yang disebut "tag selector," sebenarnya tidak tahu apa itu tag. Tersisa untuk didefinisikan dalam bahasa dokumen. CSS dirancang untuk digunakan tidak hanya dengan HTML, tetapi juga dengan XML, di mana (dengan asumsi Anda tidak menggunakan DTD atau skema validasi lainnya) tag dapat berupa apa saja. Anda juga dapat menggunakannya dengan bahasa lain, meskipun Anda harus membuat semantik sendiri untuk hal-hal seperti "tag" dan "atribut".

Browser umumnya menerapkan CSS ke tag yang tidak dikenal dalam HTML, karena ini dianggap lebih baik daripada benar-benar rusak: setidaknya mereka dapat menampilkan sesuatu. Tapi itu praktik yang sangat buruk untuk menggunakan tag "palsu" dengan sengaja. Salah satu alasan untuk ini adalah bahwa tag baru dapat didefinisikan dari waktu ke waktu, dan jika satu didefinisikan yang terlihat seperti tag palsu Anda tetapi tidak bekerja dengan cara yang sama, yang dapat menyebabkan masalah dengan situs Anda di browser baru.

Mengapa CSS bekerja dengan elemen palsu?Karena itu tidak menyakiti siapa pun karena Anda tidak seharusnya menggunakannya.

Mengapa profesor saya tidak ingin saya menggunakan elemen buatan?Karena jika elemen tersebut ditentukan oleh spesifikasi di masa mendatang, elemen Anda akan memiliki perilaku yang tidak dapat diprediksi.

Juga, mengapa dia tidak tahu bahwa elemen-elemen buatan ada dan bekerja dengan CSS. Apakah itu tidak biasa? Karena dia, seperti kebanyakan pengembang web lainnya, memahami bahwa kita tidak boleh menggunakan hal-hal yang mungkin akan pecah secara acak di masa depan.