Identify HTML5 tags under IE6/7/8 (let older browsers identify HTML5)

Last Update:2017-02-28 Source: Internet

Author: User

Tags svn

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Identify HTML5 Tags:
HTML5 added a number of semantically labeled tags, such as <nav></nav>,<aside></aside>,<article></article> or something, At that time to see these labels when I thought HTML5 estimated that many of the old IE browsers do not support, and did not pay much attention to this morning in the group to see these tags in the discussion, the heart immediately out of a doubt, I am in the chrome and other modern browser with these tags is ok, then I ie6/7/ 8 What's the effect of using these labels? So I immediately started to test.

Copy Code code as follows:

<!doctype html>

<html lang= "en" >

<head>

<meta charset= "UTF-8" >

<title>Document</title>

</head>

<body>

<nav>nav</nav>

<aside>aside</aside>

</body>

</html>

The effect came out, do not want to also know that these several browsers are not recognized these tags, so just appear a line of text: Nav aside;
In modern browsers, these two are normal block-level tags, so there are line-wrapping.
I risked trying to try and give Nav and aside labels a style.

Copy Code code as follows:

nav {color:red;}

aside {color:blue;}

Naturally not, then I added class, and add style. Also declared a failure.
Search on the Internet, because the old browser was born when they do not have these tags, naturally do not recognize. The solution is also some, that is, add the following script in the head, let the browser recognize this is a label, so that CSS can be successfully rendered.

Copy Code code as follows:

document.createelement ("Nav");

document.createelement ("aside");

However, after writing the font color is changed, is still inline elements, all have to define the style as Display:block, but these CSS code many reset.css already have.
To support all new HTML5 tags, you can write this

Copy Code code as follows:

function HTML5 () {

var i = 0, Html5tag = ["Aside", "figcaption", "figure", "Footer", "header", "Hgroup", "NAV", "section"];

for (i in Html5tag) {

document.createelement (Html5tag[i]);

}

}

Or call the Google Code library:

Copy Code code as follows:



also has writing

This html5.js feature should be more powerful, not just to allow older browsers to identify HTML5 tags.
Lenovo: Custom Labels
Since the tags in these html5 are "strangers" to old-fashioned browsers, the labels we create ourselves are strangers, so I've added a line of code.

Copy Code code as follows:

<my>my</my>

<you>you</you>

Copy Code code as follows:

my {font-size:30px;}

you {font-weight:bold;}

The wonderful work of

is that Chrome,ff,safari can recognize it and add a style to it.
However, it is also necessary to use createelement to create the following IE.
HTML5 DOCTYPE:
It has been silly to think that HTML5 inside the line of the simple <!doctype html> document header can only be used in the browser to support the HTML5, today looked at the data to find the wrong, Your own understanding of the document head is not enough AH. This one is backward-compatible. HTML5 's brief Doctype statement is to allow browsers such as Firefox, Chrome, and IE6/7/8 to enter standard mode, and you may be surprised that IE6/7 can support HTML5 Doctype, in fact, IE is the standard mode as long as the DOCTYPE conforms to this format.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More