Chuyển từ HTML4 sang HTML5
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 ...
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>&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>© 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>
- Khóa học lập trình frontend cơ bản : Bootstrap 4, Jquery, CSS3, HTML5
- Học lập trình Frontend nâng cao qua project thực tế
