Article introduction of Wulin.com (www.vevb.com): Blogs have long switched to HTML5 writing, but many users have not used the latest browser and have been using HTML4 tag sets. HTML5 has many tags that are semantic and practical. I have also started to try some commonly used tags, and now I use article and time tags.
HTML5 provides developers with many new tags, such as section, nav, article, header and footer. These tags are highly semantic and will be used frequently, but they cannot be recognized and used normally in old browsers such as IE6, IE7, IE8 and Firefox 2.
Why can't old-fashioned browsers recognize these tags?
In fact, the fault is not the browser, because this kind of tag did not exist at all in that era, so it cannot be correctly identified. This unusual tag recognition makes the DOM structure abnormal.
We have the test code as follows. It is an article content with the title and blue words, and the article content is labeled with article.
<!DOCTYPE html><html xmlns= lang=zh-CN>
<head>
<meta charset=UTF-8 />
<title>Test</title>
<style>
article{color:#06F;}
</style>
</head>
<body>
<h1>Article Title</h1>
<article>
This is the content of the article, it should be a piece of blue text. In old browsers, if you don't do hacks, an exception will be displayed.
</article>
</body>
</html>
In IE8, the following is displayed.
IE8 does not recognize the article tag, and the CSS style defined on the tag has no effect. In IE8, <article> is interpreted as two empty tag elements named <article /> and</article />, which are listed as brother nodes along with the content of the article, as shown in the figure below.
How to use HTML5 tags in old browsers?
Since it cannot be used because it cannot be recognized, the solution is to make the label be identified. Fortunately, simply using document.createElement (tagName) allows the browser to recognize the tag and the CSS engine to know the existence of the tag. Suppose the <head> area of our example above is added with the following code.
<script>document.createElement('article');
</script>
The DOM explanation in IE8 will become shown in the figure below.
Naturally, the text also appears in normal blue.
Conclusion
The blog has long switched to HTML5 writing, but many users have not used the latest browser and have been using HTML4 tag sets. HTML5 has many tags that are semantic and practical. I have also started to try some commonly used tags, and now I use article and time tags.