Home > Developer > Web Develop
HTML5 appear also not short, many web pages have been revised, in order to reduce the amount of code (do not need to play too much class name), improve loading speed, improve the semantics of the label, so in the Web page, a large number of use of section,article,header and other HTML5 tags. My recent example of writing a responsive layout also uses tags such as headers. Still more want to be able to make compatible "old version browser", here and share with you, how to let old browser support HTML5 new tag.
The basic HTML code for writing:
1 <!doctype html> 2 3 4 <meta charset= " UTF-8 "> 5 <title> let old browser support HTML5 new tags-solo binghai </title> 6 7 < Body> 8 9 <nav> navigation content </nav>10 <article> article content </article> <footer> Bottom content </footer>12 </body>Performance in new browsers such as Google:
performance in IE6:
In fact, let the old browser support HTML5 new tags, it sounds difficult, the operation is very simple, only need you to understand the DOM operation is enough.
First we use JS for the creation of tags, for HTML files we need to create these several HTML5 tags.
1 <script>2 document.createelement (' header '); 3 Document.createelement (' nav '); 4 Document.createelement (' article '); 5 Document.createelement (' footer '); 6 </script>Next, we need to use CSS to control the style of these several HTML5 tags. This is because the new label created by this method defaults to the inline element. So you need to add the following code:
1 <style>2 article, aside, canvas, details, figcaption, figure, Footer, header, Hgroup, menu, NAV, section, summary{3 display:block; 4 }5 </style>For the code location, we need to note that to put the script tag into the head, rather than the body behind, this is because the browser from the top to bottom of the code execution and parsing, after the rendering has been rendered before the execution of JS has no meaning and value.
Simply put, create a label yourself, a new tag named HTML5, and then add a style to the label you created.
(article, aside, canvas, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section, summary)
How to make old browsers support HTML5 new tags
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
