The innovation of HTML5 and the beauty of structure_html5 tutorial skills

Foreword
HTML 5 is like a revolution, which is going on vigorously in the post-Web2.0 era.
What HTML 5 is, I don’t need to go into details here. As for the innovation of HTML 5, according to my understanding, it can be summarized as a tag system with clear semantics, rich media support that simplifies complexity, magical local data storage technology, rich animation (canvas) that does not require plug-ins, and powerful API support. . In short, HTML 5 makes human-computer interaction more comfortable and user-friendly. The previous lack of support for rich media applications and native storage is no longer a pain point for browsers. Pushing the Web from a content platform to a standardized application platform and unifying the standards of various platform camps is the original intention of the HTML 5 revolution. In this article, I will introduce some ideas and explain one of the innovations of HTML 5: a clearer and more concise structure with semantics.

Start with the "head" A standard XHTML header code should be like this:

Copy codeThe code is as follows:

Can you remember? Will you memorize it by rote? Of course not! We just need to mechanically copy and paste.
Look at what a standard HTML 5 header looks like:

Copy the codeThe code is as follows:

It’s more complicated than simple, I don’t need to say it. Yes, the HTML 5 header can be so simple and easy to remember! Also, case, quotes, and the backslash before the last angle bracket can be ignored.
Why can it be so loose? In fact, if you send XHTML as text/html, the browser can parse it well, and the browser does not care about the syntax of the code. Therefore, HTML 5 is metaphysical. It may break some original standards, but it can still perform well in browsers.
Of course, for the convenience of team assistance and subsequent maintenance, we should still unify a writing style that you like, such as:

Copy code The code is as follows:

...


...

In addition, although HTML 5 is not currently supported by all browsers, this can save more than 100 bytes (for sites with more than one million daily PV, it can save a lot of traffic) ) head is now perfectly compatible. If you have researched browser parsing modes, you should know that the page will trigger weird mode if doctype is not defined, but as long as is defined, the browser can parse the page in standard mode, and There is no need to specify a certain type of DTD.

New semantic tag system Semantic coding is an essential skill for a qualified front-end developer. However, as web pages become increasingly rich, only the original xhtml tags are used to de-semantize them. It was obviously beyond his capabilities. God said: "Let there be light!" And there was light. Therefore, HTML 5 provides a series of new tags and corresponding attributes to reflect the typical semantics of modern websites. Practice the truth. Let’s write an example:

Copy the codeThe code is as follows:

Website title

Website subtitle

• HTML 5


• CSS


• JavaScript

< ;!--//header end-->

This is an article Article about HTML 5's new structural tags.

This is an article about the new structure tags of HTML 5.

About the author

Mr.Think, an ordinary person who focuses on Web front-end technology.

Bottom of the page

The above is a simple blog page partial HTML, consisting of the header, article display area, right Composed of sidebar and bottom. The coding is neat and conforms to the semantics of XHTML. It can perform well even in HTML 5. But to the browser, this is a piece of code without distinguishing weights, rather than a tag that allows machines to understand the semantics to define the corresponding block. For example, standard browsers (such as Firefox, Chrome and even the new version of IE) have a shortcut key that can lead customers to jump directly to the page navigation, but the problem is that all blocks are defined with DIV, and the ID value of the DIV It is determined by the developer, so the browser does not know which block should be the navigation link. The emergence of HTML 5 new tags just makes up for this shortcoming. Then, the above code can be written like this in HTML 5:

Copy the code

The code is as follows:

Website title

Website subtitle

< /hgroup>

• HTML 5


• CSS


• JavaScript< ;/li>
  

This is an article about the new structural tags of HTML 5.

This is an article about the new structure tags of HTML 5.

About the author

Mr .Think, a common man who focuses on Web front-end technology.

Bottom of the web page

It turns out that the page structure of HTML can be like this The beauty can be seen at a glance without comment. For the browser, finding the corresponding block will no longer be at a loss.
How to use HTML 5 new tags to structure elements
Through the above example, we understand the structural innovation of HTML 5 new tags, but when it comes to actual use, how to use them appropriately? I think this is also a question that many HTML 5 learners want to ask. Just like XHTML semantics, the use of HTML 5 semantic tags should also follow: each tag has its specific meaning, and semantics allows us to use appropriate tags at the appropriate location to better understand people and The machine (the machine can be understood as a browser or a search engine) can understand it at a glance. For example, the header tag is generally the first block element of the page (the header tag can also be used in type header elements, such as the title of an article block), which contains the topic information of the page; the nav tag is generally used to wrap navigation information. ;footer is generally used to wrap information at the bottom of the page; etc.
The following is the semantic explanation and usage guidelines of the commonly used new tags of structural classes that I listed with reference to the HTML 5 manual:

tag
Manual explanation: Define the header of a section or document.
Usage guidelines: Generally used to include page headers, but can also be used for other area headers, such as article headers:

Copy code

The code is as follows:

Website title

Website subtitle

Tag
Manual explanation: used to modify the title of a web page or section combination.
Usage guidelines: Used for the combination of title types, such as the title and subtitle of an article:

Copy code

code As follows:

This is an article introducing HTML 5 structural tags

Innovation of HTML 5< ;/h2>

Tag
Manual explanation: Define the part of the navigation link.
Usage Guidelines: Used to define the navigation part of the page:

Copy the code

The code is as follows:

• HTML 5


• CSS


• JavaScript< /li>
  

Tag
defines content other than article. The content of aside should be related to the content of article.
Usage Guide: Used for sectioned content, it will start a new section in the document flow, generally used for sidebars related to article content:

Copy code

The code is as follows:

About the author

Mr.Think, an ordinary person who focuses on Web front-end technology.

Tag
Manual explanation: Define a section in the document. Such as chapters, headers, footers, or other parts of the document.
Usage guidelines: Used for sectioned content, it will start a new section in the document flow:

Copy code

The code is as follows:

What is section?

A new section

About section

section Introduction

...

Or the document's footer. Typically, it will contain the name of the author, the date the document was created, and/or contact information.
Usage guidelines: Generally used to wrap the common bottom of the entire page, and can also be used at the bottom of other areas, such as the bottom of an article:

Copy code

The code is as follows:

COPYRIGHT@Mr.Think

Tag
Manual Definition: Define external content. For example, a new article from an external news provider, or text from a blog, or text from a forum
. Or content from other external sources.

Usage Guide: As the name suggests, it is generally used in article blocks:





Copy code

The code is as follows:

This is an article introducing HTML 5 structural tags

Innovation in HTML 5

2011.03.20
< /header>

Article content details

tag
Manual explanation: Used to combine elements.
Usage Guide: Mostly used for combining pictures and picture descriptions:

Copy the code

The code is as follows:

Here is the description of the image

Tag
Manual explanation: Define menu list. Use this label when you want to list form controls.
Usage Guide: Used in menu blocks to define menu lists or menu options:

Copy code

The code is as follows:

HTML 5

CSS

JavaScript< ;/li>

The other new tags of HTML 5 will not be explained one by one. Please check the manual yourself.
In fact, these things, like XHTML's div, h1, inpu and other tags, are easy to use as long as you practice more.
About compatibility
If you are a person who likes to study and pay attention to the front-end, you should know that Taobao’s page structure has used a large number of HTML 5 new tags. So, what I want to say is that as long as you dare to try, compatibility is not a problem. There are many compatible methods on the Internet (this article is about structure, ha~).

Afterword
Any new technology requires a process of adaptation. If you are ready to be an excellent web front-end developer, then you have to constantly try and accept the latest front-end technology.
Sun Wen once said that if you want to experience the happiness of civilization, you have to experience the pain of civilization. Such is the revolution of mankind, and so is the revolution of HTML 5. The gradual decline of IE has allowed major browser manufacturers to enter the Warring States Period for the first time, and the heroes are vying for the throne. As for developers, we only expect major browser manufacturers to follow the same standards as much as possible, instead of falling apart after a group of heroes compete for one. Because, efficiently and perfectly presenting the same application to all types of users is our ultimate goal.

In this way, this article starts from the doctype of the page, to using HTML 5 new tags to build a more semantic page structure, and then explains some new tags related to the page structure. I believe everyone has a new understanding of the structural new tags of HTML 5. If you are interested, open your IDE, write a piece of code built with HTML 5 new tags, and then use CSS to depict your grandeur Blueprint it! (Source: Mr.Think)