Di chuyển HTML5

Di chuyển từ HTML4 sang HTML5

Chương này giải thích cách chuyển đổi từ một trang web HTML4 tiêu chuẩn sang trang web HTML5 tiêu chuẩn.

Chương này trình bày cách chuyển đổi một trang web HTML4 hiện có thành trang web HTML5 mà không làm hỏng nội dung và cấu trúc ban đầu.

Ghi chú:Bạn có thể sử dụng kỹ thuật tương tự để di chuyển từ HTML4 và XHTML sang HTML5.

HTML4 tiêu chuẩn HTML5 tiêu chuẩn
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

Trang web HTML4 tiêu chuẩn

Mô hình

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

Thử ngay

Thay đổi thành Doctype HTML5

Chỉnh sửa loại tài liệu từ doctype HTML4:

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

Chỉnh sửa thành doctype HTML5:

<!DOCTYPE html>

Thử ngay

Thay đổi mã hóa thành HTML5

Chỉnh sửa thông tin mã hóa từ HTML4:

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

Thay đổi thành HTML5:

<meta charset="utf-8">

Thử ngay

Thêm shiv

Tất cả các trình duyệt hiện đại đều hỗ trợ các phần tử ngữ nghĩa HTML5.

Ngoài ra, bạn có thể "giáo dục" các trình duyệt cũ cách xử lý các phần tử "không biết".

Shiv được thêm để hỗ trợ Internet Explorer:

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

Thử ngay

Ghi chú:Xin đọc thêm về shiv trong phần hỗ trợ trình duyệt HTML5.

Thêm CSS cho các phần tử ngữ nghĩa HTML5

Xin xem các phong cách CSS đã có:

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;
}
Trùng lặp với các phong cách CSS bằng nhau cho các phần tử ngữ nghĩa 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;
}

Thử ngay

Sử dụng HTML5 <header> và <footer>

Thay đổi các phần tử <div> có id="header" và id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. Tất cả quyền lợi được bảo lưu.</p>
</div>

Chuyển đổi thành các yếu tố ngữ nghĩa HTML5 <header> và <footer>:

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

Thử ngay

thay đổi thành HTML5 <nav>

Chuyển đổi thẻ <div> có id="menu":

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

Chuyển đổi thành các yếu tố ngữ nghĩa HTML5 <nav>:

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

Thử ngay

thay đổi thành HTML5 <section>

Chuyển đổi thẻ <div> có id="content":

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

Chuyển đổi thành các yếu tố ngữ nghĩa HTML5 <section>:

<section>
.
.
.
</section>

Thử ngay

thay đổi thành HTML5 <article>

Chuyển đổi tất cả các thẻ <div> có 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>

Chuyển đổi thành các yếu tố ngữ nghĩa 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>

Thử ngay

Xóa các樣式 'không cần nữa':

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

Thử ngay

Trang web HTML5 tiêu chuẩn

Cuối cùng, bạn có thể xóa thẻ <head>. HTML5 không cần chúng nữa:

Mô hình

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

Thử ngay

Sự khác biệt giữa <article>, <section> và <div>:

Trong tiêu chuẩn HTML5, sự khác biệt giữa <article>, <section> và <div> rất nhỏ, dễ gây nhầm lẫn.

Trong tiêu chuẩn HTML5, thẻ <section> được định vị là khối của các phần liên quan.

Thẻ <article> được định nghĩa là khối tự bao gồm toàn bộ các phần liên quan.

Định nghĩa của thẻ <div> là khối của các thành phần con.

Làm thế nào để hiểu?

Trong ví dụ trên, chúng ta đã sử dụng <section> làm khối chứa các <articles> liên quan.

Nhưng, chúng ta cũng có thể sử dụng <article> làm khối chứa bài viết.

Dưới đây là một số ví dụ khác nhau:

Trong <article> có <article>:
<article>
<h2>Thành phố nổi tiếng</h2>
<article>
<h2>London</h2>
<p>London là thành phố thủ đô của Anh. Nó là thành phố đông dân nhất ở Vương quốc Anh,</p>
<p>với khu vực đô thị có hơn 13 triệu người.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris là thủ đô và thành phố đông dân nhất của Pháp.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo là thủ đô của Nhật Bản, trung tâm của Khu vực Tokyo lớn,</p>
và khu vực đô thị đông dân nhất trên thế giới.</p>
</article>
</article>

Thử ngay

<article> trong <div>：</article>
<article>
<h2>Thành phố nổi tiếng</h2>
<div class="city">
<h2>London</h2>
<p>London là thành phố thủ đô của Anh. Nó là thành phố đông dân nhất ở Vương quốc Anh,</p>
<p>với khu vực đô thị có hơn 13 triệu người.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris là thủ đô và thành phố đông dân nhất của Pháp.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo là thủ đô của Nhật Bản, trung tâm của Khu vực Tokyo lớn,</p>
và khu vực đô thị đông dân nhất trên thế giới.</p>
</div>
</article>

Thử ngay

<article> trong <section> trong <div>：</article>
<article>
<section>
<h2>Thành phố nổi tiếng</h2>
<div class="city">
<h2>London</h2>
<p>London là thành phố thủ đô của Anh. Nó là thành phố đông dân nhất ở Vương quốc Anh,</p>
<p>với khu vực đô thị có hơn 13 triệu người.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris là thủ đô và thành phố đông dân nhất của Pháp.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo là thủ đô của Nhật Bản, trung tâm của Khu vực Tokyo lớn,</p>
và khu vực đô thị đông dân nhất trên thế giới.</p>
</div>
</section>
<section>
<h2>Quốc gia nổi tiếng</h2>
<div class="country">
<h2>England</h2>
<p>London là thành phố thủ đô của Anh. Nó là thành phố đông dân nhất ở Vương quốc Anh,</p>
<p>với khu vực đô thị có hơn 13 triệu người.</p>
</div>
<div class="country">
<h2>France</h2>
<p>Paris là thủ đô và thành phố đông dân nhất của Pháp.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo là thủ đô của Nhật Bản, trung tâm của Khu vực Tokyo lớn,</p>
và khu vực đô thị đông dân nhất trên thế giới.</p>
</div>
</section>
</article>

Thử ngay