Ví dụ và cách chuyển một trang web được viết bằng HTML4 sang HTML5.

Chuyển từ HTML4 sang HTML5

Trong bài này, chúng ta sẽ nói về cách để chuyển một trang đang được viết theo HTML4 sang HTML5 mà không làm hỏng cấu trúc cũng như nội dung ban đầu.

Bạn cũng có thể chuyển từ XHTML sang HTML5 với cách thức tương tự.

Cách viết trong HTML4	Chuyển sang HTML5
<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div id="post">	<article>
<div id="footer">	<footer>

Trang được viết theo HTML4

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

<head>

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

<ul>

<li>JavaScript</li>

</ul>

</div>

<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p>

</div>

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

</body>

</html>

Demo

Chuyển Doctype sang HTML5

Chuyển doctype từ HTML4:

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

sang doctype của HTML5

1	<!DOCTYPE html>

Chuyển bảng mã ký tự sang HTML5

Chuyển thông tin bảng mã ký tự từ HTML4:

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

sang HTML5:

1	<meta charset="utf-8">

Thêm Shiv

Các thẻ có ý nghĩa trong HTML5 được hầu hết các trình duyệt hiện đại hỗ trợ.

Thêm vào đó, bạn có thể “dạy” cho những trình duyệt cũ cách để xử lý “những thẻ mới”.

Thêm tệp tin javascript Shiv để Internet Explorer các thẻ HTML5:

<!--[if lt IE 9]>

<![endif]-->

Bạn có thể tìm hiểu thêm về Shiv qua bài Trình duyệt hỗ trợ HTML5

Thêm CSS cho các thẻ HTML5

Đây là 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 CSS cho các thẻ HTML dựa trên CSS cũ:

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;

}

Chuyển header, footer sang HTML5

Chúng ta sẽ chuyển thẻ <div> có id=”header” và id=”footer”:

</div>

</div>

sang sử dụng thẻ <header>, <footer> của HTML5:

</header>

</footer>

Chuyển sang thẻ <nav> trong HTML5

Chúng ta sẽ chuyển thẻ <div> có id=”menu”:

<ul>

<li>JavaScript</li>

</ul>

</div>

sang thẻ <nav> trong HTML5:

<nav>

<ul>

<li>JavaScript</li>

</ul>

</nav>

Chuyển sang thẻ <section> trong HTML5

Chúng ta sẽ chuyển thẻ <div> có id=”content”:

</div>

sang thẻ <section> trong HTML5:

</section>

Chuyển sang thẻ <article> trong HTML5

Chúng ta sẽ chuyển thẻ <div> có id=”post”:

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

sang thẻ <article> trong HTML5:

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

Tới đây, chúng ta có thể tiến hành bỏ 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;

}

Trang đã được chuyển sang HTML5

Cuối cùng, bạn có thể bỏ thẻ <head>. Thẻ này không cần thiết trong HTML5:

<!DOCTYPE html>

<!--[if lt IE 9]>

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

<nav>

<ul>

<li>JavaScript</li>

</ul>

</nav>

<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p>

</article>

<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p>

</article>

</section>

</footer>

</body>

</html>

Demo

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

Có một sự khác biệt hơi khó thấy trong chuẩn HTML5 giữa các thẻ <article> <section> và <div>.

Trong chuẩn HTML5, thẻ <section> được định nghĩa như là một khối gồm các nội dung liên quan.

Thẻ <article> được định nghĩa như là một thẻ bao gồm nội dung hoàn chỉnh, một khối khép kín.

Thẻ <div> được định nghĩa như là một khối bao gồm các thẻ con bên trong.

Vậy chúng ta phải hiểu thế nào đây?

Rất đơn giản, tùy thuộc vào nội dung bạn muốn thể hiện, bạn hãy linh hoạt sử dụng các thẻ.

Trong ví dụ bên trên chúng ta đã sử dụng thẻ <section> bao ngoài thẻ <article>.

Nhưng chúng ta cũng có thể sử dụng thẻ <article> với mục đích tương tự.

Dưới đây là một vài ví dụ bạn có thể linh hoạt sử dụng các thẻ:

Thẻ <article> trong thẻ <article>:

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

</script>

<![endif]-->

<style>

body {font-family: Verdana, sans-serif; font-size:0.8em;}

header, nav, section, article, footer

{border:1px solid grey; margin:5px; padding:8px;}

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

nav ul li {display:inline; margin:5px;}

</style>

</head>

<body>

<h1>Trang tin HTML5</h1>

</header>

<nav>

<ul>

</ul>

</nav>

<h2>Các thành phố nổi tiếng</h2>

<h2>London</h2>

<p>London là thủ đô của Nước Anh. Nó là thành phố đông dân nhất trong Vương Quốc liên hiệp Anh với một đô thị có diện tích hơn 13 triệu cư dân.p>

</article>

<h2>Paris</h2>

<p>Paris là thủ đô và là thành phố đông dân nhất của Pháp.</p>

</article>

<h2>Tokyo</h2>

<p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p>

</article>

</footer>

</body>

</html>

Demo

Thẻ <div> trong thẻ <article>:

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

</script>

<![endif]-->

<style>

body {font-family: Verdana, sans-serif; font-size:0.8em;}

header, nav, section, article, footer, div.city

{border:1px solid grey; margin:5px; padding:8px;}

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

nav ul li {display:inline; margin:5px;}

</style>

</head>

<body>

<h1>Trang tin HTML5</h1>

</header>

<nav>

<ul>

</ul>

</nav>

<h2>Các thành phố nổi tiếng</h2>

<h2>London</h2>

<p>London là thủ đô của Nước Anh. Nó là thành phố đông dân nhất trong Vương Quốc liên hiệp Anh với một đô thị có diện tích hơn 13 triệu cư dân.p>

</div>

<h2>Paris</h2>

<p>Paris là thủ đô và là thành phố đông dân nhất của Pháp.</p>

</div>

<h2>Tokyo</h2>

<p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p>

</div>

</article>

</footer>

</body>

</html>

Demo

Thẻ <div> trong thẻ <section> trong thẻ <article>:

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

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

<h1>Trang tin HTML5</h1>

</header>

<nav>

<ul>

</ul>

</nav>

<h2>Các thành phố nổi tiếng</h2>

<h2>London</h2>

<p>London là thủ đô của Nước Anh. Nó là thành phố đông dân nhất trong Vương Quốc liên hiệp Anh với một đô thị có diện tích hơn 13 triệu cư dân.p>

</div>

<h2>Paris</h2>

<p>Paris là thủ đô và là thành phố đông dân nhất của Pháp.</p>

</div>

<h2>Tokyo</h2>

<p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p>

</div>

</section>

<h2>Các quốc gia nổi tiếng</h2>

<p>London là thủ đô của Nước Anh. Nó là thành phố đông dân nhất trong Vương Quốc liên hiệp Anh với một đô thị có diện tích hơn 13 triệu cư dân.</p>

</div>

<p>Paris là thủ đô và là thành phố đông dân nhất của Pháp.</p>

</div>

<p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p>

</div>

</section>

</article>

</footer>

</body>

</html>

Demo

« Bài Trước Bài Tiếp »

WebVN Cộng đồng web Việt Nam

Chuyển từ HTML4 sang HTML5

Trang được viết theo HTML4

Chuyển Doctype sang HTML5

Chuyển bảng mã ký tự sang HTML5

Thêm Shiv

Thêm CSS cho các thẻ HTML5

Chuyển header, footer sang HTML5

Chuyển sang thẻ <nav> trong HTML5

Chuyển sang thẻ <section> trong HTML5

Chuyển sang thẻ <article> trong HTML5

Trang đã được chuyển sang HTML5

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

Leave a Reply Cancel reply