search

Home >Web Front-end >HTML Tutorial >Use semantic tags to write your HTML compatible with IE6,7,8_HTML/Xhtml_Webpage Production

Use semantic tags to write your HTML compatible with IE6,7,8_HTML/Xhtml_Webpage Production

WBOY
WBOYOriginal
2016-05-16 16:36:131628browse

HTML5 adds more semantic tags, such as header, footer, nav... Let us no longer need to use the following method to layout the page when writing it:

XML/HTML CodeCopy content to clipboard
  1. <div class="header" >This is the headdiv>
  2. <div class="content" >This is the middle content areadiv>
  3. <div class="footer" >This is the bottom div> 

And you can layout it in this way:

XML/HTML CodeCopy content to clipboard
  1. <header>This is the headerheader>
  2. <content>This is the middle content areacontent> 
  3. <footer>This is the bottom footer> 

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

XML/HTML CodeCopy content to clipboard
  1. document.createElement("header");
  2. document.createElement("content");
  3. 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
  1. >
  2. <html>
  3. <head>
  4. <meta charset="utf- 8"> 
  5. <title>Use semantic tags to write your HTML, compatible with IE6,7, 8title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. header,content,footer{display:block}
  9. header{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
  10. content{width:600px;height:250px;line-height:250px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
  11. footer{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
  12. style>
  13. <script type="text/ javascript">
  14. document.createElement("header");
  15. document.createElement("content");
  16. document.createElement("footer");
  17. script>
  18. head>
  20. <body>
  21. <header>This is the headerheader>
  22. <content>This is the middle content areacontent> 
  23. <footer>This is the bottom footer>
  24. body>
  25. html>

Let’s talk about something unrelated. Why do we need to write html semantically?

First of all, the code is easy to read. When others look at your code, they can understand it at a glance; secondly, it is beneficial to SEO. Search engine crawlers will largely ignore the markup used for performance and only focus on semantic markup.

So, hurry up and start writing your HTML with semantic tags. Besides, it’s not difficult, right?

Appendix 1:

The above article uses semantic tags to write your HTML and is compatible with IE6, 7, and 8. This is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of the use of title tags and paragraph tags in XHTML_HTML/Xhtml_Web page productionNext article：Detailed explanation of the use of title tags and paragraph tags in XHTML_HTML/Xhtml_Web page production

Related articles

See more