Pindahan HTML5

从 HTML4 迁移至 HTML5

本章讲解如何从一张典型的 HTML4 页面迁移至典型的 HTML5。

本章演示如何把一张已有的 HTML4 页面转换为 HTML5 页面，在不破坏如何原始内容和结构的情况下。

Keterangan:您可以使用相同的技巧从 HTML4 以及 XHTML 迁移至 HTML5。

典型的 HTML4 典型的 HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

典型的 HTML4 页面

实例

!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>News</li>
    <li>Sports</li>
    <li>Weather</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

Tukar kepada Doctype HTML5

Ubah jenis dokumen daripada doctype HTML4:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Ubah kepada doctype HTML5:

<!DOCTYPE html>

Coba Sendiri

Tukar kepada pengkodan HTML5

Ubah maklumat pengkodan daripada HTML4:

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

Tukar kepada HTML5:

<meta charset="utf-8">

Coba Sendiri

Tambahkan shiv

Semua pelayar moden mendukung elemen semantik HTML5.

Selain itu, anda boleh "mengajar" pelayar lama bagaimana untuk menghadapi elemen yang tak dikenali.

Tambahkan shiv untuk keupayaan 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 dalam keupayaan pereka pelayar 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;
}
Dulukan 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

Ke HTML5 <header> dan <footer>

Tukar elemen <div> yang mempunyai id="header" dan id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</div>

修改为 HTML5 语义元素 <header> 和 <footer>：

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</footer>

Coba Sendiri

更改为 HTML5 <nav>

把 id="menu" 的 <div> 元素：

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</div>

修改为 HTML5 语义元素 <nav>：

<nav>
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</nav>

Coba Sendiri

更改为 HTML5 <section>

把 id="content" 的 the <div> 元素：

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

修改为 HTML5 语义元素 <section>：

<section>
.
.
.
</section>

Coba Sendiri

更改为 HTML5 <article>

把 class="post" 的所有 <div> 元素：

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

修改为 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

删除这些“不再需要的”样式：

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

典型的 HTML5 页面

最后您可以删除 <head> 标签。HTML5 中不再需要它们：

实例

<!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>News</li>
    <li>Sports</li>
    <li>Weather</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 antara <article> <section> dan <div> sangat kecil, yang menyebabkan kebingungan.

Dalam standar HTML5, elemen <section> ditempatkan sebagai blok elemen yang relevan.

Elemen <article> ditentukan sebagai blok yang penuh dan terkandung elemen yang relevan.

Elemen <div> ditentukan sebagai blok anak.

Bagaimana mengerti itu？

Dalam contoh di atas, kami telah menggunakan <section> sebagai wadah untuk <articles> yang relevan.

Namun, kami juga dapat menggunakan <article> sebagai wadah artikel.

Berikut adalah beberapa contoh yang berbeda：

Dalam <article> terdapat <article>：
<article>
<h2>Bandar Terkenal</h2>
<article>
<h2>London</h2>
<p>London adalah ibu kota kota Inggris. Ini adalah kota yang paling padat di United Kingdom,</p>
<p> dengan kawasan metropolitan 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 Kawasan Besar Tokyo,</p>
dan kawasan metropolitan yang paling padat di dunia.</p>
</article>
</article>

Coba Sendiri

<div> di dalam <article>：</div>
<article>
<h2>Bandar Terkenal</h2>
<div class="city">
<h2>London</h2>
<p>London adalah ibu kota kota Inggris. Ini adalah kota yang paling padat di United Kingdom,</p>
<p> dengan kawasan metropolitan 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 Kawasan Besar Tokyo,</p>
dan kawasan metropolitan yang paling padat di dunia.</p>
</div>
</article>

Coba Sendiri

<section> di dalam <article> yang berisi <div>：</section>
<article>
<section>
<h2>Bandar Terkenal</h2>
<div class="city">
<h2>London</h2>
<p>London adalah ibu kota kota Inggris. Ini adalah kota yang paling padat di United Kingdom,</p>
<p> dengan kawasan metropolitan 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 Kawasan Besar Tokyo,</p>
dan kawasan metropolitan 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 United Kingdom,</p>
<p> dengan kawasan metropolitan 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 Kawasan Besar Tokyo,</p>
dan kawasan metropolitan yang paling padat di dunia.</p>
</div>
</section>
</article>

Coba Sendiri