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

Coba Sendiri

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>

Coba Sendiri

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

Coba Sendiri

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

Coba Sendiri

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;
}

Coba Sendiri

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>

Coba Sendiri

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>

Coba Sendiri

Ke HTML5 <section>

Ubah elemen <div> dengan id="content":

<div id="content">
.
.
.
</div>

Ubah ke elemen semantik HTML5 <section>:

<section>
.
.
.
</section>

Coba Sendiri

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>

Coba Sendiri

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;
}

Coba Sendiri

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>

Coba Sendiri

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>

Coba Sendiri

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

Coba Sendiri

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

Coba Sendiri