Cara Mudah Validasi HTML5 w3

validator html 5
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.winmediatv.blogspot.com/test.php?name=Winmediatv&code=markup

Solusi penggunaan eror seperti diatas, ampersand (&) harus escaped, menjadi seperti ini:
.http.winmediatv.blogspot.com/test.php?name=Winmediatv&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 &lt;

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 winmediatv" />

4. Required attribute "type" not specified
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">...winmediatv....</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 &amp;c.
&aelig menjadi &aelig;

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 &lt; .</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 specified
Cara 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 specified
Anda juga diharuskan menutup tag link "a" seperti berikut:

   <a href="http://winmediatv.blogspot.com">Winmediatv</a>

End tag for "br" omitted, but OMITTAG NO was specified
Kesalahan 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 Winmedia" /> 
</form>

Seharusnya ditulis seperti ini :
<form action="/">
<fieldset>
<input type="submit" name="Nama Anda Winmedia" />
</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 &amp; (escaped)
Contoh kasus :
  <a href="/contact-us.php?name=Winmediatv&postid=7767">Hubungi kami</a>

Seharusnya seperti ini:
  <a href="/contact-us.php?name=Winmediatv&amp;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 &amp;

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&sectio…

Source code:

 <a class='quickedit' href='//www.blogger.com/rearrange?blogID=7767610426547614273&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=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)

Sebagian contoh kesalahan dan solusi diatas ini saya kutip dari situs -situs forum HTML seperti stackoverflow.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 Mudah Validasi HTML ini dapat membantu permasalahan Anda dan dijadikan pedoman solusi bagi Anda.

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 winmediatv...</span>

Anda juga dapat melihat kasus-kasus yang lain error validasi dan solusinya di form komentar dibawah, mungkin bisa membantu.

18. & did not start a character reference. (& probably should have been escaped as &amp;.)
 .…n.css?targetBlogID=7767610426547614273&zx=ae9d02a0-8d17-4917-9ce4-3437c250f8f4…
cari kode <b:skin><![CDATA[  gunakan Ctrl + F untuk mempermudah pencarian ganti kode di atas dengan kode berikut :

<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]
<style>

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 ada tag <script>...</script> muncul setelah tag </html> pada dokumen HTML (template). Solusinya tag <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://winmediatv.blogspot.com/feeds/posts/default' rel='alternate' title='namablog - Atom' type='application/atom+xml'/>
atau
<link href='http://winmediatv.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='namablog - RSS' type='application/rss+xml'/>

ganti yang warna merah dengan nama blog kalian
Semoga cara ini bisa membantu sob!!, kalau kalian ada cara lain Monggo disharing Sob.

Like THIS :
Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Author : WINMEDIATV

winmediatv Terima Kasih sobat sudah menyimak tentang Cara Mudah Validasi HTML5 w3.yang kami publikasikan pada Senin, 10 Juni 2013 Silahkan tinggalkan jejak pada form Komentar untuk mempermudah winmediatv crew untuk berkunjung kembali ke blog sobat.(Wassalam)
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Winmediatv

3 komentar untuk "Cara Mudah Validasi HTML5 w3"

Terima kasih sudah berkunjung. Silahkan tinggalkan komentar untuk respon/pertanyaan. Klik link "Subscribe by email" untuk mengetahui balasan komentar/pertanyaan. Jika ingin bertanya/berdiskusi lebih mendetil & efektif..Komentar disini NO SPAM, No Links, No SARA, No P*RNO! Komentar berisi LINK & tidak sesuai ketentuan akan langsung dihapus.