Panduan berikut ini akan menjelaskan secara detail dan lengkap (saya
harap begitu) serta berusaha agar Anda dapat mudah memahaminya dalam
penjelasan langkah demi langkah convert Blogger Template menjadi valid
HTML 5.
Menurut saya pribadi, dan alasan saya berpaling ke HTML5 tidak lain karena hal menarik berikut:
Bagian HEAD dokumen HTML5 akan cukup akrab dengan siapa pun terbiasa
melihat HTML, so Anda bisa melihat contoh XHTML yang sudah di convert di
bagian DOCTYPE ,Head, dst. seperti panduan diatas (dengan penambahan
meta tag, title, link stylesheet, script):
Untuk lay-out atau CSS Anda bisa menggunakan link "stylesheet" eksternal, seperti diatas, atau juga internal dengan penulisan <style>..code CSS...</style>.
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Pada akhir langkah ini, Anda telah selesai convert HTML 5 pada
bagian <head> atau proses "clean up head section". Satu langkah
selesai dan langsung Anda ke langkah berikut ini, yaitu bagian semantik
(semantics tag), tahap ini tentang membuat kode lebih reliable dan aman
dengan fitur-fitur baru HTML 5. Jadi, mari kita mengkonversi halaman
pertama.
Langkah Kedua : Penerapan Elemen Baru HTML 5
Sekarang kita bisa menggunakan atau menerapkan beberapa tag semantik baru HTML 5, seperti <header>,<section>,<article>, <aside>, <footer>,<nav>, <footer>.
Mari kita mulai dengan <header>.
Ganti
<div id="header">
…
</div>
menjadi
<header>
…
</header>
Untuk bagian navigasinya :
<div id="nav">
<ul>
<li>...</li>
</ul>
</div>
Gantilah menjadi seperti ini :
<nav>
<ul>
<li>....</li>
</ul>
</nav>
Selanjutnya bagian post :
Ganti
<div id="posts">
<div id="post-1" class="post">
menjadi
<section id="posts">
<article id="post-1" class="post">
Mungkin ada perbedaan mengenai tag di bagian post ini, ada yang menggunakan <div id="main">,dst...tetapi intinya id ini untuk dimana artikel akan berada (letak postingan Anda).
Anda juga bisa merubahnya menjadi seperti ini :
<div id="main">
<article> atau
<article id="page-content">
<section>
Tergantung dari layout template Anda, sesuaikan saja dengan yang Anda
miliki sekarang. Yang perlu Anda ketahui pada HTML 5, elemen baru
seperti tag <section> digunakan sebagai elemen kontainer untuk semua posting dan tag <article> untuk elemen kointainer yang berisi sub-sub post dengan id unik.
Nah,
untuk bagian sidebar, Anda sekarang bisa menggunakan tag
<aside>, yang mendefisikan konten selain konten halaman bisa itu sidebar atau berisikan footnote.
<div id="sidebar">
....
</div>
Anda bisa merubahnya menjadi seperti ini:
<aside id="sidebar">
......
</aside>
Dan untuk bagian footer :
<div id="footer">
…
</div>
Ganti menjadi seperti ini :
<footer>
…
</footer>
Bingung Sobat? :) kebanyakan kode ya. Jangan kabur dulu.....
Kalau Anda bingung, langsung aja liat contohnya secara lengkap yang telah saya buat ini, berdasarkan langkah-langkah diatas.
Ok, setelah Anda menyelesaikan semua langkah bagaimana meng-konvert HTML
atau XHTML Blogger Template menjadi valid HTML 5, maka hasilnya kurang
lebih seperti ini (dengan penambahan nama blog,logo, naviagsi,CSS style,
dan artikel) :
Contoh HTML 5 Website Standard:
Hasil dari dokumen HTML 5 untuk website standar diatas akan seperti gambar dibawah:
Note :
Penggunaan trailing slash (slash penutup) seperti "<../>"
pada HTML 5 tidak harus digunakan, walaupun masih vaild jika Anda
memakainya. Tidak seperti dokumen berbasis XHTML, yang lebih tegas
(harus memasang slash penutup) yaitu semua tag harus nested properly.
Dalam beberapa kasus dokumen online tampaknya masih diperlukan
pemasangan trailing slash untuk tag seperti <img>, <link>, <meta>, <br>.
Contoh:
<img src="url_image.png" />
Ketika Anda menambahkan elemen baru HTML5, Anda juga harus menambahkan
Styling CSS berikut dalam style sheet Anda untuk membantu browser lama
memahami apa yang harus dilakukan dengan unsur-unsur baru tersebut :
Contoh :
article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }
OK Sob, cukup dulu....semoga ga tambah bingung ya mas bro and sis bro dengan artikel Cara Konvert HTML/XHTML ke HTML 5 :)
Feel free to ask me,ok!