Use semantic tags to write your HTML compatible with IE6,7,8

HTML5 adds more semantic tags, such as header, footer, nav, etc., so we no longer need to use the following method to layout when writing pages:

XML/HTML CodeCopy content to clipboard

< div class = "header" > This is the header </ div >
< div class = "content" > This is the middle content area </ div >
< div class = "footer" > This is the bottom </ div >

And you can layout it like this:

XML/HTML CodeCopy content to clipboard

<header> This is the header </header>
< content > This is the middle content area </ content >
< footer > This is the bottom </ footer >

But IE does not support forward, so if we want to support IE6, 7, 8, we need to add a little code in js and css, as follows:

XML/HTML CodeCopy content to clipboard

document.createElement("header");
document.createElement("content");
document.createElement("footer");

CSS:

header,content,footer{display:block}

The above means to customize a tag as header and set it to block display. The complete code is attached below:

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" >
< title > Use semantic tags to write your HTML, compatible with IE6,7,8 </ title >
< style >
*{margin:0;padding:0;}
header,content,footer{display:block}
header{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
content{width:600px;height:250px;line-height:250px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
footer{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
</ style >
< script type = "text/javascript" >
document.createElement("header");
document.createElement("content");
document.createElement("footer");
</ script >
</ head >
< body >
<header> This is the header </header>
< content > This is the middle content area </ content >
< footer > This is the bottom </ footer >
</ body >
</ html >

Let's talk about something irrelevant. Why should we write HTML in a semantic way?

First, the code is easy to read. When others look at your code, they can understand it at a glance. Second, it is beneficial to SEO. Search engine crawlers will largely ignore the tags used for presentation and only focus on semantic tags.

So, start writing your HTML using semantic tags. It’s not that hard, right?

Appendix 1:

The above article about using semantic tags to write your HTML compatible with IE6, 7, and 8 is all the content that the editor shares with you. I hope it can give you a reference and I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/shouce/p/5385701.html

<<: SQL Practice Exercise: Online Mall Database User Information Data Operation

>>: Ubuntu installation Matlab2020b detailed tutorial and resources