Pindah HTML5
- Halaman Sebelumnya Elemen HTML5
- Halaman Berikutnya Geolokasi HTML5
Migrasi dari HTML4 ke HTML5
Bab ini menjelaskan bagaimana mengemigrasi dari halaman HTML4 tipikal ke HTML5 tipikal.
Bab ini menunjukkan bagaimana mengkonversi halaman HTML4 yang sudah ada ke halaman HTML5 tanpa merusak konten asli dan strukturnya.
Keterangan:Anda dapat menggunakan teknik yang sama untuk migrasi dari HTML4 dan XHTML ke HTML5.
HTML4 tipikal | HTML5 tipikal |
---|---|
<div id="header"> | <header> |
<div id="menu"> | <nav> |
<div id="content"> | <section> |
<div id="post"> | <article> |
<div id="footer"> | <footer> |
Halaman HTML4 tipikal
Contoh
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>HTML4</title> <style> body {font-family:Verdana,sans-serif;font-size:0.8em;} div#header,div#footer,div#content,div#post {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;} div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;} div#content {background-color:#ddd;} div#menu ul {margin:0;padding:0;} div#menu ul li {display:inline; margin:5px;} </style> </head> <body> <div id="header"> <h1>Monday Times</h1> </div> <div id="menu"> <ul> <li> berita</li> <li> olahraga</li> <li> cuaca</li> </ul> </div> <div id="content"> <h2>Bagian Berita</h2> <div id="post"> <h2>Artikel Berita</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> <div id="post"> <h2>Artikel Berita</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> </div> <div id="footer"> <p>© 2014 Monday Times. Hak cipta disimpan.</p> </div> </body> </html>
Menjadi Doctype HTML5
Ubah jenis dokumen dari doctype HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Ubah menjadi doctype HTML5:
<!DOCTYPE html>
Menjadi enkoding HTML5
Ubah informasi enkoding dari HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Ubah menjadi HTML5:
<meta charset="utf-8">
Tambahkan shiv
Semua browser modern mendukung elemen semantik HTML5.
Selain itu, Anda dapat "mengajar" browser lama bagaimana menangani elemen "tidak dikenal".
Tambahkan shiv untuk dukungan Internet Explorer:
<![if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Keterangan:Baca lebih banyak tentang shiv di dukungan browser HTML5.
Tambahkan CSS untuk elemen semantik HTML5
Lihat gaya CSS yang sudah ada:
div#header,div#footer,div#content,div#post { border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white; } div#header,div#footer { color:white;background-color:#444;margin-bottom:5px; } div#content { background-color:#ddd; } div#menu ul { margin:0;padding:0; } div#menu ul li { display:inline; margin:5px; } Gandakan dengan gaya CSS yang sama untuk elemen semantik HTML5: header,footer,section,article { border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white; } header,footer { color:white;background-color:#444;margin-bottom:5px; } section { background-color:#ddd; } nav ul { margin:0;padding:0; } nav ul li { display:inline; margin:5px; }
Menjadi HTML5 <header> dan <footer>
Ubah elemen <div> dengan id="header" dan id="footer":
<div id="header"> <h1>Monday Times</h1> </div> . . . <div id="footer"> <p>© 2016 CodeW3C.com. Hak Cipta disimpan.</p> </div>
Ubah ke elemen semantik HTML5 <header> dan <footer>:
<header> <h1>Monday Times</h1> </header> . . . <footer> <p>© 2016 CodeW3C.com. Hak cipta disimpan.</p> </footer>
Ke HTML5 <nav>
Ubah elemen <div> dengan id="menu":
<div id="menu"> <ul> <li> berita</li> <li>Sports</a></li> <li> cuaca</li> </ul> </div>
Ubah ke elemen semantik HTML5 <nav>:
<nav> <ul> <li> berita</li> <li>Sports</a></li> <li> cuaca</li> </ul> </nav>
Ke HTML5 <section>
Ubah elemen <div> dengan id="content":
<div id="content"> . . . </div>
Ubah ke elemen semantik HTML5 <section>:
<section> . . . </section>
Ke HTML5 <article>
Ubah semua elemen <div> dengan class="post":
<div class="post"> <h2>Artikel Berita</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div>
Ubah ke elemen semantik HTML5 <article>:
<article> <h2>Artikel Berita</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </article>
Hapus gaya yang 'tidak lagi diperlukan':
div#header,div#footer,div#content,div#post { border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white; } div#header,div#footer { color:white;background-color:#444;margin-bottom:5px; } div#content { background-color:#ddd; } div#menu ul { margin:0;padding:0; } div#menu ul li { display:inline; margin:5px; }
Halaman HTML5 tipikal
Akhirnya Anda dapat menghapus tag <head>. Dalam HTML5, mereka tidak lagi diperlukan:
Contoh
<!DOCTYPE html> <html lang="en"> <title>HTML5</title> <meta charset="utf-8"> <![if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> body { font-family:Verdana,sans-serif;font-size:0.8em; } header,footer,section,article { border:1px solid grey; margin:5px;margin-bottom:15px;padding:8px; background-color:white; } header,footer { color:white;background-color:#444;margin-bottom:5px; } section { background-color:#ddd; } nav ul { margin:0;padding:0; } nav ul li { display:inline; margin:5px; } </style> <body> <header> <h1>Monday Times</h1> </header> <nav> <ul> <li> berita</li> <li> olahraga</li> <li> cuaca</li> </ul> </nav> <section> <h2>Bagian Berita</h2> <div id="post"> <h2>Artikel Berita</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> <div id="post"> <h2>Artikel Berita</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> </section> <footer> <p>© 2014 Monday Times. Hak cipta disimpan.</p> </footer> </body> </html>
Perbedaan antara <article>, <section>, dan <div>:
Dalam standar HTML5, perbedaan yang kecil antara <article>, <section>, dan <div> dapat membingungkan.
Dalam standar HTML5, elemen <section> ditempatkan sebagai blok untuk elemen yang relevan.
Elemen <article> didefinisikan sebagai blok yang kompletny dan bersamaan untuk elemen yang relevan.
Elemen <div> didefinisikan sebagai blok anak.
Bagaimana memahami itu?
Dalam contoh di atas, kami telah menggunakan <section> sebagai wadah untuk <articles> yang relevan.
Tetapi, kami juga dapat menggunakan <article> sebagai wadah artikel.
Berikut adalah beberapa contoh yang berbeda:
Elemen <article> di dalam <article>: <article> <h2>Kota Terkenal</h2> <article> <h2>London</h2> <p>London adalah ibu kota kota Inggris. Ini adalah kota yang paling padat di Inggris,</p> <p>dengan daerah metropolis yang mencapai lebih dari 13 juta penduduk.</p> </article> <article> <h2>Paris</h2> <p>Paris adalah ibu kota dan kota yang paling padat di Perancis.</p> </article> <article> <h2>Tokyo</h2> <p>Tokyo adalah ibu kota Jepang, pusat wilayah yang luas Tokyo,</p> dan daerah metropolis yang paling padat di dunia.</p> </article> </article>
<div> dalam <article>:</div> <article> <h2>Kota Terkenal</h2> <div class="city"> <h2>London</h2> <p>London adalah ibu kota kota Inggris. Ini adalah kota yang paling padat di Inggris,</p> <p>dengan daerah metropolis yang mencapai lebih dari 13 juta penduduk.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris adalah ibu kota dan kota yang paling padat di Perancis.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo adalah ibu kota Jepang, pusat wilayah yang luas Tokyo,</p> dan daerah metropolis yang paling padat di dunia.</p> </div> </article>
<section> dalam <article> dan <div>:</section> <article> <section> <h2>Kota Terkenal</h2> <div class="city"> <h2>London</h2> <p>London adalah ibu kota kota Inggris. Ini adalah kota yang paling padat di Inggris,</p> <p>dengan daerah metropolis yang mencapai lebih dari 13 juta penduduk.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris adalah ibu kota dan kota yang paling padat di Perancis.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo adalah ibu kota Jepang, pusat wilayah yang luas Tokyo,</p> dan daerah metropolis yang paling padat di dunia.</p> </div> </section> <section> <h2>Negara Terkenal</h2> <div class="country"> <h2>Inggris</h2> <p>London adalah ibu kota kota Inggris. Ini adalah kota yang paling padat di Inggris,</p> <p>dengan daerah metropolis yang mencapai lebih dari 13 juta penduduk.</p> </div> <div class="country"> <h2>Perancis</h2> <p>Paris adalah ibu kota dan kota yang paling padat di Perancis.</p> </div> <div class="country"> <h2>Jepang</h2> <p>Tokyo adalah ibu kota Jepang, pusat wilayah yang luas Tokyo,</p> dan daerah metropolis yang paling padat di dunia.</p> </div> </section> </article>
- Halaman Sebelumnya Elemen HTML5
- Halaman Berikutnya Geolokasi HTML5