HTML5 sebenarnya adalah pengembangan dari versi sebelumnya yang bertujuan untuk memperbaiki teknologi HTML untuk mendukung teknologi multimedia dan juga mudah dimengerti oleh mesin.
Perlukah web/blog valid HTML5? dari berbagai sumber saya temukan bahwa diantara keuntungan mevalidasi blog adalah :
√ Mmbantu 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.
Cara Membuat Blog 100% Valid HTML5
Hapus kode <b:include name='quickedit'/>setiap Anda menambah widget baru.
√1 Backup template sebelum melakukan editing.
√2 Cari kode ini
HTML
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
√3 Silahkan Anda ganti dengan yang dibawah ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
√4 Ganti kode </html>dengan </HTML> ( pada bagian bawah template Anda )
√5 Cari kode seperti yang di bawah ini :
<b:include data='blog' name='all-head-content'/>
√6 Gatikan seperti yang di bawah ini :
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
√7 Cari kode seperti ini : <b:skin><![CDATA[
√8 Gantikan dengan yang di bawah ini :
√8 Gantikan dengan yang di bawah ini :
<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]
<style>
√9 Hapus semua kode ini : <b:include name='quickedit'/>
Catatan : Setiap kali Anda menambahkan widget baru, hapus kode di atas.
√10 Hapus semua kode ini : <a expr:name='data:post.id'/> ( Jika Anda temukan = optional ).
√11 Hapus semua kode ini :
<b:include data='post' name='postQuickEdit'/>
Atau seperti dibawah ini :
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
√12Hapus kode dibawah ini jika ketemu ( jika tidak lewati saja )
<div class='post-share-buttons goog-inline-block'>...sampai... </div>
√13 Gantikan semua kode ini &dengan &
Jika cara diatas sudah Anda lakukan bisa dipastikan template sudah Valid HTML5 untuk Homepage. Kecuali pada postingan tentunya masih belum FIX atau masih banyak error .
Jadi langkah yang harus di tempuh berikutnya agar blog menjadi 100% valid HTML5, maka hal hal yang perlu diperhatikan adalah seperti di bawah ini :
۞ Selalu gunakan tag alt pada gambar, contoh :
<img alt=" isikan judul gambar atau judul posting " src="http://2.bp.blogspot.com/-H1eAI5Oya4w/UhqgqupQnyI/bloggingpasuruanblogspotcom.pict1.jpg" />
۞ Hindari penggunaan border="0"pada gambar, sebagai gantinya tambahkan kode :
style="border:none"
atau CSS terpisah seperti
img{border:none}
۞Pada iFrame, jangan menggunakan frameborder="0"atau allowtransparency:"true" scrolling="no", cari dan temukan lalu ganti dengan kode :
style="border:none;overflow:hidden"
atau CSS terpisah seperti di bawah ini :
iframe{border:none;overflow:hidden}
۞Pada tag ajangan menggunakan tag name seperti di bawah ini :
<a name='comment-form'>
Silahkan Anda ganti menggunakan id seperti :
<a href='#comment-form'>
۞Jangan ada dua id pada template.
Demikian tutorial Cara Membuat Blog 100% Valid HTML5, semoga bermanfaat....
