Kumpulan Eror Validasi HTML dan Solusinya Part 2

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.