HTML 5 is like a revolution, and is in full swing in the post-Web2.0 era.
What is HTML 5, I don’t need to go into details here. According to my understanding, the innovation of HTML 5 can be summarized as a semantic label system, a simplified and rich media support, a magical local data storage technology, a rich animation (canvas) that does not require plug-ins, and a powerful API support. In short, HTML 5 makes computer interaction and human-network interaction more comfortable and fits users. The previous lack of support for rich media applications and this storage is no longer a pain for browsers. The original intention of the HTML 5 revolution is to promote the Web from a content platform to a standardized application platform and unify the standards of each platform camp.
This article explains one of the innovations of HTML 5: a more clear and concise structure.
Start from the beginningA standard XHTML header code should look like this:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312 />
</head>
Can you remember? Will you memorize it by rote? Of course not! We only need mechanical copy and paste.
Let's take a look at how a standard HTML 5 header is:
<!doctype html>
<meta charset=gb2312>
I don’t need to say which one is more complicated and which one is simple. Yes, the HTML 5 header can be so simple that it can be remembered easily! Also, the case, quotes and backslashes before the last angle bracket can be ignored.
Why can it be so loose? In fact, if XHTML is sent as text/html, the browser can also parse it well, and the browser does not care about the syntax of the code. So, HTML 5 is metaphysical, it may break some of the original standards, but it can still perform well in the browser.
Of course, for the convenience of team assistance and subsequent maintenance, we should still unify the writing style you like, such as:
<!doctype html>
<html>
<head>
<meta charset=gb2312 />
...
</head>
<body>
...
</body>
</html>
In addition, although HTML 5 is not currently supported by all browsers, this header that can save more than 100 bytes (for sites with daily PV levels or above one million, it can save a lot of traffic). If you have researched on browser resolution mode, you should know that pages will trigger weird mode without defining doctype, and as long as the <!doctype html> browser is defined, you can parse pages in standard mode without specifying a certain type of DTD.
New semantic labeling systemSemantic coding is a necessary skill for qualified front-end Developers, but as web pages become increasingly rich, it is obvious that they are unable to do so by simply using the original xhtml tag to desemanate. God said: There must be light! Then there is light. Therefore, HTML 5 provides a series of new tags and corresponding attributes to reflect the typical semantics of modern websites. Practice to produce truth. Let's write an example:
<div id=header>
<div class=hgroup>
<h1>Website title</h1>
<h1>Site Subtitle</h1>
</div>
<div id=nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<!--//header end-->
<div id=left>
<div class=article>
<p>This is an article about the new HTML 5 structure tags. </p>
</div>
<div class=article>
<p>This is also an article about the new HTML 5 structure tags. </p>
</div>
</div>
<!--//left end-->
<div id=aside>
<h1>Author Profile</h1>
<p>Mr.Think, an ordinary person who focuses on web front-end technology. </p>
</div>
<!--//side end-->
<div id=footer>
The bottom of the page
</div>
<!--//footer end-->
Above is a simple blog page part HTML, consisting of the header, article display area, right side column, and bottom. The encoding is neat and conforms to the semantics of XHTML, which can be performed well even in HTML 5. But for the browser, this is a piece of code that does not distinguish between weights, rather than a tag that allows the machine to understand 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 by DIV, and the ID value of the DIV is determined by the developer, so the browser does not know which block should be the block where the navigation link is located. The emergence of new HTML 5 tags just makes up for this shortcoming. Then, if the above code is replaced with HTML 5, you can write it like this:
<header>
<hgroup>
<h1>Website title</h1>
<h1>Site Subtitle</h1>
</hgroup>
<nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>
</header>
<div id=left>
<article>
<p>This is an article about the new HTML 5 structure tags. </p>
</article>
<article>
<p>This is also an article about the new HTML 5 structure tags. </p>
</article>
</div>
<aside>
<h1>Author Profile</h1>
<p>Mr.Think, an ordinary person who focuses on web front-end technology. </p>
</aside>
<footer>
The bottom of the page
</footer>
It turns out that the HTML page structure can be so beautiful that it can be seen at a glance without comments. For browsers, you will no longer be at a loss when you find the corresponding block.
How to structure elements with HTML 5 new tags:Through the above example, we understand the innovations of new HTML 5 tags for structure, but when switching to actual use, how can we use them appropriately? I think this is also a question many HTML 5 learners want to ask. Just like XHTML semantics, the use of HTML 5 semantic tags should also be followed: each tag has its specific meaning, and semantics means that we use appropriate tags in the right place to better make people and machines (machines can be understood as browsers can be understood as search engines). For example, the header tag is generally the first block element of the page (the header tag can also be used in the header element of type, such as the title of the 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 the bottom information of the page; and so on.
Below is the semantic explanation and usage guidelines for common new tags for structural classes listed in the HTML 5 manual:
<header> tagManual definition: Defines the header of the section or document.
Usage guidelines: It is generally used to include page headers, and can also be used for other area headers, such as article headers:
<header>
<hgroup>
<h1>Website title</h1>
<h1>Site Subtitle</h1>
</hgroup>
</header>
<hgroup> tagManual definition: used to combine the titles of a web page or section.
Guidelines for use: Used for combinations of title classes, such as the title and subtitle of an article:
<hgroup>
<h1>This is an article introducing HTML 5 structure tags</h1>
<h2>HTML 5 innovation</h2>
</hgroup>
<nav> tagManual definition: Define the part that defines the navigation link.
Guidelines for use: Navigation section for defining pages:
<nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>
<aside> tagDefine content other than article. The content of aside should be related to the content of the article.
Usage Guidelines: Used for sectioned content, a new section will be started in the document stream, which is generally used in the sidebars related to article content:
<aside>
<h1>Author Profile</h1>
<p>Mr.Think, an ordinary person who focuses on web front-end technology. </p>
</aside>
<section> tagManual definition: Define sections in the document. For example, chapters, headers, footers, or other parts of the document.
Usage Guidelines: The content used for sections will start a new section in the document stream:
<section>
What is <h1>section? </h1>
<h2>A new chapter</h2>
<article>
<h2>About section</h1>
<p>section introduction</p>
...
</article>
</section>
<footer> tagManual definition: defines the footer of section or document. Typically, it will contain the creator's name, the date of creation of the document, and/or contact information.
Usage guidelines: It is generally used to wrap the entire page with a general bottom, and can also be used in the bottom of other areas, such as the bottom of the article:
<footer>
</footer>
<article> tagManual definition: define external content. For example, a new article from an external news provider, either from a blog, or from a forum. Or it comes from other external sources.
Guidelines for use: As the name implies, it is generally used in article blocks:
<article>
<header>
<hgroup>
<h1>This is an article introducing HTML 5 structure tags</h1>
<h2>HTML 5 innovation</h2>
</hgroup>
<time datetime=2011-03-20>2011.03.20</time>
</header>
<p>Article content details</p>
</article>
<figure> tagManual definition: used to combine elements.
Usage guidelines: mostly used for combining pictures and picture descriptions:
<figure>
<img src=img.gif alt=figure tag title=figure tag/>
<figcaption>This is the description information of the picture</figcaption>
</figure>
<menu>TagManual definition: Define menu list. Use this tag when you want to list form controls.
Usage Guide: Used in menu class blocks, used to define menu lists or menu options:
<menu>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</menu>
Other new tags in HTML 5 will not be explained one by one. Please check the manual yourself.
In fact, these things are like the div, h1, inpu and other tags in XHTML. As long as you practice more in daily life, it is easy to use them freely.
About CompatibilityIf you are a person who likes to study and pay attention to the front-end, you should know that the new HTML 5 tags have been used in Taobao's page structure. So, what I want to say is that as long as you dare to try, compatibility is not a problem. There are many compatibility methods online (this article is about structure, ha ~).
Later storiesAny new technology requires an adaptation process. If you are ready to be an excellent web front-end developer, you have to keep trying and accepting the latest front-end technology.
Sun Wen once said that if you want to make the happiness of civilization, you have to make the pain of civilization. This is true for the revolution of humanity, and so is the revolution of HTML 5. The gradual decline of IE has allowed major browser manufacturers to enter the Warring States Period and compete with each other. As for developers, we only hope that major browser manufacturers should follow the same standard as much as possible, rather than splitting the players after the competition. Because, efficient and perfect presentation of the same application to all kinds of users is our ultimate goal.
In this way, this article starts from the doctype of the page, to using the new HTML 5 tags to build a more semanticized page structure, and then explains the 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, then open your IDE, write a piece of code built by the new tags of HTML 5, and then use CSS to describe your grand blueprint!