Cara memvalidasi tag Style dalam postingan

Cara memvalidasi tag Style dalam postingan

  22 February    Andika

---

Jika kamu menerapkan acuan Validasi HTML di blog, mungkin kamu akan sangat berhati-hati dan cenderung menghindari penggunaan tag <style> dalam postingan. Benarkan?

Jika kita menulis dalam metode penulisan umum seperti <style type="text/css">Kode CSS</style> pada postingan, maka saat validasi HTML akan ada tampilan peringatan yang kurang lebih seperti ini.

Error Line ..., Column ...: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

<style type="text/css">

Contexts in which element style may be used:
If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent.
Content model for element div:
Flow content.

Sebenarnya peringatan seperti ini tidak akan muncul jika tag style tidak berada pada konten di halaman utama. Artinya, alat Validasi tidak akan mengendus tag style yang di gunakan pada postingan-postingan lama kecuali postingan tersebut di letakan di halaman depan atau menggunakan opsi validasi yang lebih mendalam saat menggunakan alat validasinya.

Contohnya saja laman uji coba seperti Screenshot di bawah ini,

Gambar di atas adalah hasil validasi saat menggunakan metode penulisan seperti <style type="text/css">Kode CSS</style>. Meskipun sudah di tambahkan attribut seperti scoped dengan penulisan seperti <style type="text/css" scoped>, hasil validasinya akan tetap error.

Solusinya adalah, buat ID yang unik untuk setiap tag style yang di sisipkan ke dalam postingan.

Contoh penulisannya,

<div id="tulis ID yang unik di sini">
<style type="text/css" scoped>
Tulis kode CSS yang ingin di tampilkan di sini 
</style>
Tulis kode HTML yang ingin di tampilkan di sini
</div>

Dan hasilnya,

Tidak di temukan lagi pesan error pada tag stylenya!!