Cara Mudah Mengatasi Error Validasi HTML5 dan CSS3 di W3C
Beberapa hari yang lalu saya cek iseng-iseng cek blog ini di W3C Validator. Ternyata hasilnya ada beberapa error yang muncul. Error yang muncul dalam validasi ini juga terdiri dari berbagai macam, saya tidak bisa menyebutkannya satu persatu. Silahkan kamu 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 berdasarkan spekulasi itu saya lebih setuju bahwa validasi ini tidak terlalu penting, karena banyak blog yang tidak valid juga bisa 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 berpengaruh terhadap rangking blog?
Memang validasi itu bukanlah suatu hal yang penting, namun bukan berarti banyak error itu bagus. Memiliki struktur kode yang bersih atau sedikit error sudah pasti itu adalah hal yang baik. Tujuan kita melakukan validasi adalah untuk menghindari kesalahan yang mungkin tidak kita sadari sebagai pemilik blog.
Baik itu masalah penggunaan, aksesibilitas, keamanan dll sehingga mengakibatan kinerja blog yang buruk atau bahkan menyebabkan script kita tidak bisa 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 bagian 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 sebenarnya semua error dalam W3C pasti selalu ada dokumentasinya, silahkan Anda cari di internet jika error tersebut tidak saya tuliskan disini. Berikut beberapa contoh 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 kode <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 karena kode ini <style type='text/css'>. Pada bahasa yang baru dia tidak menggunakan atribute tipe lagi. Karena sudah pasti jika tag <style> itu css bukan kode yang lain. Sehingga untuk mengatasinya ubah kode <style type='text/css'> menjadi <style>. Namun perlu diperhatikan jangan hapus kode <style type='text/css'> yang ada pada b:skin karena template Anda pasti akan berantakan. Solusinya jika kamu tidak mau oprek template, biarkan saja karena ini hanya warning dan bukan error.
3. The type attribute is unnecessary for JavaScript resources. Biasanya terjadi pada kode <script type='text/javascript'>. Penjelasannya sama dengan kode <style> di atas. Sehingga untuk mengatasinya silahkan hapus semua kode type='text/javascript' menjadi <script> saja.
4. The navigation role is unnecessary for element nav. Biasa terjadi jika template menggunakan atribut rule='' seperti <nav class='navi' id='navi' role='navigation'>. Solusinya hapus kode role='navigation' tersebut.
5. Attribute href not allowed on element style at this point. Silahkan ubah href menjadi data-href. Jangan lupa cek hasilnya untuk memastikan kode 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 dipakai lagi pada bahasa yang baru. Hapus kode 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 kode <meta http-equiv="content-type" content="text/html; charset=UTF-8">. Ini adalah penulisan dalam HTML 4.01, sedangkan pada HTML 5 format penulisannya menjadi lebih ringkas yaitu <meta charset="UTF-8">. Entah kenapa banyak template masih menggunakan 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 saat kita memasang ikon svg di widget. Misalnya seperti yang saya alami, error tersebut muncul ketika saya mengganti ikon widget newsletter font awesome ke ikon svg.
Ternyata supaya valid html 5 kita tidak boleh langsung menaruh ikon svg diwidget. Kita harus memasang ikon svg sebagai background-image. Contohnya seperti 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 kode 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 kode cssnya seperti itu, maka kode pemanggilnya yang kita pasang diwidget adalah:
<div id='subscribe-limit'>
.......kode widget......
</div>9. Error Duplicat ID Error ini teradi karena ada ID yang sama di template. Namanya juga ID berarti harus unik sehingga tidak boleh 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 kamu memang menggunakan css yang ada di ID secara berulang, mending gunakan atribut class. Contohnya seperti 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 adalah contoh kode yang terjadi duplicate ID dalam template. Untuk mengatasinya jangan gunakan ID yang sama berulang, jika ingin menggunakannya secara berulang gunakan saja atribut class sehingga kode tersebut menjadi seperti 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 jika ada kesempatan ngoprek template lagi bakalan saya update. Intinya semua referensi sudah ada, jangan takut untuk mencoba. Karena semua hal perlu belajar! Sekian cara mengatasi error validasi pada w3c semoga bermanfaat.
*Update 12 Juni 2019