Hướng dẫn convert html4 to html5 - chuyển đổi html4 sang html5

bởi Nguyễn Văn Hợi vào 06/07/2019. Lượt xem: 1,601Nguyễn Văn Hợi vào 06/07/2019. Lượt xem: 1,601

Chuyển đổi sang HTML5

Toàn bộ chương này viết về cách chuyển đổi từ HTML4 sang HTML5, mà không phá bỏ nội dung gốc và cấu trúc trang.

Bạn cũng có thể chuyển thử XHTML qua HTML5 với công thức tương tự.

Một trang HTML4 điển hình

Ví dụ

  
Monday Times



  

    
News
    
Sports
    
Weather
  



  
News Section
  

    
News Article
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
  
  

    
News Article
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
  



  
© 2016 Monday Times. All rights reserved.



 

Thay đổi kiểu tài liệu sang HTML5

Thay đổi doctype (kiểu tài liệu):doctype (kiểu tài liệu):

Sang kiểu doctype HTML5:

Đổi thành bộ ký tự của HTML5

Thay đổi thông tin bộ ký tự: bộ ký tự:

Sang bộ ký tự HTML5:

Thêm HTML5Shiv

Các phần tử ngữ nghĩa mới trong HTML5 được hỗ trợ bởi tất cả các trình duyệt hiện đại. Thêm vào đó bạn có thể “dạy” những trình duyệt cũ hơn cách để xử lý “phần tử lạ”.

Tuy nhiên, IE8 trở về trước không cho phép style các phần tử lạ. Vậy nên HTML5Shiv là một tệp JavaScript để khắc phục và cho phép style các phần tử HTML5 trong các phiên bản IE8 trở về trước.

Thêm HTML5Shiv

Thay đổi thành các phần tử ngữ nghĩa HTML5

Nếu file CSS cũ có chứa các id và class để style 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 bằng CSS style mới 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 là thay đổi các phần tử thành các phần tử ngữ nghĩa HTML5:

Ví dụ

  
Monday Times





  
News Section
  

    
News Article
    
Lorem ipsum dolor sit amet..
  
  

    
News Article
    
Lorem ipsum dolor sit amet..
  




 

Thay đổi kiểu tài liệu sang HTML5

Thay đổi doctype (kiểu tài liệu):

Sang kiểu doctype HTML5:

Đổi thành bộ ký tự của HTML5

Thay đổi thông tin bộ ký tự:

Sang bộ ký tự HTML5:

Thêm HTML5Shiv

Các phần tử ngữ nghĩa mới trong HTML5 được hỗ trợ bởi tất cả các trình duyệt hiện đại. Thêm vào đó bạn có thể “dạy” những trình duyệt cũ hơn cách để xử lý “phần tử lạ”.

Tuy nhiên, IE8 trở về trước không cho phép style các phần tử lạ. Vậy nên HTML5Shiv là một tệp JavaScript để khắc phục và cho phép style các phần tử HTML5 trong các phiên bản IE8 trở về trước.

Thêm HTML5Shivtrong

Famous Cities


  
London
  
London is the capital city of England.



  
Paris
  
Paris is the capital and most populous city of France.



  
Tokyo
  
Tokyo is the capital of Japan.