การย้ายถิ่นจาก HTML4 เป็น HTML5
บทนี้เป็นทั้งหมดเกี่ยวกับวิธีการโยกย้ายจาก HTML4 เป็น HTML5
ในบทนี้จะแสดงให้เห็นถึงวิธีการแปลงหน้า HTML4 เป็นหน้า HTML5 โดยไม่ต้องทำลายสิ่งที่มีเนื้อหาต้นฉบับหรือโครงสร้าง
คุณสามารถโยกย้ายจาก XHTML เป็น HTML5 โดยใช้สูตรเดียวกัน
| HTML4 ทั่วไป | HTML5 ทั่วไป |
|---|---|
| <div id="header"> | <header> |
| <div id="menu"> | <nav> |
| <div id="content"> | <section> |
| <div class="article"> | <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>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>&copy; 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html> ลองตัวเอง» เปลี่ยนเป็น HTML5 Doctype
เปลี่ยนประเภทเอกสารที่มาจากประเภทเอกสาร HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">กับประเภทเอกสาร HTML5:
เปลี่ยนเป็น HTML5 การเข้ารหัส
เปลี่ยนแปลงข้อมูลการเข้ารหัสจาก HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">เป็น HTML5:
เพิ่ม Shiv
HTML5 องค์ประกอบความหมายได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัย
นอกจากนี้คุณสามารถ "teach" เบราว์เซอร์รุ่นเก่าวิธีการจัดการ "unknown elements"
เพิ่ม the shiv สำหรับการสนับสนุน Internet Explorer:
ตัวอย่าง
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> ลองตัวเอง» อ่านข้อมูลเกี่ยวกับ the shiv ใน การสนับสนุนเบราว์เซอร์ HTML5
เพิ่ม CSS สำหรับ HTML5 ความหมายองค์ประกอบ
ดูรูปแบบ CSS ที่มีอยู่ของคุณ:
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;
}ซ้ำกับรูปแบบ CSS ที่เท่าเทียมกันสำหรับองค์ประกอบความหมาย 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;
} ลองตัวเอง» เปลี่ยนเป็น HTML5 <header> และ <footer>
เปลี่ยน <div> องค์ประกอบที่มี id="header" และ id="footer" :
<div id="header">
<h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
<p>&copy; 2014 w3ii. All rights reserved.</p>
</div>เป็น HTML5 ความหมาย <header> และ <footer> องค์ประกอบ:
ตัวอย่าง
<header>
<h1>Monday Times</h1>
</header>
.
.
.
<footer>
<p>© 2014 w3ii. All rights reserved.</p>
</footer> ลองตัวเอง» เปลี่ยนเป็น HTML5 <nav>
เปลี่ยน <div> องค์ประกอบด้วย id="menu" :
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>ไปยังความหมาย <nav> องค์ประกอบ HTML5:
เปลี่ยนเป็น HTML5 <section>
เปลี่ยน <div> องค์ประกอบที่มี id="content" :
<div id="content">
.
.
.
</div>ไปยัง HTML5 ความหมาย <section> องค์ประกอบ:
เปลี่ยนเป็น HTML5 <article>
เปลี่ยนทุก <div> องค์ประกอบที่มี 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>เป็น HTML5 ความหมาย <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> ลองตัวเอง» นำ "no longer needed" <style> องค์ประกอบ:
ตัวอย่าง
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;
} ลองตัวเอง» ทั่วไป 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>News Section</h2>
<article>
<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>
</article>
<article>
<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>
</article>
</section>
<footer>
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html> ลองตัวเอง» ความแตกต่างระหว่าง <article> <section> และ <div>
มีความสับสนคือ (lack of) ความแตกต่างใน HTML5 มาตรฐานระหว่าง <article> <section> และ <div>
ในมาตรฐาน HTML5 ที่ <section> องค์ประกอบที่ถูกกำหนดให้เป็นบล็อกขององค์ประกอบที่เกี่ยวข้อง
<article> องค์ประกอบที่ถูกกำหนดให้เป็นที่สมบูรณ์บล็อกตนเองมีขององค์ประกอบที่เกี่ยวข้อง
<div> องค์ประกอบที่ถูกกำหนดให้เป็นบล็อกขององค์ประกอบเด็ก
วิธีการตีความที่?
ในตัวอย่างข้างต้นเราได้ใช้ <section> เป็นภาชนะสำหรับที่เกี่ยวข้อง <articles>
แต่เราจะได้ใช้ <article> เป็นภาชนะสำหรับบทความได้เป็นอย่างดี
นี่คือตัวอย่างที่แตกต่างกัน:
<article> ใน <article> :
<article>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</article> ลองตัวเอง» <div> ใน <article> :
<article>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</article> ลองตัวเอง» <div> ใน <section> ใน <article> :
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
</article> ลองตัวเอง»