Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

close
13 Jan 2014

Membuat Halaman Posting Blog Valid HTML5

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.

Halaman Posting Blog Valid HTML5

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.
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="http://2.bp.blogspot.com/-XJW14wKp0n4/Ujs4FVUJRrI/AAAAAAAAFgs/s_wh3yLA0Yw/s1600/abstract2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="177" src="http://2.bp.blogspot.com/-XJW14wKp0n4/Ujs4FVUJRrI/AAAAAAAAFgs/s_wh3yLA0Yw/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.
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 :
Bila ada kekurangan, insya allah menyusul..

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

4 Komentar

makasih mas dengan cara ini lebih banyak belajar :D dan salam kenal mas ..

Sama2 kita juga sebenarnya masih banyak belajar.. :)

Belum sempet otak-atik HTML5 ane sob, belum ada waktu nih .. sibuk sama pekerjaan x_x

hehehe gpp tetep utarakan pekerjaan.. :-bd

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal
Terima kasih telah berkomentar
 
notifikasi
Tutup