Build compatible iE6 Web pages with HTML5

Source: Internet
Author: User

A few months ago I was going to start learning HTML5, but there was a very lame idea: "Anyway, now many browsers are incompatible with HTML5, and learning the actual use will not be great!" And there are other things that are more involved (for reasons ...)! Now I finally realized how much that thought had been two at that time, and hastened to mend it.

Create IE6 HTML5 pages

HTML5 still have. html or. htm as suffixes.    carefully developed 5-year UI front-end framework!  
claims that almost no one went to the demerit of DOCTYPE statement into <! DOCTYPE Html> This is the shortest character that can activate IE standard mode. The
specifies that the character set encoding is also concise <meta charset = "UTF-8″>

HTML5 adds a number of elements that are semantically clear. Example:
1.header header
2.nav navigation
3.article article
4.section Chunk
5.aside non-body text, affiliate information
6.footer tail
etc.

These elements are probably only a section element more difficult to understand a little. This element is generally used to block the content on the site and the application, usually composed of headings and content
, so if the layout needs to add block elements, it is still recommended to use Div.

Most elements can be reused, for example:

<HEADER>
   <nav></nav>
< Section>
       <article></ Article>
</section>


With this, you can create HTML5-based Web pages.
Here's a small example: 5 years of well-developed UI front-end framework!

<! DOCTYPE html>
<meta charset= "utf-8″>
&LT;TITLE&GT;HTML5 Sample Page </title>
<body>
<section> this is a chunk
<article> This is text </article>
<footer> This is the tail of section </footer>
</section>
<footer> This is the end of the page </footer>
</body>


after the creation of the natural need to detect each browser, found that using IE8 below to open this page will find some small problems, because the earlier version of the browser does not have these HTML5 elements, the problem-solving method is very simple, Just use JavaScript on the head to create these semantic elements.

<SCRIPT>
document.createelement (" header ");
Document.createelement ("footer");
Document.createelement ("article");
Document.createelement ("section");
</script>


The next step is to format the styles of these elements, because they are all block elements, so in the beginning part of the style, add

header, footer, article, section, header {
   display:block;
}


Check again, the scene hold! Even IE6 is no problem. The beginning of the echo, compatibility issues can not be a reason not to learn HTML5!

Attention!!! (Latest update on March 31, 2012)

After the use of HTML5 in specific projects, it is found that using AJAX loaded content if it contains HTML5 elements will not be created in IE.

So if you need to use AJAX technology in your project and have high compatibility requirements, HTML5 elements are not recommended! Develop a 5-year UI front-end framework!

Build compatible iE6 Web pages with HTML5

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.