Bạn có thể chỉ cách để trình duyệt xử lý HTML5 đúng cách.
Trình duyệt hỗ trợ HTML5
HTML5 được hỗ trợ bởi tất cả các trình duyệt hiện đại.
Thêm vào đó, mọi trình duyệt cả cũ và mới sẽ tự động xử lý các phần tử không được nhận dạng như là phần tử nội tuyến. Vì vậy bạn có thể “dạy” những trình duyệt cũ cách để xử lý các phần tử HTML “lạ”.
Xác định các phần tử ngữ nghĩa là phần tử khối
HTML5 định ra 8 phần tử ngữ nghĩa mới. Tất cả chúng đều là phần tử khối.
Để đảm bảo chúng hoạt động chính xác trên các trình duyệt cũ. Bạn có thể đặt thuộc tính CSS display cho những phần tử này thành block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Thêm các phần tử mới vào HTML
Bạn cũng có thể thêm các phần tử mới vào trang HTML với một mẹo.
Ví dụ này thêm một phần tử là <myHero> vào trang HTML, và định kiểu cho nó.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>
Cần câu lệnh JavaScript document.createElement("myHero") để tạo mới phần tử trong trình duyệt IE9 trở về trước.
Vấn đề với Internet Explorer 8
Bạn có thể sử dụng giải pháp phía trên để thêm mọi phần tử HTML5 mới.
Tuy nhiên, IE8(trở về trước) không cho phép style cho phần tử lạ.
Ơn giời, Sjoerd Vischer đã tạo ra HTML5Shiv! HTML5Shiv là JavaScript thay thế để cho phép style các phần tử HTML5 cho các phiên bản IE9 trở về trước.
Cú pháp cho HTML5Shiv
HTML5Shiv được đặt bên trong thẻ <head>
HTML5Shiv là một file JavaScipt được tham chiếu trong một thẻ <script>
Bạn nên dùng HTML5Shiv khi sử dụng các phần tử mới của HTML5 như: <article>, <section>, <aside>, <nav>, <footer>.
Bạn có thể tải về bản mới nhất của HTML5Shiv từ github hoặc tham chiếu bản CDN tại https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
Cú pháp
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
Ví dụ HTML5Shiv
Nếu bạn chưa tải về và lưu HTML5 trong trang, thì có thể tham chiếu phiên bản CDN
HTML5Shiv script phải được đặt bên trong thẻ <head>, sau mọi thẻ style
Ví dụ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<section>
<h1>Famous Cities</h1>
<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>
</section>
</body>
</html>
Trích nguồn từ: (https://www.w3schools.com/html/html5_browsers.asp)
