Beberapa Kesalahan atau eror markup saat kita cek validasi HTML di W3C Validator adalah hal biasa bagi pengembang, profesional maupun pemula yang menyenangi valid HTML. Error pada markup HTML terjadi karena banyak faktor dan cara mengatasinya (solusi) juga beragam, akan tetapi validasi HTML, XHTML, and CSS saya rasa perlu dilakukan karena beberapa alasan berikut:
- Membantu Search Engine meng-indeks dokumen website/blog lebih baik.
- Render browser lebih baik dan lebih cepat
- DOCUMENT OBJECT MODEL (DOM) lebih stabil dan konsisten
- Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.
- Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)
- Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini.
Satu hal yang perlu kita ketahui juga, ketika memutuskan beralih dari HTML4/XHTML ke HTML5adalah bagaimana cara validasi HTML 5 bekerja, karena markup validasi HTML5 berbeda dengan web markup versi sebelumnya. Solusi atau memperbaiki Eror Validasi Markup HTML5 juga berbeda, ini mengingat pengenalan beberapa elemen atau fitur baru serta meninggalkan beberapa elemen lama (obsolete atau deprecated HTML tags) pada HTML 5. Dan biasanya pada HTML 5 lebih sedikit eror atau kesalahan markup dibandingkan XHTML yang memang terkenal ketat rule markup-nya.
Oleh karena itu, saya akan membagi tip dan trik Cara Mengatasi Eror-Eror Validasi Markup HTML pada W3C Validator yang paling sering dijumpai. Kumpulan kesalahan atau error validasi markup HTML dibawah ini saya gabungkan baik markup HTML 4, XHTML maupun terbaru HTML 5.
Kumpulan Eror Validasi Markup HTML dan Solusinya
1. & did not start a character reference. (& probably should have been escaped as &. )
Kasus eror ini cukup sering dijumpai, ampersand (&) adalah karakter khusus yang mendefinisikan awal dari sebuah kode karakter dan hampir semua kasus kode harus dibebaskan (escaped) dengan kode &
Contoh kesalahan/eror mungkin terjadi di URL, seperti:
.....http.sutoronaruto.blogspot.com/test.php?name=sutoro&code=markup
Solusi penggunaan eror seperti diatas, ampersand (&) harus escaped, menjadi seperti ini:
.http.sutoronaruto.blogspot.com/test.php?name=sutoro&code=markup
2. character "&" is the first character of a delimiter but occurred as data
Eror yang sama solusinya dengan diatas :
…(BLOG_attachCsiOnload) != 'undefined'&& BLOG_attachCsiOnload != null) { windo…
Solusi ganti & :…(BLOG_attachCsiOnload) != 'undefined'&& BLOG_attachCsiOnload != null) {
Contoh kasus lain sering pada kode Javascript :
…tionStart,l=g.responseStart;0<k&&l>=k&&(j[d]("_wtsrt",void 0,k),j[d]("wtsrt_",
Solusi ganti <> dengan <
3. Required attribute "alt" not specified
Ini disebabkan attribute "alt" tidak ada pada sebuah image, image memerlukan attrbt 'alt" untuk membantu orang mendapatkan penjelasan tentang gambar yang diwakili. Solusinya Anda harus memberi tag alt=" " pada tag img di halaman Anda.
<img src="url image" alt="penjelasan gambar" />
Pesan eror ini kadang muncul pada kode script atau tag link, di HTML 4 atau XHTML
Solusinya simple tambahkan saja tag <script type="text/javascript"> pada kode script :
<script type="text/javascript">.......</script>
Begitu juga pada link stylesheet tag :
< <link rel="stylesheet" type="text/css" href="/css/global.css" />
5. Reference not terminated by REFC delimiter
Contoh error yang mungkin pada kode entity :
&c. rubah menjadi &c.
æ menjadi æ
Selalu akhiri dengan semi colon (;) pada entity property.
Entity dimaksudkan untuk menuliskan karakter sebagai bagian dari dokumen kode (simbol) bukan sebagai konten.
Contoh :
untuk menampilkan tag "<" (karakter tag pembuka) sebagai simbol maka tulisan seperti ini:<p>HTML tag dimulai dengan karakter < .</p>
bukan seperti ini:
<p>HTML tag dimulai dengan karakter < .</p>
6. End tag for "img" omitted, but OMITTAG NO was specified
Ini biasanya terjadi karena tidak menutup sebuah tag dengan benar "/>", contoh:
<img src="url image" alt="penjelasan gambar" />
Solusi ini juga berlaku dengan eror-eror berikut:End tag for "link" omitted, but OMITTAG NO was specifiedCara yang benar untuk menulis self-closing tag, seperti link, img dan meta, seperti ini:
<link rel="stylesheet" type="text/css" href="/css/global.css" />
End tag for "a" omitted, but OMITTAG NO was specifiedAnda juga diharuskan menutup tag link "a" seperti berikut:
<a href="http://sutoronaruto.blogspot.com">sutoronaruto</a>
End tag for "br" omitted, but OMITTAG NO was specifiedKesalahan penulisan line break, seperti :<br> seharusnya <br/>
7. Document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
Error ini terjadi biasanya pada versi XHTML Strict , elemen form hanya dapat berisi block-level elemen sebagai direct children (sedangkan elemen input adalah elemen inline). Sebuah contoh yang mungkin menyebabkan kesalahan ini sebagai berikut:
<form action="/">
<input type="submit" name="Nama Anda" />
</form>
Seharusnya ditulis seperti ini :
<form action="/">
<fieldset>
<input type="submit" name="Nama Anda" />
</fieldset>
</form>
8. Reference to entity "postid" for which no system identifier could be generated atau Reference to entity "id" for which no system identifier could be generated
Kasus ini umumnya juga disebabkan karena karakter ampersand yang harus dirubah menjadi & (escaped)
Contoh kasus : <a href="/contact-us.php?name=Riza&postid=7767">Hubungi kami</a>
Seharusnya seperti ini: <a href="/contact-us.php?name=Riza&postid=7767">Hubungi kami</a>
9. An attribute value specification must be an attribute value literal unless shorttag yes is specified
Ini disebabkan karena attribut value tidak dikurung dengan quotes " ".Contoh : <p class=tema> seharusnya seperti ini : <p class="tema"><img height=50px..…> seharusnya seperti ini : <img height= "50px"..…>
10. Element "div" undefined, Element "td" undefined, Element "br" undefined, Element "iframe" undefined, Element "img" undefined atau Element "embed" undefined
Jika Anda menemui pesan eror-eror validasi seperti diatas, solusinya sama yaitu:
Eror diatas berarti dokumen tidak mengenali eksistensi elemen-elemen diatas, kemungkinan besar disebabkan oleh incorrect atau missing Doctype pada dokumen. Anda harus memastikan DOCTYPE Anda benar. Daftar deklarasi DOCTYPE valid dapat Anda lihat disini : http://www.w3.org/QA/2002/04/valid-dtd-list.html
11. Element "g:plusone" undefined
Eror ini terjadi pada dokumen HTML 5, sintaks yang digunakan pada "g:plusone" sudah tidak valid, jadi Anda dapat menggantinya dengan :<div class="g-plusone"></div>
12. The frameborder attribute on the iframe element is obsolete. Use css instead
Pada dokumen HTML 5, attribut frameborder telah ditinggalkan dari elemen iframe sebagai gantinya Anda harus menggunakan CSS.
<iframe width="50" height="25" frameBorder="0" ........"></iframe>
Ganti attribut frameborder dengan kode css berikut:
<iframe width="50" height="25" style="border:none;" ........"></iframe>
13. The scrolling attribute on the iframe element is obsolete. Use CSS instead
Scrolling attribute juga termasuk yang sintaks usang di HTML 5, jadi dengan CSS, seperti diatas:
Contoh:
<iframe src="http://www.map-generator.net/extmap.php?.... width="614" height="244"scrolling="no"></iframe>
Ganti menjadi :
<iframe src="http://www.map-generator.net/extmap.php?.... width="614" height="244"style="overflow:hidden;"></iframe>
14. The align attribute on the td element is obsolete. Use css instead atau The width attribute on the td element is obsolete. Use css instead
Element style"align", "width" pada elemen td adalah usang (obsolete) atau nonstandard HTML tag, jadi pada tes validasi W3C Markup akan menjadi sumber eror/kesalahan markup, untuk mengatasinya Anda dapat menggunakan CSS inline atau CSS terpisah.
Contoh:
<table> <tr> <td align="center">OLA LA</td> </tr> </table>
Atasi dengan CSS terpisah berikut:
.tabletd { text-align:center; }
Penulisan HTML-nya seperti ini:
<table> <tr> <td class="tabletd">OLA LA</td> </tr> </table>
Atau bisa juga dengan inline css (not recomended) :
<table> <tr> <td style="text-align: center;">OLA LA</td> </tr> </table>
15. Reference to entity "widgettype" for which no system identifier could be generated
Kasus eror ini juga disebabkan ampersand yang perlu diparsing seperti contoh eror sebelumnya, contoh eror seperti berikut :
<a href=.................&widgettype=contact">Solution</a>
Ganti & menjadi &
16. & did not start a character reference. (& probably should have been escaped as (letaknya di widget)
Eror ini sering ditemui pada widget, dimana elemen class untuk 'quickedit' bawaan blogger penyebabnya (terjadi pada HTML 5). Secara lengkap contoh kode eror pada widget blogger kurang lebih seperti berikut:
...ID=3863707973515408490&widgetType=HTML&widgetId=HTML1&action=editWidget§io…
Source code:
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=3863707973515408490&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=sidebar-atas1' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='Edit'>
Kode tersebut tidak ditemukan pada dokumen original template, sehingga ampersand (&) tidak dapat di-escaped/parsing. Untuk mengatasinya dengan cara menghapus tag <b:include name='quickedit'/> dari elemen widget tersebut. Ini tergantung pada berapa banyak widget yang ada, Anda dapat menghapusnya semua tag <b:include name='quickedit'/> di dokumen template Anda. Juga ketika Anda menambah widget baru maka harus kembali menghapus tag <b:include name='quickedit'/> di widget baru itu.
* khusus widget Google Follower tag <b:include name='quickedit'/> tidak dapat dihapus, saya juga belum menemukan solusinya ( bagi Pembaca yang dapat membantu atau punya ide, saya sangat menghargai jika Anda berkenan berbagi pada kami)
Untuk sementara informasi eror validasi dan solusinya sampai disini, namun akan ada update-update baru serta tip mengatasinya yang baru jika saya menemukan hal-hal baru berkaitan dengan validasi HTML. Bagi kawan Blogger yang mempunyai pengalaman mengatasi kesalahan validasi HTML silahkan berbagi di form komentar, tentu saya sangat menghargai dan juga sebagai acuan update artikel ini.
Sebagian contoh kesalahan dan solusi diatas ini saya kutip dari situs -situs forum HTML sepertistackoverflow.com, markupvalidator.com. Sebagian lagi diperoleh dari pengalaman saya pribadi sejak merubah (convert) blog ini ke HTML 5, saat itu saya telah menemukan sekurangnya ada 55 errors dan 7 warnings.
Ok Kawan, semoga tip Cara Mengatasi Eror Validasi HTML ini dapat membantu permasalahan Anda dan dijadikan pedoman solusi bagi Anda.
Salaam
Update 28 Jan 2013:
17. The font element is obsolete. Use CSS instead.
Tag Font telah ditinggalkan (deprecated) untuk HTML 5 validasi, comtoh:
<font size='..'>..........</font>
Solusi:
Gunakan css misalnya:
.kata {font-size:16px; color:balck;}
dan terapkan dengan "span class" :
<span class="kata">...teks Anda...</span>
Anda juga dapat melihat kasus-kasus yang lain error validasi dan solusinya di form komentar dibawah, mungkin bisa membantu.
Update 29 Jan 2013:
18. & did not start a character reference. (& probably should have been escaped as &.)
.…n.css?targetBlogID=2557765903998214405&zx=ae9d02a0-8d17-4917-9ce4-3437c250f8f4…
Ini error yang mungkin sering akan ditemukan pengguna blogspot.com jika Cek Validasi HTML 5, eror ini saya temuka baru saja, sehingga membuat halaman Home saya yang semula Sukses Validasi (0 error) sekarang menyisakan 11 error yang belum terpecahkan solusinya. Ada yang punya solusi, kawan bloggger?
Sebenarnya untuk memperbaiki error diatas cukup sederhana, hanya masalah ampersand (&) yang harus diencoded menjadi &. Namun setelah saya melihat kode sumber eror tersebut, menjadi pesimis, oleh karena kesalahan ini terletak di eksternal link stylesheet dari bloggger sendiri, lengkapnya sumber error validasi itu seperti berikut:
<link type="text/css" rel="stylesheet" href="//www.blogger.com/dyn-css/authorization.css?targetBlogID=2557765903998214405&zx=ae9d02a0-8d17-4917-9ce4-3437c250f8f4"/>
Tidak ada yang bisa dilakukan dengan kesalahan validasi HTML 5, kecuali Blogger team sendiri evaluasi (memperbaiki) ini menuurut saya. Ini kalau ga salah juga terjadi pada kasus kawan Linggar Litoz pada komentarnya di Cara Konvert HTML/XHTML ke HTML 5.
Update 16 Mei 2013:
19. script element between head and body.
Error validasi HTML 5 ini, dikarenakan adanya script element (tag <script>) antara tag </head>: head penutup dan tag <body>: body pembuka. Seperti contoh error dibawah ini:
Line 16, Column 86: script element between head and body
.…avascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"> </script>
Solusinya : Seharusnya elemen script atau tag <script> ditempatkan diantara tag <head>...</head> atau antara <body>.....</body>. Bahkan ada yang menyarankan jika memungkinkan semua script elemen; <script type="text/javascript">...</script> ditempatkan dibagian paling bawah template tepat sebelum tag </body>. Hal ini untuk menghindari pemblokiran render html pada saat dowloading skrip yang juga membuat blog/web lebih respon.
The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document. (source: w3.org )
20. Cannot recover after last error. Any further errors will be ignored.
Erros tersebut ada beberapa penyebabnya, salah satunya adalah dampak error diatas: script element between head and body, tentu setelah diperbaiki error ini akan ikut hilang.
Line 16, Column 86: Cannot recover after last error. Any further errors will be ignored
.…avascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"> </script>
Penyebab lain, dikarenakan adannya tag <script> diluar tag <html>, atau jelasnya adatag <script>...</script> muncul setelah tag </html> pada dokumen HTML (template). Solusinyatag <script> harus dipindahkan dalam tag <body>....</body>
Mungkin juga ada penyebab lainnya, dan solusinya juga. Untuk sementara saya hanya menemukan ini saja. tentu kawan bisa sharing juga jika mempunyai pengalaman lain.
21. Bad value service.post for attribute rel on element link: Not an absolute IRI. The string service.post is not a registered keyword or absolute URL.
Eror ini penyebabnya adalah Validator tidak mengenali nilai yang digunakan attribut rel, dalam hal ini rel="service.post" atau rel="sitemap". Kesalahan ini biasanya terletak pada link sitemap blog atau atlernatif sitemap link, seperti contoh dibawah kodenya kurang lebih sebagai berikut:
<link rel="service.post" type="application/atom+xml" title="namablog - Atom" href="http://www.blogger.com/feeds/3863707973515408490/posts/default" />
Line 14, Column 154: Bad value service.post for attribute rel on element link: The string service.post is not a registered keyword or absolute URL
.… Atom" href="http://www.blogger.com/feeds/3863707973515408490/posts/default" />
Ada beberapa pendapat mengenai solusi error ini, diantaranya harus register nama link (service.post atau sitemap) tersebut yang akan Anda gunakan di http://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions. Tentu ini akan memerlukan waktu cukup lama, oleh karenanya sebenarnya ini bukan kesalahan mayor sturktur HTML tidak banyak yang bisa dilakukan.
Tapi sebagai solusinya Anda bisa mencobanya dengan merubah kode rel URL sitemap menjadi seperti berikut:
<link href='http://namablog.blogspot.com/feeds/posts/default' rel='alternate' title='namablog - Atom' type='application/atom+xml'/>
atau
<link href='http://namablog.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='namablog - RSS' type='application/rss+xml'/>
<link href='http://namablog.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='namablog - RSS' type='application/rss+xml'/>
