Bài 33: Cách chuyển từ HTML4 sang HTML5
Nội dung
- Cách chuyển từ HTML4 sang HTML5
- Một trang HTML4 thông thường
- Thay đổi kiểu tài liệu (DocType) sang HTML5
- Thay đổi kiểu mã hoá (Encoding) sang HTML5
- Thêm Shiv
- Thêm các phần tử có ngữ nghĩa CSS trong HTML5
- Thay đổi thành phần tử <header> và <footer> trong HTML5
- Thay đổi thành phần tử <nav> trong HTML5
- Thay đổi thành phần tử <section> trong HTML5
- Thay đổi thành phần tử <article> trong HTMl5
- Một trang đã được chuyển sang HTML5
- Điểm khác nhau giữa <article> <section> và <div>
Cách chuyển từ HTML4 sang HTML5
Trong bài học này chúng ta sẽ đề cập đến cách chuyển một trang web HTML4 thông thường sang một trang HTML5 mà không làm thay đổi cấu trúc cũng như nội dung ban đầu của trang web đó.
Bạn cũng có thể chuyển từ HTML5 sang HTML4 hoặc XHTML, bằng cách sử dụng các công thức tương tự.
| Cách viết trong HTML4 | Cách viết trong HTML5 |
|---|---|
| <div id=”header”> | <header> |
| <div id=”menu”> | <nav> |
| <div id=”content”> | <section> |
| <div id=”post”> | <article> |
| <div id=”footer”> | <footer> |
Một trang HTML4 thông thường
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.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>Tin Tức Thứ 2 </h1>
</div>
<div id="menu">
<ul>
<li>Báo</li>
<li>Thể Thao</li>
<li>Thời Tiết</li>
</ul>
</div>
<div id="content">
<h2>Tin Tức</h2>
<div id="post">
<h2>Các Tin Tức Mới</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>Các Tin Tức Mới</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>
<div id="footer">
<p>© 2016 TimODay. All rights reserved.</p>
</div>
</body>
</html>
Thay đổi kiểu tài liệu (DocType) sang HTML5
Chuyển doctype từ HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Sang doctype của HTML5:
Ví dụ:
<!DOCTYPE html>
Thay đổi kiểu mã hoá (Encoding) sang HTML5
Chuyển kiểu mã hoá từ HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
sang HTML5:
Ví dụ:
<meta charset="utf-8">
Thêm Shiv
Các thẻ có ngữ nghĩa trong HTML5 được hỗ trợ ở hầu hết các trình duyệt hiện đại.
Bên cạnh đó, bạn có thể “dạy” cho các trình duyệt cũ cách xử lý “các phần tử mới”.
Thêm shiv để trình duyệt Internet Explorer hỗ trợ các thẻ HTML5:
Ví dụ:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Bạn có thể tìm hiểu thêm về shiv trong bài học về Các trình duyệt hỗ trợ HTML5 trong các bài học tiếp.
Thêm các phần tử có ngữ nghĩa CSS trong HTML5
Để hiểu thêm về CSS, xem thêm phần học CSS trực quan và các bộ chọn trong CSS
Ví dụ dưới đây là các kiểu CSS hiện tại trong HTML4:
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;
}
Chúng ta sẽ tạo thêm các phần tử có ngữ nghĩa CSS cho HTML5 dựa trên các phần tử CSS cũ:
Ví dụ:
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;
}
Chúng ta chuyển phần tử <div> có id=”header” và id=”footer”:
<div id="header">
<h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
<p>&copy; 2016 TimODay. All rights reserved.</p>
</div>
sang phần tử có ngữ nghĩa <header> và <footer> trong HTML5:
Ví dụ:
<header>
<h1>Monday Times</h1>
</header>
.
.
.
<footer>
<p>© 2016 TimODay. All rights reserved.</p>
</footer>
Chúng ta chuyển phần tử <div> có id=”menu”:
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
sang phần tử có ngữ nghĩa <nav> trong HTML5:
Ví dụ:
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
Thay đổi thành phần tử <section> trong HTML5
Chúng ta chuyển phần tử <div> có id=”content”:
<div id="content">
.
.
.
</div>
sang phần tử có ngữ nghĩa <section> trong HTML5:
Ví dụ:
<section>
.
.
.
</section>
Thay đổi thành phần tử <article> trong HTMl5
Chuyển tất cả các phần tử <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>
sang phần tử có ngữ nghĩa <article>trong HTML5:
Ví dụ:
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
Sau đó chúng ta có thể tiến hành bỏ các phần tử CSS cũ:
Ví dụ:
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;
}
Một trang đã được chuyển sang HTML5
Cuối cùng bạn có thể bỏ các thẻ <head>. Chúng không còn cần thiết trong HTML5:
Ví dụ:
<!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 TimODay. All rights reserved.</p>
</footer>
</body>
</html>
Điểm khác nhau giữa <article> <section> và <div>
Sẽ có sự nhầm lẫn và khó hiểu trong việc phân biệt sự khác nhau giữa giữa các phần tử <article> <section> và <div> trong chuẩn HTML5.
Trong chuẩn HTML5, phần tử <section> được định nghĩa như là một khối gồm nhiều nội dung liên quan với nhau.
Phần tử <article> được định nghĩa như là một khối bao gồm nội dung các hoàn chỉnh, một khối khép kín.
Phần tử <div> được định nghĩa như là một khối bao gồm nhiều thẻ con bên trong.
Làm thế nào để chúng ta hiểu rõ vấn đề này?
Rất đơn giản, tùy thuộc vào nội dung mà bạn muốn thể hiện, bạn hãy sử dụng các phần tử này một cách linh hoạt.
Ở ví dụ trên chúng ta đã sử dụng phần tử <section> bao ngoài phần tử<article>.
Nhưng chúng ta cũng có thể sử dụng phần tử <article> với mục đích tương tự.
Dưới đây là một vài ví dụ minh chứng cho việc bạn sử dụng các thẻ linh hoạt trong mỗi trường hợp:
<article> trong <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> trong <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> trong <section> và trong <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>
