Chuyển từ HTML4 sang HTML5 - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Chuyển từ HTML4 sang HTML5

Front-end

HTML5

CSS

jquery

Bootstrap

Json

JavaScript

Theme

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

Hướng dẫn CSS

CSS3

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Nội dung bài viết này giới thiệu về cách chuyển từ HTML4 sang HTML5. Bạn sẽ được tìm hiểu cách chuyển đổi một trang HTML4 sang trang HTML5, mà không phá hủy bất cứ nội dung hoặc cấu trúc ban đầu.

Bạn có thể chuyển từ XHTML sang HTML5, sử dụng phương thức tương tự.

Điển hình về trang HTML4

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

</body>
</html>

Thay đổi sang HTML5

Thay đổi doctype:

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

sang HTML5 doctype:

<!DOCTYPE html>

Thay đổi sang mã hóa HTML5

Thay đổi thông tin mã hóa:

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

sang mã hóa HTML5:

<meta charset=”utf-8″>

Thêm vào HTML5Shiv

Các phần tử ngữ nghĩa HTML5 mới được hỗ trợ trong tất cả các trình duyệt hiện đại. Ngoài ra, bạn có thể “chỉnh sửa” các trình duyệt cũ làm thế nào để xử lý “các phần tử không xác định”.

Tuy nhiên, phiên bản IE 8 trở về trước không cho phép định dạng phần tử không xác định. Vì vậy, HTML5Shiv là một JavaScrip cho phép định dạng các phần tử HTML5 trong các phiên bản của Internet Explorer 9 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

CSS hiện có chứa id và class để tạo định dạng cho các 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 thế bằng các kiểu CSS 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, thay đổi các phần tử thành các phần tử ngữ nghĩa HTML5:

<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 nhau giữa <article> <section> và <div>

Có một sự khác biệ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 là một khối các phần tử có liên quan.

Phần tử <article> được định nghĩa là một khối hoàn chỉnh, có chứa các yếu tố liên quan.

Phần tử <div> được định nghĩa là một khối các phần tử con.

Vậy thì sự khác nhau được giải thích như nào? Trong ví dụ trên, <section> được dùng làm vùng chứa cho các bài báo liên quan. Tuy nhiên, chúng ta cũng có thể sử dụng <article> như một hộp chứa cho các bài viết. Dưới đây là một số ví dụ khác:

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

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

Thẻ <div> trong <section>thuộc <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>

 

Tham khảo thêm 2 khóa học hữu ích do giảng viên quốc tế trường FPT Arena giảng dạy: