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

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:

So, pada HTML 5 Anda dapat mempersingkatnya menjadi :

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 :

Boleh juga tidak menggunakan attribut type, sehingga menjadi :

Contoh untuk script :

Anda boleh menghilangkan attribut type Javascript, menjadi:

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 :

Gantilah menjadi seperti ini :

Selanjutnya bagian post :
Ganti

menjadi

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 :

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.

Anda bisa merubahnya menjadi seperti ini:

Dan untuk bagian footer :

Ganti menjadi seperti ini :

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1FrozMxewKWEUdH70WSY-5npscHETiwJlUDheH3RvdSLCe3EX3rfjzXOf7dMBqV8iQ62en2R0rREKZ-gsjXU2YHyq9vmoQSem_bi_-0_Xcyxd6gg7nf1cfd1Xfb_VaaTkXgQeqb6w_F_O/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:

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!

26 komentar

mbogo.net

13 Januari 2013 pukul 20.23

Mantab mas, izin untuk mempelajarinya dulu ya.

Hari Muhlia

13 Januari 2013 pukul 22.15

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

Unknown Author

13 Januari 2013 pukul 22.24

sip mas widodo
silahkan:)

13 Januari 2013 pukul 22.27

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

13 Januari 2013 pukul 23.37

oke lah kalau begitu,, ;D

putra kholifah harun ar rosyid

14 Januari 2013 pukul 08.29

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

Diki satrio

14 Januari 2013 pukul 21.48

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

14 Januari 2013 pukul 23.33

iya mas, harus satu-satu memang

14 Januari 2013 pukul 23.34

siiplah bos:)

Mimin

15 Januari 2013 pukul 08.00

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

15 Januari 2013 pukul 12.26

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

15 Januari 2013 pukul 13.02

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

15 Januari 2013 pukul 15.09

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 "&"

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

15 Januari 2013 pukul 20.03

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...

Diansah

15 Januari 2013 pukul 21.20

Langsung dicoba sob... sangat bermanfaat :)

15 Januari 2013 pukul 22.45

ok mas silahkan:)
good luck!!

29 Januari 2013 pukul 17.08

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

Yusuf

2 Februari 2013 pukul 13.04

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

2 Februari 2013 pukul 14.45

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

Anonim

26 Februari 2013 pukul 19.13

artike bagus

Simawar Enterprise

11 Maret 2013 pukul 14.47

Mantap,ikut berbenah diri gan

phen

12 April 2013 pukul 17.46

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

Minato Hienzo

14 November 2013 pukul 07.51

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