Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

Eror Validasi HTML5

Artikel ini dibuat sebagai kelanjutan dari artikel Validasi HTML/XHTML dan HTML5 Problogiz yang lalu, Kumpulan Eror Validasi HTML dan Solusinya. Tidak mungkin tentunya, membahas masalah error validasi yang begitu banyak hanya dalam satu posting artikel, kalau pun iya pasti akan tidak efisien. Memang sejak direkomendasikan W3C, kandidat html masa depan-HTML5, semakin banyak pelaku, pengembang website/blog yang lebih peduli mengenai HTML Semantic atau struktural element HTML5 yang baru.

Bagi pengguna bloggger/blogspot yang menggunakan template berbasis HTML5 banyak menemui kesalahan-kesalahan validasi mark-up HTML, jika di cek di Validator Test seperti W3C Validator. Ini karena memang blogspot belum sepenuhnya support HTML5, ini dapat Anda temui di comment/threaded comments blogger system, maupun eksternal CSS Reset Stylesheet Blogger juga menyumbangkan error di HTML5 Validasi. Pengguna blogspot boleh bersyukur sekarang ada pengganti System Commenting yang Valid HTML5 seperti Google Plus Commenting System (Komentar Google Plus), yang dapat Anda implementasikan di blog.

Bagi yang masih suka menggunakan sistem Komentar Blogger ( khususnya Threaded Comment Blogger) juga tidak perlu bingung lagi, karena fitur ini mungkin penyumbang kesalahan terbanyak, sekarang Anda dapat memasangnya fitur tersebut tanpa ada pesan kesalahan dari validator. Anda dapat melihat tutorialnya di Blog.Kangismet, tentang Blogger Threaded Comments Hack V.3, yang dapat diterapkan di blog Anda (khusus threaded comment bukan single).

Pada Kumpulan Eror Validasi HTML dan Solusinya Part 1 ada banyak pengunjung yang menanyakan atau memberi solusi pada eror-eror validasi HTML5 yang mereka temui. Kali di bagian dua, saya mencoba sharing beberapa solusi dari kesalahan markup atau semantik yang dididapat dari berbagai sumber seperti dari www.stackoverflow.com.

Kumpulan Eror Validasi HTML dan Solusinya Part 2

1. Error Threaded Commenting Blogger

Mungkin Anda pernah menemui kesalahan berikut jika mengaktifkan threaded komentar blogspot:
Bad value for attribute src on element iframe:
Must be non-empty. …t='410' id='comment-editor' name='comment-editor' src='' width='100%'>

Bad value 100% for attribute width on element iframe:Expected a digit but saw % instead.
…t='410' id='comment-editor' name='comment-editor' src='' width='100%'>

The allowtransparency attribute on the iframe element is obsolete.Use CSS instead. 
…t='410' id='comment-editor' name='comment-editor' src='' width='100%'>

The frameborder attribute on the iframe element is obsolete.Use CSS instead. 
…t='410' id='comment-editor' name='comment-editor' src='' width='100%'>

Contoh eror-eror diatas sebagian yang mungkin Anda temui, contoh diatas menunjukkan kesalahan ada di
id='comment-editor'
ini semua di fitur threaded komentar, kurang lebih seperti ini:

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' scrolling='no' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>

Solusinya:

allowtransparency='true', frameborder='0' scrolling='no' width='100%' style='display: none' src='' , atribut pada iframe sudah ditinggalkan di HTML5, jadi hapus semua kode-kode itu.

Jangan lupa pasang css berikut ditemplate:

iframe{ border:none; overflow:hidden } 
img{ border:none }

◉ Cari kode untuk comment-editor-src :

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Ganti semua dengan kode yang baru berikut:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/> </b:if>

Anda juga akan menemukan kesalahan seperti ini:

The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.
<a name='comment-form'></a>

Attribut name juga tidak valid di html5 (usang)

Solusinya:

◉ Ganti <a name='comment-form'></a> dengan yang baru ini:

<a href='#comment-form'>

sumber: http://blog.kangismet.net/2013/09/tips-membuat-halaman-posting-valid-html5.html


Sampai tahap ini validasi untuk sematik HTML sudah valid, namun belum dibagian script threaded-nya, kurang lebih sebagain contoh error di bagian ini:

Attribute kind not allowed on element div at this point.
 <div id='bc_0_29C' kind='c'><div id='bc_0_29CT'><div id='bc_0_28T' class='comme…

Attribute kind not allowed on element li at this point.
 … id='bc_0_5B' class='comment' kind='b'><div class='avatar-image-container'><im…

An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
…AAAAAAyI/nr3cnCjbw7A/s512-c/photo.jpg'></img></div><div id='c66438150893583827…

Attribute kind not allowed on element div at this point
…_0_5M' class='comment-header' kind='m'><cite class='user'><a rel='nofollow' hr… </div>

Semakin banyak komentar visitor maka semakin banyak pula eror semacam ini.
Untuk memperbaiki eror tersebut Anda bisa menerapkan hack threaded comment blogger valid html5 beserta style-nya, di tutorial Kang Ismet di alamat berikut:

http://blog.kangismet.net/2013/09/blogger-threaded-comments-hack-v3.html


Baik sobat, sementara cukup di Validasi HTML5 Threaded Comment Blogger, selanjutnya akan ada update-update baru untuk eror-eror yang lainnya di postingan ini.

Artikel Terkait Lainnya:
Click here for comments

16 komentar

Lengkap sudah Ilmu Validasi nya Sob, makasih sudah berbagi ya

REPLY

hehe...blum mas....masih banyak yg perlu diperbarui nih mengenai validai HTLM5
thanks:)

REPLY

Kalau saya alhamdulillah blog saya udah valid HTML5 untuk bagian homepage dan untuk halaman postingan masih ada yg belum valid utamanya pada kode2 image yang ada pada postingan tsb. Makasih atas informasinya sob

REPLY

iya memang perlu waktu dan kesabaran ya mas..untuk edit satu2 setiap postingan
thanks...:)

REPLY

selama ini masih banyak pertanyaan2 di blog saya tentang validasi HTML5. menurut saya pribadi asal mau memahami pesan error sebetulnya bisa terselesaikan, namun kembali lagi kepada keterbatasan.. dengan kumpulan error validasi ini banyak rekan blogger yang terpecahkan masalahnya.. mantaps

REPLY

iya benar Kang,...itu dia error validasi HTML5 sebenarnya juga baik untuk mengasah ketelitian dan kedispilinan menempatkan semantik yang benar....selama ini Blog.Kangismet banyak menyumbang ide, masukan bagi rekan blogger
terima kasih Kang:)

REPLY

ada satu hal yang tidak menjadi perhatian dari validasi ini yakni pada versi mobile ?m=1 dan ?m=1
Mungkin jika dibahas lagi.. artikel ini akan jauh lebih lengkap
cuman sekedar saran sob dari saya yg newbie ini :D

REPLY

Hi Agri......Anda benar sementara ini saya belum merambah dan mencoba test markup HTML divalidator untuk versi mobile ini, tapi jika maksud Anda dampak yang umum dari googlebot crawl versi mobile ?m=1 dan ?m=1, seperti duplicate description atau title, menurut saya mungkin bukan di kesalahan semantik ( validasinya ),....anyway saran Anda boleh juga untuk membahas hal itu lain waktu
thanks :)

REPLY

saya masih kesulitan untuk memperbaiki kesalahan atau error w3 validator untuk bagian Element style is missing required attribute scoped, ada solusinya mas?

REPLY

untuk missing att scoped, karena ada <style> element ( CSS styles) di body template, bisa berupa widget atau dalam template, solusinya biar valid HTML5 tambahkan attribute scoped, seperti <style scoped> atau <style type="text/css" scoped>, contohnya:

<style type="text/css" scoped>
....code CSS....
</style>

Jika masih ada pesan error dari W3C validator , tambahkan element <div>, seperti ini:
<div>
<style type="text/css" scoped>
...code CSS...
</style>
</div>


REPLY

mas saya masih bingung cara mengatasi Kesalahan saat mengurai XML, baris 3118, kolom 17: XML document structures must start and end within the same entity. itu gimana?,tolong solusinya !

REPLY

itu mungkin ada tag yg belum ditutup dengan benar atau strukur doc xml yg tidak benar, misalnya:
<a><b></a></b> atau quote yg kurang <a attr='x>
sayang kodenya ga ikut disertakan...

REPLY
Komentar ini telah dihapus oleh pengarang.

Kak aku blogger baru nih, ada masalah serupa seperti Kak Rizqi RRK di atas.
Codenya gini (gatau deh benar apa tidak):
}
}
</script>
<body></body>
<br><html/>


---
Itu gimana, ya? Awalnya baris terakhir itu <html> trus salah, dinoticenya harus pakai </br> pokoknya ujung-ujungnya seperti code di atas aja. Mohon bantuannya, Kak. Suwun.

REPLY

Wah ternyata banyak pengalaman yang saya temukan di sini,terima kasih tipsnya

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|