Membuat Halaman Posting Blog Valid HTML5

Unknown

HTML5

13 Jan 2014

4 Komentar

Creating Valid HTML5 Blog Post Pages - Mungkin artikel ini yang terakhir dalam episode kita dalam pembahasan seputar HTML5, dan insya allah episode selanjutnya saya akan membahas seputar CSS3.

BREADCRUMBS

Saat ini sudah banyak tutorial tentang breadcrumbs yang SEO friendly, tapi kebanyakan masih menggunakan markup rdfa, untuk membuatnya valid html5 Anda harus menggunakan markup microdata.

• Membuat Breadcrumbs SEO Friendly dan Valid HTML5

GAMBAR / IMAGE

Apabila Anda mengupload gambar pada postingan, biasanya akan muncul kode seperti ini (pada mode HTML)

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEges5l3r8r4iqLwmkg_z9Rfd8ssboaXqrzxC2Yq-Q2zKeSkFzlICqwiGlOCrVeLrkwdjBCVFuGnOrgrBgb3eiXxJJPulZZVS5K4tiEDfm559NK9iW-iZ0po6cNnkJV0rXKiHOktXFvtVsMT/s1600/abstract2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEges5l3r8r4iqLwmkg_z9Rfd8ssboaXqrzxC2Yq-Q2zKeSkFzlICqwiGlOCrVeLrkwdjBCVFuGnOrgrBgb3eiXxJJPulZZVS5K4tiEDfm559NK9iW-iZ0po6cNnkJV0rXKiHOktXFvtVsMT/s320/abstract2.jpg" width="320" /></a></div>

hapus imageanchor="1", dan ganti border="0" dengan alt="keterangan gambar".

Intinya, ketika menyimpan gambar pada postingan atau widget, jangan menggunakan border="0". Hal yang wajib ditambahkan adalah alt="keterangan gambar" lebih bagus lagi menggunakan tag title. Sebagai contoh menampilkan gambar yang baik:

<img alt="ipad4" src="http://blogspot.com/ipad4.png" title="Ipad Terbaru"/>

ARTIKEL TERKAIT / RELATED POST

Ada beberapa script yang saya temui pada related posts ini error vaidasi. Diantara penyebabnya adalah karena label menggunakan 2 kata atau lebih seperti Tutorial Blogger, dengan kondisi seperti itu, membuat white space yang seharusnya. Bagi sobat yang menggunakan script ini, saya sarankan untuk membuat label hanya dengan 1 kata saja. Apabila sudah banyak label dengan 2 kata atau lebih.

• Menampilkan Artikel Terkait Blog Valid HTML5

WIDGET

Untuk validasi widget sebetunya sudah dibahas pada artikel yang lalu. yang pasti selalu menghapus <b:include name='quickedit'/> setelah menambah widget baru.

Ada hal lain yang harus diperhatikan yaitu ketika menambah kode pada widget, banyak tutorial yang menyatukan antara kode CSS, HTML dan JavaScript di widget. Misalnya kode Recent Post dengan Avatar, Blog Pager menjadi Judul, dll.

Sebagai gambaran seperti ini :

<style type="text/css">

.home-link{display:none} #blog-pager-newer-link {font-size:12px;width:300px;float:left; text-align:left;font-family:Arial, sans-serif;} #blog-pager-older-link {font-size:12px;width:300px;float:right; text-align:right;font-family:Arial, sans-serif;}

</style>

<script type="text/javascript">

$(document).ready(function(){ var olderLink = $("a.blog-pager-older-link").attr("href"); $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { var olderLinkTitle = $("a.blog-pager-older-link").text(); $("a.blog-pager-older-link").text(olderLinkTitle + "\u2192");//rgt });

</script>

Kode <style type="text/css"> inilah yang menyababkan error, untuk solusinya tambahkan scoped atau scoped='' atau scoped='scoped'. Inilah yang dinamakan Boolean Attribute. Maka kode yang benar menjadi:

<style type="text/css" scoped>

KOMENTAR

Inilah penyumbang error terbanyak pada validasi. Dengan menggunakan komentar standar blogger, akan susah melakukan validasi. Oleh karena itu, untuk membuat halaman posting menjadi valid HTML5, ada satu alternatif khusus untuk Anda :

• Mengaktifkan Sistem Komentar Google+ di Blogger

Bila ada kekurangan, insya allah menyusul..

Sumber bacaan : http://blog.kangismet.net/2013/09/tips-membuat-halaman-posting-valid-html5.html