[HTML/HTML5] Phần 38: Chuyển đổi mã HTML4 thành HTML5

Trong bài này, bạn sẽ học các quy tắc chuyển đổi mã nguồn HTML4 thành HTML5 mà không làm thay đổi mã nội dung hay cấu trúc website. Lưu ý, bạn phải cập nhật nội dung tập tin *.css (hoặc style) để có thể có giao diện tương thích.

Bạn có thể dùng quy tắc sau để chuyển đổi:

HTML4	HTML5
<div id=”header”>	<header>
<div id=”menu”>	<nav>
<div id=”content”>	<section>
<div class=”article”>	<article>
<div id=”footer”>	<footer>

Ví dụ trang HTML4 như sau:

<!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 --- dammio.com</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>&amp;copy; 2016 Monday Times. All rights reserved.</p>
</div>

</body>
</html>

Chuyển HTML5 doctype
Đầu tiên chúng ta chuyển đoạn mã định kiểu tài kiểu (doctype) từ HTML4 sang HTML5 như sau:

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

thành:

<!DOCTYPE html>

Chuyển HTML5 Encoding
Tiếp, chúng ta chuyển thông tin mã hóa tài liệu từ HTML4 encoding:

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

thành HTML5 encoding:

<meta charset="utf-8">

Thêm HTML5Shiv
Các phần tử ngữ nghĩa HTML5 mặc dù được hỗ trợ bởi các trình duyệt phiên bản mới nhất. Tuy nhiên, ở một số trình duyệt phiên bản cũ, chúng ta cần phải định nghĩa để các phần tử này có thể hoạt động được.

Thêm HTML5Shiv:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

Thay thế các định dạng phong cách cho các phần tử ngữ nghĩa HTML5

Ở HTML4, các vùng dữ liệu (div) định nghĩa bằng các thuộc tính id/class. Khi chuyển thành HTML5, chúng ta phải thay đổi các vùng này.

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 phong cách HTML5 như sau:

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, chúng ta thay đổi các phần tử HTML5 như sau:

<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, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<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>
</article>
</section>

<footer>
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>

Sự khác biệt giữa article, section và div
Theo chuẩn HTML5, section là phần tử định nghĩa khối các phần tử có liên quan; còn article là khối phần tử liên quan khép kín và toàn vẹn. Trong khi đó, div thì định nghĩa khối các phần tử con. Thật ra không có chuẩn chung nào cho việc chuyển đổi từ div sang section hay aritcle. Tất cả đều tùy theo cách phân tích của bạn để có thể áp dụng việcchuyển đổi hợp lý nhất.

Liên quan: [HTML/HTML5] Phần 26: Các phần tử mã máy tính

Kết quả chuyển đổi
Cuối cùng chúng ta có kết quả chuyển đổi từ HTML4 sang HTML5 như sau:

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<![endif]-->
<style>
body {
    font-family: Verdana, sans-serif;
    font-size: 0.8em;
}

header, nav, article, footer, div.city, div.country {
    border: 1px solid grey;
    margin: 5px;
    padding: 8px;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 5px;
}
</style>
</head>

<body>
<header>
  <h1>HTML5 Skeleton</h1>
</header>

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

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

<footer>
<p>&copy; 2014 W3Schools. All rights reserved.</p>
</footer>

</body>
</html>

Kết luận: Bài này đã giúp bạn hiểu được các quy tắc và cách chuyển đổi mã HTML4 sang HTML5, tuy nhiên với nhiều giao diện phức tạp, việc chuyển đổi này không dễ dàng, bạn có thể sử dụng một số tool trên mạng để chuyển đổi nhanh và thuận tiện hơn.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2018). [HTML/HTML5] Phần 38: Chuyển đổi mã HTML4 thành HTML5. https://www.dammio.com/2018/04/26/html-html5-phan-38-chuyen-doi-ma-html4-thanh-html5.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 38: Chuyển đổi mã HTML4 thành HTML5}, year = {2018}, url = {https://www.dammio.com/2018/04/26/html-html5-phan-38-chuyen-doi-ma-html4-thanh-html5}, urldate = {2024-12-06} }

Kết nối