Preface
Like the same revolution, HTML 5 is under vigorous development in the post-Web2.0 era.
What is HTML 5? I don't need to repeat it here. According to my understanding, it can be summarized as a tag system with clear semantics, rich media support with simplified complexity, magic local data storage technology, rich animation without plug-ins (canvas), and powerful API support. In short, HTML 5 makes human-computer interaction and human-network interaction more comfortable and fit the user. In the past, poor support for rich media applications and local storage is no longer a pain point for browsers. The original intention of the HTML 5 revolution was to push the Web from the content platform to the standardized application platform and unify the standards in the platform camp.
In this article, I will discuss one of the innovations of HTML 5: a more clear and concise structure of semantics.
Starting from "Header"
A standard XHTML header code should be 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? Of course not! We only need mechanical copy and paste.
Let's take a look at how a standard HTML 5 header works:
<! Doctype html>
<Meta charset = gb2312>
I don't need to talk about it. Yes, the HTML 5 header can be so simple and easy to remember! In addition, Case sensitivity, quotation marks, and the backslash before the last angle bracket can be ignored.
Why is it so loose? In fact, if you use XHTML as text/html for sending, the browser can parse it well, and the browser does not care about the code syntax. Therefore, HTML 5 is metaphysical and may break some of the original standards, but it can still be very good in browsers.
Of course, for the convenience of Team assistance and subsequent maintenance, we should unify your preferred style of writing, such:
<! Doctype html>
<Html>
<Head>
<Meta charset = "gb2312"/>
...
</Head>
<Body>
...
</Body>
</Html>
In addition, although HTML 5 is not currently supported by all browsers, it can save more than 100 bytes (for websites with a daily PV of more than one million, it can save a lot of traffic) the header can be perfectly compatible. If you have studied the browser parsing mode, you should know that the page triggers the weird mode without defining the doctype, and you only need to define the <! Doctype html> the browser can parse pages in standard mode without specifying a type of DTD.
New semantic tag system
Semantic encoding is a must-have skill for qualified front-end developers. However, as Web pages become increasingly blurred, simply using the original xhtml tags for semantic conversion is obviously insufficient. God said, "You must have light !" Then there is light. As a result, HTML 5 provides a series of new tags and corresponding attributes to reflect the typical semantics of modern websites. Practice truth. Let's write an example:
<Div id = "header">
<Div class = "hgroup">
<H1> website title <H1> website subtitle </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 structure tag of HTML 5. </P>
</Div>
<Div class = "article">
<P> This is an article about the new structure tag of HTML 5. </P>
</Div>
</Div>
<! -- // Left end -->
<Div id = "aside">
<H1> introduction <P> Mr. Think: a common concept that focuses on front-end Web technologies. </P>
</Div>
<! -- // Side end -->
<Div id = "footer">
Bottom of the page
</Div>
<! -- // Footer end -->
The above is a simple blog page part of HTML, composed of the header, article display area, right column, bottom. The code is neat and compliant with the syntax of XHTML, which can be very good even in HTML 5. But for the browser, this is a piece of code without separated weights, rather than a tag that allows the machine to understand the semantics to define the corresponding block. For example, standard browsers (such as Firefox, Chroome, or even the new version of IE) have a shortcut key that can bring customers directly to the page navigation, but the problem is that all blocks are defined by DIV, in addition, the div id value is determined by the developer. Therefore, the browser does not know which of the following should be the navigation link partition. The emergence of new HTML 5 tags makes up for this defect. Then, the above Code can be written in the format of HTML 5:
<Header>
<Hgroup>
<H1> website title <H1> website subtitle </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 structure tag of HTML 5. </P>
</Article>
<Article>
<P> This is an article about the new structure tag of HTML 5. </P>
</Article>
</Div>
<Aside>
<H1> introduction <P> Mr. Think: a common concept that focuses on front-end Web technologies. </P>
</Aside>
<Footer>
Web page bottom
</Footer>
Originally, the HTML page structure can be so beautiful that it can be seen at a Glance without comments. For browsers, finding the corresponding block will no longer be confusing.
How to Use HTML 5 new tag-structured elements
Through the above example, we learned about the structural innovation of the new tags in HTML 5, but how to use them properly when switching to actual use? I think this is also a question for many HTML 5 learners. Like XHTML semantics, the use of HTML 5 semantic tags should also follow: Each tag has its specific meaning, while semantics, that is, we can use appropriate labels at the right place to make people and machines better visible (machines can be understood as browsers and search engines. For example, the header label is generally the first block element of the page (the header label can also be used in header elements of the type, such as the title of the article block), containing the topic information of the page; the nav label is generally used for the package navigation information; footer is generally used to wrap the information at the bottom of the page; and so on.
The following is a reference to the semantic interpretation and Usage Guide for common new labels for structural classes listed in the HTML 5 manual:
<Header> tag
Manual Description: defines the header of a section or document.
Instructions for use: generally used to include the page header or other regional headers, such as the article header:
<Header>
<Hgroup>
<H1> website title <H1> website subtitle </Hgroup>
</Header>
<Hgroup> label
Manual Description: used to combine the title of a webpage or section.
Usage Guide: used for combination of title classes, such as the title and subtitle of an article:
<Hgroup>
<H1> This is an article about HTML 5 structure labels <H2> HTML 5 innovation </Hgroup>
<Nav> label
Definition: Define the navigation link section.
Guide: used to define the navigation section of the page:
<Nav>
<Ul>
<Li> HTML 5 </li>
<Li> CSS </li>
<Li> JavaScript </li>
</Ul>
</Nav>
<Aside> label
Defines content other than article. The content of aside should be related to the content of article.
Usage Guide: used for section content. A new section will be started in the Document Stream, which is generally used for the sidebar related to the article content:
<Aside>
<H1> introduction <P> Mr. Think: a common concept that focuses on front-end Web technologies. </P>
</Aside>
<Section> label
Description: defines the section in the document ). For example, a section, header, footer, or other part of the document.
Usage Guide: used for section content. A new section will be started in the Document Stream:
<Section>
<H1> what is section? </H1>
<H2> A new chapter <Article>
<H2> about section <P> section Introduction </p>
...
</Article>
</Section>
<Footer> label
Description: defines the footer of a section or document. Typically, it contains the Creator's name, document creation date, and/or contact information.
Guide: It is generally used to wrap the General bottom of the entire page, or at the bottom of other areas, such as the bottom of article:
<Footer>
COPYRIGHT@Mr.Think
</Footer>
<Article> label
Manual Description: defines external content. For example, a new article from an external news provider, text from a blog, or text from a forum
. Or from other external sources.
Usage Guide: as the name suggests, it is generally used in article blocks:
<Article>
<Header>
<Hgroup>
<H1> This is an article about HTML 5 structure labels
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
