The innovation of HTML 5: The Beauty of architecture

What is HTML 5, I don't need to repeat it here. For the innovation of HTML 5, according to my understanding, can be summed up as a semantic explicit labeling system, simplified rich media support, the magic of local data storage technology, do not need plug-in animation (canvas), strong API support. In short, HTML 5 lets human-computer interaction, human network interaction become more comfortable, fit the user. Previous support for rich media applications and this storage is no longer a pain in the browser. The purpose of the HTML 5 revolution is to push the web from a content platform to a standardized application platform and unified the standards of each platform camp.
In this article, I'm going to explain one of the innovations in HTML 5: A more explicit and concise structure.
From the "head".
A standard XHTML header code should look like this:

1. <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
3. </body>

Copy Code

In addition, HTML 5, although not currently supported by all browsers, but this can save more than 100 bytes (for the day PV millions above the site, can save a lot of traffic oh) The head has been perfectly compatible. If you study the browser parsing mode, you should know that the page will trigger the quirks mode without defining the DOCTYPE, and you can parse the page in standard mode as long as the browser is defined, without having to specify a type of DTD.
A new semantic labeling system
Semantic coding is an essential skill for a qualified front-end developer, but with the increasing richness of web pages, it is clearly not enough to use the original XHTML tags to semantically. God says, "Be light!" Then there was light. As a result, HTML 5 provides a new set of tags and corresponding properties to reflect the typical semantics of modern web sites. Practice the truth. Let's write an example:

4. <div id= "Header" >
6. <div class= "Hgroup" >
12. </div>
14. <div id= "NAV" >
16. <ul>
18. <li>html 5</li>
20. <li>CSS</li>
22. <li>JavaScript</li>
24. </ul>
26. </div>
28. </div>
30. <!–//header end–>
32. <div id= "Left" >
34. <div class= "article" >
36. <p> This is an article about the new structure tag for HTML 5. </p>
38. </div>
40. <div class= "article" >
42. <p> This is also an article about the new structure tag for HTML 5. </p>
44. </div>
46. </div>
48. <!–//left end–>
50. <div id= "Aside" >
52. <!–//side end–> <div id= "Footer" > The bottom of the page </div>
54. <!–//footer end–>

Copy Code

above is a simple part of the blog page HTML, composed of the head, the article display area, the right column, the bottom. The coding is neat, and also conforms to the semantics of XHTML, even in HTML 5 can be very good performance. But for a browser, this is a code that does not have a separate weight, rather than a tag that allows the machine to read semantics and define the corresponding chunks. For example, a standard browser (such as Firefox, Chrome, or even a new version of IE9) has a shortcut that can direct the customer to the navigation of the page, but the problem is that all chunks are defined with a div, and the id value of the div is set by the developer, so The browser does not know which block the navigation link should be. The appearance of the new HTML 5 tag just makes up for this shortcoming. So, the above code, in HTML 5, can be written like this:

7. <nav> <ul>
8. <li>html 5</li>
9. <li>CSS</li>
10. <li>JavaScript</li>
11. </ul> </nav>
13. <div id= "Left" >
14. <article> <p> This is an article about the new structure tag for HTML 5. </p> </article>
15. <article> <p> This is also an article about the new structure tag for HTML 5. </p> </article>
16. </div>
17. <aside>
18. <footer> bottom of the page </footer>

Copy Code

Originally, the HTML page structure can be so beautiful, without comments can be at a glance. For browsers, finding the corresponding chunks is no longer a loss.