Bài 33: Cách chuyển từ HTML4 sang HTML5

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>&copy; 2016 TimODay. All rights reserved.</p>
</div>

</body>
</html>

Xem kết quả


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>

Xem kết quả


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

Xem kết quả


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

Xem kết quả

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

Xem kết quả


Thay đổi thành phần tử <header> và <footer> trong HTML5

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>&amp;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>&copy; 2016 TimODay. All rights reserved.</p>
</footer>

Xem kết quả


Thay đổi thành phần tử <nav> trong HTML5

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>

Xem kết quả


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>

Xem kết quả


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>

Xem kết quả

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

Xem kết quả


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>&amp;copy; 2014 TimODay. All rights reserved.</p>
</footer>
</body>
</html>

Xem kết quả


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

Xem kết quả

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

Xem kết quả

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

Xem kết quả

Có thể bạn sẽ thích…

Trả lời