Chuyển đổi sang HTML5
Toàn bộ chương này viết về cách chuyển đổi từ HTML4 sang HTML5, mà không phá bỏ nội dung gốc và cấu trúc trang.
Bạn cũng có thể chuyển thử XHTML qua HTML5 với công thức tương tự.
|
HTML4 |
HTML5 |
|
<div id="header"> |
<header> |
|
<div id="menu"> |
<nav> |
|
<div id="content"> |
<section> |
|
<div class="article"> |
<article> |
|
<div id="footer"> |
<footer> |
Một trang HTML4 điển hình
Ví dụ
<!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.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
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 class="article">
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class="article">
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>
<div id="footer">
<p>© 2016 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
Thay đổi kiểu tài liệu sang HTML5
Thay đổi doctype (kiểu tài liệu):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Sang kiểu doctype HTML5:
<!DOCTYPE html>
Đổi thành bộ ký tự của HTML5
Thay đổi thông tin bộ ký tự:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Sang bộ ký tự HTML5:
<meta charset="utf-8">
Thêm HTML5Shiv
Các phần tử ngữ nghĩa mới trong HTML5 được hỗ trợ bởi tất cả các trình duyệt hiện đại. Thêm vào đó bạn có thể “dạy” những trình duyệt cũ hơn cách để xử lý “phần tử lạ”.
Tuy nhiên, IE8 trở về trước không cho phép style các phần tử lạ. Vậy nên HTML5Shiv là một tệp JavaScript để khắc phục và cho phép style các phần tử HTML5 trong các phiên bản IE8 trở về trước.
Thêm HTML5Shiv
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
Thay đổi thành các phần tử ngữ nghĩa HTML5
Nếu file CSS cũ có chứa các id và class để style phần tử:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
Thay bằng CSS style mới cho các phần tử ngữ nghĩa HTML5:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
header, footer {
padding: 10px;
color: white;
background-color: black;
}
section {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
article {
margin: 5px;
padding: 10px;
background-color: white;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
Cuối cùng là thay đổi các phần tử thành các phần tử ngữ nghĩa HTML5:
Ví dụ
<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>Lorem ipsum dolor sit amet..</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet..</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
Khác biệt giữa <article> <section> và <div>
Có một sự khác biệt (thiếu sót) khó hiểu trong tiêu chuẩn HTML5 giữa <article> <section> và <div>.
Trong tiêu chuẩn HTML5, phần tử <section> được định nghĩa như một khối của phần tử liên quan.
Phần tử <article> được định nghĩa như một khối hoàn chỉnh, khép kín các phần tử liên quan.
Phần tử <div> được định nghĩa như một khối các phần tử con.
Vậy nên nên hiểu như nào?
Trong ví dụ trên, chúng ta đã dùng <section> (vùng) như bộ chứa cho các <article> (bài viết) liên quan.
Nhưng chúng ta cũng có thể dùng <article> như là bộ chứa có các <section> khác nhau.
Dưới đây là một số ví dụ khác nhau:
<article> trong <article>:
<article>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England.</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.</p>
</article>
</article>
<div> trong <article>:
<article>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</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.</p>
</div>
</article>
<div> trong <section> trong <article>:
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</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.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</h2>
<p>London is the capital city of England.</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.</p>
</div>
</section>
</article>
Trích nguồn từ: (https://www.w3schools.com/html/html5_migration.asp)
