Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

Konvert HTML/XHTML ke HTML 5


Seperti janji saya di artikel HTML5: Apa Saja Yang Baru ? , akan membahas bagaimana cara konvert HTML atau XHTML template/dokumen ke HTML 5 template, inilah panduan lengkapnya. Seperti telah dijelaskan mengenai HTML 5 sebelumnya, HTML 5 adalah web HTML masa datang (future template), so ada baiknya Anda melihat struktur HTML 5 ini, dan apa saja yang perlu diketahui. Jika Anda sekarang  menggunakan HTML 4.0 atau XHTML 1.0 dan tertarik untuk merubahnya (convert) ke HTML 5, "than you are in the right place".

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.

Kenapa Harus HTML 5?

Menurut saya pribadi, dan alasan saya berpaling ke HTML5 tidak lain karena hal menarik berikut:
  • Penggunaan <!DOCTYPE > lebih sederhana/lebih pendek
  • Penggunaan <script> sebagai pengganti <script type="text/javascript">
  • Pemakaian <style> daripada menggunakan <style type="text/css">
  • Pasti lebih sedikit error (Error handling lebih mudah) dalam standard pengkodean HTML dibandingkan XHTML (jika ditest dengan W3C validator).
  • Juga efisiensi beberapa elemen baru seperti header, section dst.

Ada banyak kelebihan HTML 5, lebih baik baca artikel saya selanjutnya tentang " 10 Keuntugan Menggunakan HTML 5"
Lihat HTML5: Apa Saja Yang Baru ? untuk lebih jauh tentang fitur-fitur baru HTML5.

Pada prinsipnya konvert HTML 4 atau XHTML 1,0 ke HTML 5 adalah terpusat pada 3 hal penting, yaitu : pembaruan kode (clean), efisiensi kode dan kode semantik (semantic code):
  • Membuang pengidentifikasian PUBLIC FPI and SYSTEM  PUBLIK dari deklarasi DOCTYPE
  • Ganti tag HTML usang atau tidak dipakai lagi (obsolete or deprecated HTML tags) atau rekonstruksi dengan kode HTML yang sesuai dengan standar HTML 5. 
  • Menerapkan fitur-fitur baru dari HTML 5, seperti mengkonversi dari tag <div> ke tag HTML 5 sectioning.

Langkah Konvert HTML 4 atau XHTML 1,0 menjadi HTML 5

Yang pertama kali Anda harus lakukan sebelum melakukan perubahan besar terhadap dokumen template Anda yang sekarang digunakan, adalah BACK UP!!
Blogger > Template > klik tombol Cadangkan/Pulihkan > Unduh Template Lengkap
Simpan baik-baik (sebagai kenang-kenangan nantinya) di PC Anda

Langkah Pertama: Cleaning up Head Section

Perubahan dalam penggunaan <! DOCTYPE html> Deklarasi pada HTML 5.
Tidak ada DTD dalam HTML 5. Oleh karena itu, tag <DOCTYPE html!> FPI PUBLIK dan identifier SISTEM bisa dihilangkan pada struktur bagian atas HTML5.
Contoh sistem deklarasi dan sistem identifikasi pada HTML 4 dan XHTML 1.0
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Anda dapat menggantinya semua kode diatas dengan valid ! DOCTYPE untuk  HTML 5 yang lebih pendek, berikut :
HTML5 DOCTYPE
<!DOCTYPE html>

Secara lengkap umumnya HTML versi sebelumnya menggunakan <! DOCTYPE html> seperti dibawah ini, pada HTML 5 Anda hanya perlu menghilangkan/kode yang di beri tanda Strikethrough.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Sehingga DOCTYPE untuk HTML 5 hanya perlu satu kode deklarasi pendek, seperti ini :
<!DOCTYPE html>


Setelah Anda selesai merubah DOCTYPE, selanjutnya perubahan deklarasi xmlns, atau sering diawali dengan kode <xmlns:>. Karena tidak ada referensi DTD lagi dalam HTML 5, maka tidak diperlukan lagi deklarasi XML eksternal pada struktur dokumen. Anda bisa menghapusnya deklarasi xmlns tersebut dengan aman.
Contoh xmlns (XML Namespace) pada XHTML atau HTML versi sebelumnya kurang lebih seperti berikut :
<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'>

Kalau dokumen Anda menggunakan XHTML , kode  tersebut dapat Anda temukan, setelah dibawah kode <! DOCTYPE html>, hapus saja kode-kode yang berwarna merah sehingga hanya ada <html>. Akar dokumen Anda harus "html". Karena tidak ada standar bahasa resmi di HTML5, Anda harus selalu menentukan bahasa eksplisit.
Contoh seperti ini :
<html lang="en">


Pada bagian <head> biasanya memiliki beberapa informasi set karakter (character set), meta data dan link ke stylesheet CSS.  Yang paling atas adalah tag charset atau tag character encoding  , yang Anda lihat sekarang mungkin akan seperti ini:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

So, pada HTML 5 Anda dapat mempersingkatnya menjadi :
<meta charset="utf-8">

Untuk link stylesheet, secara eksplisit mendefinisikan sebagai stylesheet CSS, pada HTML 5 jenis atribut ( type attribut) "type="text/css" dapat dibuang, ini juga berlaku untuk Javascript, tidak perlu memasang type="text/javascript" lagi.

Contoh penulisan link stylesheet di HTML 5 :
<link rel="stylesheet" type="text/css" href="...">
Boleh juga tidak menggunakan attribut type, sehingga menjadi :
<link rel="stylesheet" href="...">

Contoh untuk script :
<script type="text/javascript" src="....js"></script>
Anda boleh menghilangkan attribut type Javascript, menjadi:
<script src=".....js"></script>

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):

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Judul Blog</title> <!-- meta tags --> <meta name="keywords" content=""> <meta name="description" content=""> <!-- stylesheets --> <link rel="stylesheet" href="css/reset.css"> <!-- javascript --> <script src="js/jquery-1.3.2.min.js"></script> <!--conditional comments --> <!--[if IE]> <script src="js/html5.js"></script> <![endif]--> </head>
Untuk lay-out atau CSS Anda bisa menggunakan link "stylesheet" eksternal, seperti diatas, atau juga internal dengan penulisan <style>..code CSS...</style>.

Penambahan <script src="js/html5.js"></script>, ini berfungsi sebagai hack via Javascript untuk IE 8 kebawah. Ini karena browser IE (khsusunya dibawah IE 9) tidak bisa mengenali atau render dari elemen-elemen baru HTML 5 (seperti <header>,<footer>, dan <aside>). Jadi perlu Anda memasang script tersebut, yang secara lengkap Anda juga dapat menulisnya seperti ini :

<!--[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:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title</title> <!-- meta tags --> <meta name="keywords" content=""> <meta name="description" content=""> <!-- stylesheets --> <style> /* ~~~~~~~~~ layout ~~~~~~~~~~ */ #container {width: 840px;margin: 20px auto;background: #fff;padding: 30px;overflow: hidden;} /* ~~~~~~~~~ header ~~~~~~~~~~ */ #main-navigation {border-bottom: 5px solid #3942A3;margin: 20px 0;} #main-navigation ul {overflow: hidden;width: 100%;list-style: none;font-size: 1.6em;}#main-navigation li {float: left;} #main-navigation li a {background: #3972A3;margin: 0 5px 0 0;padding: 5px 30px;display: block;color: #000000;text-decoration: none;} #main-navigation li.current a {background: #666;} #main-navigation li a:hover {background: #777; } /* ~~~~~~~~~ article ~~~~~~~~~~ */ article {width: 100%;overflow: hidden;} section {float: left;width: 500px;} /* ~~~~~~~~~ aside ~~~~~~~~~~ */ aside {float: right;width: 310px;} /* ~~~~~~~~~ footer ~~~~~~~~~~ */ footer {width: 840px;margin: 20px auto;font-size: 1.4em;text-align: right;} /* ~~~~~~~~~ common ~~~~~~~~~~ */ body, select, input, textarea {font: 0.625em/1.4 tahoma, verdana, arial, helvetica, sans-serif;color: #333;} body {background: #ccc;} h1 {font-weight: normal;color: #666;font: 3.2em/1.4 georgia, 'times new roman', times, serif;margin: 0.2em 0 0;} h2 {font-weight: normal;color: #666;font: 2.4em/1.4 georgia, 'times new roman', times, serif;margin: 0.2em 0; } section p, section ul, section ol, aside p, aside ul, aside ol {font-size: 1.4em;margin: 1em 0;} section ul {margin-left: 1em;} section ol {margin-left: 1.4em;} /* ~~~~~~~~~ generic ~~~~~~~~~~ */ html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,strong, sub, sup, tt, var, legend, fieldset {margin: 0;padding: 0;} img {vertical-align: bottom;} img, fieldset {border: 0;} html {overflow-y: scroll;} header, nav, section, article, figure, aside, footer {display: block;} </style> <!-- javascript --> <script src="js/jquery-1.3.2.min.js"></script> <!--conditional--> <!--[if IE]> <script src="js/html5.js"></script> <![endif]--> </head> <body class="home"> <div id="container"> <header id="page-header"> <div id="logo"><a href="/"><img src="http://1.bp.blogspot.com/-2-BJODrChlc/UG_omGNKrrI/AAAAAAAAC0M/ZFbwLFWMylo/s200/banner.png" alt="HTML5 Standard"></a></div> <nav id="main-navigation"> <ul> <li class="current"><a href="#">Home</a></li> <li style="color: red;"><a href="#">About</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <article id="page-content"> <section> <hgroup> <h1>Pemahaman HTML5</h1> <h2>Demo HTML5 Template</h2> </hgroup> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <h2>HTML 5 Item</h2> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul> <ol> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ol> </section> <aside> <h2>Artikel Terkait</h2> <p>Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit.</p> </aside> </article> </div> <footer> &copy; Copyright Problogiz 2013 </footer> </body> </html>

Hasil dari dokumen HTML 5 untuk website standar diatas akan seperti gambar dibawah:

HTML 5 untuk website standar

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!

Artikel Terkait Lainnya:
Click here for comments

25 komentar

Mantab mas, izin untuk mempelajarinya dulu ya.

REPLY

tetp masih pusing..
kalau kita tetap menggunakan templete yang sekarang apakah ada pengaruh nya terhadap search engine?

REPLY

sip mas widodo
silahkan:)

REPLY

oh sama sekali ngga mas
ini cuma versi html terbaru, yang bakalan rekomendasi w3c (pengganti XHTML 1.0/HTML 4.0)
santai aja:)

REPLY

agak berat juga, dan sebagian error di w3 sudah saya perbaiki meskipun masih tetap banyak, bertahap dulu, soalnya kalau mau sempurna semua (seo, loadspeed) sulit. terima kasih infonya gan, menambah info tentang html5. adapun blog saya yg lain sudah pakai template html5

REPLY

makasih gan udah ane coba sekarang errornya sudah berkurang....

REPLY

iya mas, harus satu-satu memang

REPLY

Problogiz, keren nih, di validator cuma 1 Error, 3 warning(s) :D
gimana ya caranya biar blog qt minim error + warningnya? blog q ketika blm ada postnya ( tidak ada entri) punya 7 error, 18 warning9(s). Tapi ketika aq publish post, selalu naik, jadi 24, 50 begitu, ketika tambah post baru, tambah lagi, kira2 apa gan? :D thx a lot

maaf OOT

REPLY

kemungkinan postingannya mas yang ga valid, kan setiap posting baru otomatis tampil di halaman (depan)homepage, lebih baik lagi jika Anda lampirkan deskripsi errornya apa:)
thanks,
nti saya juga post artikel macam2 error W3c Validator serta cara memperbaikinya

REPLY

aq jg pikir gitu, tp setelah mengarungi lautan google blm ketemu yg bicara soal posting hehehe, dulunya 200an error, setelah ku kosongkan dan perbaiki html template, jadi 7 error.

ini beberapa "jenis" errornya
1. reference to external entity in attribute value
2. general entity "zx" not defined and no default entity
3. there is no attribute "trbidi", there is no attribute "source", there is no attribute "href"
4. reference not terminated by REFC delimiter
5. cannot generate system identifier for general entity "from"
6. reference to entity "postID" for which no system identifier could be generated
7. character "&" is the first character of a delimiter but occurred as data

hehehe banyak ya :D dan karena masih noob kalau mau edit sourcecode yg ditunjukin sama validator kog g ketemu2 ya?

blog yg aq buat itu al-uyeah2.blogspot.com makasih sebelumnya :D

REPLY

ok mas, ini coba solusinya (semoga berhasil) :
1. sumber eror general entity "zx" tidak dikenali, ada di ekternal link stylesheet, line 21 (terbanyak):
<link type="text/css" rel="stylesheet" href=.....zx=92c4e2e6-bf06-4c52-a3a5-23a6fd294624"/>
Coba hapus dan Anda gunakan CSS internal (pasang ditemplate) aja:
div.pid-698764645 { display:block; }
span.pid-698764645 { display:inline; }

2. yang kedua terletak pada kode javascript, di line 688. Disini kebanyakan eror karena unencoded ampersands pada simbol(&, jadi anda perlu mengganti semua simbol & dengan kode "&amp;"

3. jika kode error tidak ditemukan source code, berarti kode eror itu letaknya di widget

Coba aja dulu mas ya, kemudian lihat hasilnya, semoga berkurang errornya:)
kasi tau hasilnya:)
btw, km ga pke html5,tapi XHTML 1.0 Strict

REPLY

waduh, hihihi bahasane tinggi buat noob kayak aq, :D oke aq coba dulu. Nanti aq cek validnya hehehe makasih yosh. Apa sekalian ganti aja ya? oh ya, meski post cuma judul sama 1 kata juga nambah error ternyata hehehe...

REPLY

Langsung dicoba sob... sangat bermanfaat :)

REPLY

ok mas silahkan:)
good luck!!

REPLY

ralat:
eror no 1 itu bawaan blogger mas,eksternal link stylesheet dari bloggger. tidak bisa kecuali team Blogger sendiri
thanks

REPLY

Bagus sekali postingannya mas bro..kpn2 bisa dipraktekkan..
Oya, au tanya nim mas, di blog ane masih ada kode html yang error seperti dibawah ini:
Line 31, Column 123: general entity "zx" not defined and no default entity
….css?targetBlogID=1189168203653623260&zx=aec106b5-ee5a-4e37-821d-26c23f5e294a"…
This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
Kode di atas ane cari tapi nggk ketemu2, pusing ah jadinya. Oya, ane pake yg xhtml 1.0 transititional..
Mohon solusinya kalo emang mas bro tau. Thanks alot

REPLY

error itu berada di link stylesheet dari Bloggger.com,hanya mereka yang bisa memperbaiki sudah saya ekxpose di artikel http://problogiz.blogspot.com/2013/01/kumpulan-eror-validasi-html-dan.html

REPLY

masih belum paham, harus terus belajar nih.....terima kasih tutorialnya gan

REPLY

Harus dipelajari dulu ini mah...
Thanks bro sudah berbagi ilmu yang bermanfaat :)

REPLY

this one really solves me a lot of headache part 1 is done and hope to implement this one
html5

REPLY

mantab gan ane mau coba eror ente cuma 1 gan salut sah

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|