Pagsasali ng HTML5

从 HTML4 迁移至 HTML5

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

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

Komento:您可以使用相同的技巧从 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 页面

Mga halimbawa

<!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>News Section</h2>
<div id="post">
  <h2>News Article</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>News Article</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. Lahat ng karapatan ay inaari.</p>
</div>
</body>
</html>

亲自试一试

Palitan sa HTML5 Doctype

Ayusin ang uri ng dokumento, mula sa HTML4 doctype:

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

Ayusin bilang HTML5 doctype:

<!DOCTYPE html>

亲自试一试

Palitan sa HTML5 encoding

Ayusin ang impormasyon ng pagsasalin, mula sa HTML4:

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

Palitan sa HTML5:

<meta charset="utf-8">

亲自试一试

Magdagdag ng shiv

Lahat ng modernong browser ay sumusuporta sa HTML5 semantic elements.

Bilang karagdagan, maaring "turohan" mo ang lumang browser kung paano hahawakan ang "unknown elements".

Shiv na idinagdag para sa suporta ng Internet Explorer:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

亲自试一试

Komento:Basahin pa ang higit pang kaalaman tungkol sa shiv sa pagbabasa sa suporta ng HTML5 browser.

Magdagdag ng CSS para sa HTML5 semantic elements

Ginawa na ang CSS na estilo:

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;
}
Kopyahin ang CSS style na katulad para sa HTML5 semantic elements:
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;
}

亲自试一试

Sa HTML5 <header> at <footer>

Palitan ang <div> na may id="header" at id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. Lahat ng karapatan ay ipinagbabawal.</p>
</div>

Gawing HTML5 na semantikong elemento <header> at <footer>:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. Lahat ng karapatan ay pinagyayari.</p>
</footer>

亲自试一试

.

Gawing HTML5 <nav> ang <div> na may id="menu":

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

Gawing HTML5 na semantikong elemento <nav>:

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

亲自试一试

.

Gawing HTML5 <section> ang the <div> na may id="content":

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

Gawing HTML5 na semantikong elemento <section>:

<section>
.
.
.
</section>

亲自试一试

.

Gawing HTML5 <article> ang lahat ng <div> na may class="post":

<div class="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

Gawing HTML5 na semantikong elemento <article>:

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

亲自试一试

Alisin ang mga "hindi na kailangan na" na estilo:

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

亲自试一试

Tinipong HTML5 na pahina

Hindi na kailangan na alisin ang <head> tag. Hindi na kailangan nila sa HTML5:

Mga halimbawa

<!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>News Section</h2>
<div id="post">
  <h2>News Article</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>News Article</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. Lahat ng karapatan ay inaari.</p>
</footer>
</body>
</html>

亲自试一试

Ang pagkakaiba ng <article>, <section> at <div>

Sa pamantayan ng HTML5, ang pagkakaiba ng <article>, <section> at <div> ay maliit at nakakalungkot.

Sa pamantayan ng HTML5, ang <section> na elemento ay na-locate bilang bloke ng mga kaugnay na elemento.

Ang <article> na elemento ay tinukoy bilang buong isang sariling kahon ng kaugnay na elemento.

Ang <div> na elemento ay tinukoy bilang bloke ng mga sub-elemento.

Paano ituturuan iyon?

Sa mga nakaraang halimbawa, gamit namin ang <section> bilang kahon ng mga kaugnay na <articles>.

Ngunit, maaari din naming gamitin ang <article> bilang kahon ng artikulo.

Narito ang ilang magkakaibang halimbawa:

Sa <article> ang <article> sa loob ng <article>:
<article>
<h2>Pangunahing Lungsod</h2>
<article>
<h2>London</h2>
<p>London ang kabisera ng Inglatera. Ito ang pinakamaraming populasyon na lungsod sa United Kingdom,</p>
<p>na may metropolitan area na may higit sa 13 milyong naninirahan.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris ang kabisera at pinakamaraming populasyon na lungsod ng Pransya.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo ay ang kabisera ng bansang Hapon, ang sentro ng Lumalaking Tokyo Area,</p>
at ang pinakamaraming populasyon na metropolitan area sa mundo.</p>
</article>
</article>

亲自试一试

<article> sa <div>：
<article>
<h2>Pangunahing Lungsod</h2>
<div class="city">
<h2>London</h2>
<p>London ang kabisera ng Inglatera. Ito ang pinakamaraming populasyon na lungsod sa United Kingdom,</p>
<p>na may metropolitan area na may higit sa 13 milyong naninirahan.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris ang kabisera at pinakamaraming populasyon na lungsod ng Pransya.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo ay ang kabisera ng bansang Hapon, ang sentro ng Lumalaking Tokyo Area,</p>
at ang pinakamaraming populasyon na metropolitan area sa mundo.</p>
</div>
</article>

亲自试一试

<article> sa <section> sa <div>：
<article>
<section>
<h2>Pangunahing Lungsod</h2>
<div class="city">
<h2>London</h2>
<p>London ang kabisera ng Inglatera. Ito ang pinakamaraming populasyon na lungsod sa United Kingdom,</p>
<p>na may metropolitan area na may higit sa 13 milyong naninirahan.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris ang kabisera at pinakamaraming populasyon na lungsod ng Pransya.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo ay ang kabisera ng bansang Hapon, ang sentro ng Lumalaking Tokyo Area,</p>
at ang pinakamaraming populasyon na metropolitan area sa mundo.</p>
</div>
</section>
<section>
<h2>Pangunahing mga Bansa</h2>
<div class="country">
<h2>England</h2>
<p>London ang kabisera ng Inglatera. Ito ang pinakamaraming populasyon na lungsod sa United Kingdom,</p>
<p>na may metropolitan area na may higit sa 13 milyong naninirahan.</p>
</div>
<div class="country">
<h2>France</h2>
<p>Paris ang kabisera at pinakamaraming populasyon na lungsod ng Pransya.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo ay ang kabisera ng bansang Hapon, ang sentro ng Lumalaking Tokyo Area,</p>
at ang pinakamaraming populasyon na metropolitan area sa mundo.</p>
</div>
</section>
</article>

亲自试一试