How To Blog Valid HTML5, Siapa yang tidak mengenal istilah HTML5 apalagi didunia blogging. Seperti yang dilangsirkan oleh wikipedia, HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997 hingga bulan Juni 2011 masih dalam pengembangan.
Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
Itulah maksud dan tujuan utama HTML5, disini saya akan memberikan cara untuk mengurangi atau membuat blog valid HTML5.
1. Periksa terlebih dahulu blog Anda di validator.w3.org dengan memasuka URL sobat kemudian tekan enter maka hasilnya akan terlihat secara rinci
2. Jika sudah, ganti deklarasi kode seperti berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
Ganti dengan kode berikut
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
3. Kemudian ubah Tag </html> menjadi </HTML>
4. Selanjutnya cari kode <b:include name='quickedit'/>
dan hapus, ingat setiap Anda menambah widget selalu cari kode yang saya maksudkan tadi dan hapus.
5. Jenis type="text/javascript"
pada semua kode JavaScript dan CSS type="text/css"
untuk semua css yang ada, baik di templates, posting maupun di widget. Sebaiknya Anda menuliskan seperti ini
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
dan CSS seperti ini
<script type="text/css" src="https://googledrive.com/host/0B1-0l4x7DNi0OU1QX0F4dDZSOUk"></script>
6. Sekarang menuju pada image, tambahkan atribut Alt dan title pada semua gambar contoh
<img alt="How To Blog Valid HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFKI4Hukux0Hs51BYOGyGz2Kmz26LcmgWNppasWCnz0imXvV5SUQeEq8P2MGMgkaa3K6LhnRDaVJc5isnGkvGo2xYAxpg7jdvxl_YXlExa3rK6L-vPKBhVlewMzMh8aEXczXz0hf8oBOU/s1600/html5.png" height="250" title="Cara Agar Blog Valid HTML5" width="280" />
7. Ganti Meta Tag yang mengalami error dengan Meta Tag berikut
<meta charset='utf-8'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,700' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic|Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>
<meta content='ID Google Verification' name='google-site-verification'/>
<meta content='ID Alexa Blog' name='alexaVerifyID'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> ~ Title Blog</title>
</b:if>
<title><data:blog.pageName/> ~ Title Blog</title>
</b:if>
<title><data:blog.searchQuery/> ~ Title Blog</title>
<b:if cond='data:blog.searchLabel'>
<title>Artikel pada Label ~ <data:blog.pageName/> ~ Title Blog</title>
</b:if>
<b:if cond='data:blog.searchQuery'>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<title><data:blog.pageName/> ~ Title Blog</title>
</b:if>
<b:if cond='data:blog.pageName == ""'>
<title><data:blog.pageTitle/></title>
<link expr:href='data:blog.url' rel='canonical'/>
<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.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+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'/>
<meta expr:content='data:blog.metaDescription' name='description'/>
<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 != ""'>
<b:else/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<b:else/>
<meta content='Url Favicon' property='og:image'/>
</b:if>
<meta content='ID Facebook Admin' property='fb:admins'/>
<meta content='ID Facebook Group Blog' property='fb:app_id'/>
8. Mengatasi error css bundle templates, ganti kode <b:skin><![CDATA[
dengan kode di bawah ini
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' /> <style type="text/css"> <!-- /*<b:skin><![CDATA[*/]] <style>
9. Pada saat posting dan memasukkan gambar hapus atribut Anchor='1'
dan border='0'
dan tambahkan atribut alt dan title, contoh validasi image seperti ini
<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img alt="How To Blog Valid HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFKI4Hukux0Hs51BYOGyGz2Kmz26LcmgWNppasWCnz0imXvV5SUQeEq8P2MGMgkaa3K6LhnRDaVJc5isnGkvGo2xYAxpg7jdvxl_YXlExa3rK6L-vPKBhVlewMzMh8aEXczXz0hf8oBOU/s1600/html5.png" height="250" title="Cara Agar Blog Valid HTML5" width="280" /></div>