How to make old browsers support HTML5 new tags

Source: Internet
Author: User
Tags script tag

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.