Cara Gampang Mengatasi Error Validasi Html5 Dan Css3 Di W3c
Beberapa hari yang kemudian saya cek iseng-iseng cek blog ini di W3C Validator. Ternyata balasannya ada beberapa error yang muncul. Error yang muncul dalam validasi ini juga terdiri dari banyak sekali macam, saya tidak dapat menyebutkannya satu persatu. Silahkan kau tes sendiri blog Anda dan lihat hasilnya. Namun jangan khawatr, panduan untuk mengatasi error tersebut rata-rata sudah ada semua di internet. Anda hanya perlu sabar untuk mempelajarinya.
Apakah validasi HTML5 dan CSS3 pada blog mempengaruhi SEO?
Hal ini juga menjadi perdebatan, banyak pihak yang berspekulasi berbeda. Namun menurut spekulasi itu saya lebih oke bahwa validasi ini tidak terlalu penting, alasannya ialah banyak blog yang tidak valid juga dapat page one di google. Silahkan Anda cek sendiri blog yang berada di halaman pertama google, apakah struktur template mereka valid? Tentu tidak!
Terus apa gunanya kita repot-repot validasi, kalau itu tidak kuat terhadap rangking blog?
Memang validasi itu bukanlah suatu hal yang penting, namun bukan berarti banyak error itu bagus. Memiliki struktur arahan yang higienis atau sedikit error sudah niscaya itu ialah hal yang baik. Tujuan kita melaksanakan validasi ialah untuk menghindari kesalahan yang mungkin tidak kita sadari sebagai pemilik blog.
Baik itu duduk masalah penggunaan, aksesibilitas, keamanan dll sehingga mengakibatan kinerja blog yang jelek atau bahkan menjadikan script kita tidak dapat berjalan sempurna. Itu lah tujuannya validasi tersebut. Jika Anda sebagai pemilik blog merasa tidak ada masalah, namun di w3c ini masih mengalami error, cukup abaikan saja. Untuk mengetesnya silahkan pergi ke halaman W3C validator kemudian jangan lupa klik More Option, centang bab Show Source.
Apa saja error yang biasa muncul di validasi W3C ini dan bagaimana cara mengatasinya?
Seperti yang saya katakan sebelumnya bahwa error yang muncul pada setiap blog itu cukup bervariasi. Namun bahwasanya semua error dalam W3C niscaya selalu ada dokumentasinya, silahkan Anda cari di internet kalau error tersebut tidak saya tuliskan disini. Berikut beberapa teladan peringatan dan error dalam validasi di W3C.
1. Self-closing syntax (/>) used on a non-void HTML element. Ignoring the slash and treating as a start tag. Biasanya error ini terjadi pada arahan <div style='clear: both;'/>. Solusinya sangat mudah, silahkan hapus tanda slash (/) tersebut.
2. The type attribute for the style element is not needed and should be omitted. Error tersebut terkadi alasannya ialah arahan ini <style type='text/css'>. Pada bahasa yang gres ia tidak memakai atribute tipe lagi. Karena sudah niscaya kalau tag <style> itu css bukan arahan yang lain. Sehingga untuk mengatasinya ubah arahan <style type='text/css'> menjadi <style>. Namun perlu diperhatikan jangan hapus arahan <style type='text/css'> yang ada pada b:skin alasannya ialah template Anda niscaya akan berantakan. Solusinya kalau kau tidak mau oprek template, biarkan saja alasannya ialah ini hanya warning dan bukan error.
3. The type attribute is unnecessary for JavaScript resources. Biasanya terjadi pada arahan <script type='text/javascript'>. Penjelasannya sama dengan arahan <style> di atas. Sehingga untuk mengatasinya silahkan hapus semua arahan type='text/javascript' menjadi <script> saja.
4. The navigation role is unnecessary for element nav. Biasa terjadi kalau template memakai atribut rule='' menyerupai <nav class='navi' id='navi' role='navigation'>. Solusinya hapus arahan role='navigation' tersebut.
5. Attribute href not allowed on element style at this point. Silahkan ubah href menjadi data-href. Jangan lupa cek balasannya untuk memastikan arahan template berjalan sempurna.
6. Bad value print, handheld for attribute media on element style: Deprecated media type handheld. Artinya nilai handheld sudah ditinggalkan dan tidak digunakan lagi pada bahasa yang baru. Hapus arahan tersebut maka error akan hilang.
7. A document must not include both a meta element with an http-equiv attribute whose value is content-type, and a meta element with a charset attribute. Error ini hampir semua template mengalaminya yaitu pada arahan <meta http-equiv="content-type" content="text/html; charset=UTF-8">. Ini ialah penulisan dalam HTML 4.01, sedangkan pada HTML 5 format penulisannya menjadi lebih ringkas yaitu <meta charset="UTF-8">. Entah kenapa banyak template masih memakai meta tag tersebut.
8. Error End tag path did not match the name of the current open element (svg) atau Error Stray end tag path. Error ini biasa terjadi ketika kita memasang ikon svg di widget. Misalnya menyerupai yang saya alami, error tersebut muncul ketika saya mengganti ikon widget newsletter font awesome ke ikon svg.
Ternyata supaya valid html 5 kita dihentikan eksklusif menaruh ikon svg diwidget. Kita harus memasang ikon svg sebagai background-image. Contohnya menyerupai berikut:
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M17,11A5,5 0 0,0 12,6A5,5 0 0,0 7,11V18H17V11M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23666' /%3E%3C/svg%3E")Untuk pemasangannya ditemplate kita memanfaatkan fungsi class maupun id sebagai arahan pemanggil css tersebut. Berikut contohnya:
#subscribe-limit{background-color:#f9f9f9;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M17,11A5,5 0 0,0 12,6A5,5 0 0,0 7,11V18H17V11M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23666' /%3E%3C/svg%3E");background-size:80px 80px;background-repeat:no-repeat;background-position:center;}Jika arahan cssnya menyerupai itu, maka arahan pemanggilnya yang kita pasang diwidget adalah:
<div id='subscribe-limit'> .......kode widget...... </div>9. Error Duplicat ID Error ini teradi alasannya ialah ada ID yang sama di template. Namanya juga ID berarti harus unik sehingga dihentikan sama. Untuk mengatasinya silahkan lihat ID yang sama tersebut di html template kamu. Coba perhatikan kodenya, biasanya ID yang sama itu terjadi dihalama homepage saja. Jika kau memang memakai css yang ada di ID secara berulang, mending gunakan atribut class. Contohnya menyerupai ini.
CSS #cloudbullet { background-color: #85c0bf; height: 22px; left: 13px; margin-top: 7px; position: relative; top: 63px; width: 20px; HTML
<div id="container1-title" class=""> <h2>Cloud/Hosting</h2> </div> <div id="cloudbullet" class=""> </div> <div id="cloudbullet" class=""> </div> <div id="cloudbullet" class=""> </div> <div id="cloudbullet" class=""> </div> <div id="cloudbullet" class=""> </div> <div id="cloudbullet" class=""> </div> Kode diatas ialah teladan arahan yang terjadi duplicate ID dalam template. Untuk mengatasinya jangan gunakan ID yang sama berulang, kalau ingin menggunakannya secara berulang gunakan saja atribut class sehingga arahan tersebut menjadi menyerupai ini:
CSS .cloudbullet { background-color: #85c0bf; height: 22px; left: 13px; margin-top: 7px; position: relative; top: 63px; width: 20px; } <div id="container1-title"> <h2>Cloud/Hosting</h2> </div> <div class="cloudbullet"> </div> <div class="cloudbullet"> </div> <div class="cloudbullet"> </div> <div class="cloudbullet"> </div> <div class="cloudbullet"> </div> <div class="cloudbullet"> </div> Error diatas hanyalah contoh, masih banyak lagi error lainnya yang belum saya sebutkan disini. Nanti kalau ada kesempatan ngoprek template lagi bakalan saya update. Intinya semua rujukan sudah ada, jangan takut untuk mencoba. Karena semua hal perlu belajar! Sekian cara mengatasi error validasi pada w3c semoga bermanfaat.
*Update 12 Juni 2019 Sumber https://www.tipsdantrik.web.id/