การเปลี่ยนแปลง HTML5

การเปลี่ยนจาก HTML4 ไปยัง HTML5

บทบาทนี้อธิบายวิธีการเปลี่ยนจากหน้า HTML4 ทั่วไปไปยัง HTML5 ทั่วไป。

บทบาทนี้แสดงวิธีการเปลี่ยนหน้า HTML4 ที่มีอยู่แล้วเป็นหน้า HTML5 โดยไม่ทำลายเนื้อหาและโครงสร้างเดิม。

หมายเหตุ:คุณสามารถใช้ทั้งยธรรมเนียมเดียวกันเพื่อเปลี่ยนจาก 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>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. All rights reserved.</p>
</div>
</body>
</html>

ลองด้วยตัวเอง

เปลี่ยนเป็น Doctype HTML5

แก้ไข doctype จาก HTML4:

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

แก้ไขเป็น doctype HTML5:

<!DOCTYPE html>

ลองด้วยตัวเอง

เปลี่ยนเป็นการเข้ารหัส HTML5

แก้ไขข้อมูลการเข้ารหัสจาก HTML4:

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

เปลี่ยนเป็น HTML5:

<meta charset="utf-8">

ลองด้วยตัวเอง

เพิ่ม shiv

บราวเซอร์ทุกตัวสมัยใหม่สนับสนุนองค์ประกอบทาง HTML5

นอกจากนี้ คุณสามารถ "สอน

shiv ที่เพิ่มเติมเพื่อสนับสนุน Internet Explorer:

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

ลองด้วยตัวเอง

หมายเหตุ:อ่านเพื่อได้รู้เกี่ยวกับ 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>

แก้ไข id="header" และ id="footer" ขององค์ประกอบ <div> ดังนี้:

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 โค้ดเวิลด์3ซีคอม. สิทธิ์ทั้งหมดถูกปกป้อง.</p>
</div>

แก้ไขเป็นสมานุภาพที่มีความหมายของ HTML5 ว่า <header> และ <footer>

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

ลองด้วยตัวเอง

เป็น HTML5 <nav>

แก้ไข <div> ที่มี id="menu"

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

ลองด้วยตัวเอง

เป็น HTML5 <section>

แก้ไข the <div> ที่มี id="content"

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

แก้ไขเป็นสมานุภาพที่มีความหมายของ HTML5 ว่า <section>

<section>
.
.
.
</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>

ลองด้วยตัวเอง

ลบสไตล์ที่ "ไม่จำเป็นต้องมี" ออก

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>
<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. All rights reserved.</p>
</footer>
</body>
</html>

ลองด้วยตัวเอง

ความแตกต่างระหว่าง <article> <section> และ <div>

ในมาตราฐาน HTML5 ตัวแทน <article> <section> และ <div> มีความแตกต่างน้อยและทำให้เกิดความสับสน

ในมาตราฐาน HTML5 ตัวแทน <section> ถูกจัดให้เป็นองค์ประกอบที่เป็นบล็อค

<article> มีการกำหนดให้เป็นองค์ประกอบที่เป็นบล็อคที่มีความเกี่ยวข้องทั้งหมด

<div> มีการกำหนดให้เป็นองค์ประกอบขององค์ประกอบเป็นบล็อค

แล้วจะเข้าใจได้อย่างไร?

ในตัวอย่างที่ผ่านมา เราได้ใช้ <section> ในฐานะตัวแทนของบทความที่เกี่ยวข้อง

แต่เราก็สามารถใช้ <article> ในฐานะตัวแทนของบทความได้

ต่อไปนี้คือตัวอย่างที่มีความแตกต่างกัน：

จาก <article> ถึง <article>：
<article>
<h2>เมืองที่โดดเด่น</h2>
<article>
<h2>ลอนดอน</h2>
<p>ลอนดอนเป็นเมืองหลวงของอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร,</p>
<p>โดยมีเขตเมืองที่มีประชากรเกิน 13 ล้านคน。</p>
</article>
<article>
<h2>ปารีส</h2>
<p>ปารีสเป็นเมืองหลวงและเมืองที่มีประชากรมากที่สุดของฝรั่งเศส。</p>
</article>
<article>
<h2>โตเกียว</h2>
<p>โตเกียวเป็นเมืองหลวงของญี่ปุ่น ศูนย์กลางของเขตโตเกียวกว้างขวาง,</p>
และเมืองหลวงที่มีประชากรมากที่สุดในโลก。</p>
</article>
</article>

ลองด้วยตัวเอง

<article> ประกอบด้วย <div>：
<article>
<h2>เมืองที่โดดเด่น</h2>
<div class="city">
<h2>ลอนดอน</h2>
<p>ลอนดอนเป็นเมืองหลวงของอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร,</p>
<p>โดยมีเขตเมืองที่มีประชากรเกิน 13 ล้านคน。</p>
</div>
<div class="city">
<h2>ปารีส</h2>
<p>ปารีสเป็นเมืองหลวงและเมืองที่มีประชากรมากที่สุดของฝรั่งเศส。</p>
</div>
<div class="city">
<h2>โตเกียว</h2>
<p>โตเกียวเป็นเมืองหลวงของญี่ปุ่น ศูนย์กลางของเขตโตเกียวกว้างขวาง,</p>
และเมืองหลวงที่มีประชากรมากที่สุดในโลก。</p>
</div>
</article>

ลองด้วยตัวเอง

<article> ประกอบด้วย <section> ประกอบด้วย <div>：
<article>
<section>
<h2>เมืองที่โดดเด่น</h2>
<div class="city">
<h2>ลอนดอน</h2>
<p>ลอนดอนเป็นเมืองหลวงของอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร,</p>
<p>โดยมีเขตเมืองที่มีประชากรเกิน 13 ล้านคน。</p>
</div>
<div class="city">
<h2>ปารีส</h2>
<p>ปารีสเป็นเมืองหลวงและเมืองที่มีประชากรมากที่สุดของฝรั่งเศส。</p>
</div>
<div class="city">
<h2>โตเกียว</h2>
<p>โตเกียวเป็นเมืองหลวงของญี่ปุ่น ศูนย์กลางของเขตโตเกียวกว้างขวาง,</p>
และเมืองหลวงที่มีประชากรมากที่สุดในโลก。</p>
</div>
</section>
<section>
<h2>ประเทศที่โดดเด่น</h2>
<div class="country">
<h2>อังกฤษ</h2>
<p>ลอนดอนเป็นเมืองหลวงของอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร,</p>
<p>โดยมีเขตเมืองที่มีประชากรเกิน 13 ล้านคน。</p>
</div>
<div class="country">
<h2>ฝรั่งเศส</h2>
<p>ปารีสเป็นเมืองหลวงและเมืองที่มีประชากรมากที่สุดของฝรั่งเศส。</p>
</div>
<div class="country">
<h2>ญี่ปุ่น</h2>
<p>โตเกียวเป็นเมืองหลวงของญี่ปุ่น ศูนย์กลางของเขตโตเกียวกว้างขวาง,</p>
และเมืองหลวงที่มีประชากรมากที่สุดในโลก。</p>
</div>
</section>
</article>

ลองด้วยตัวเอง