Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to build a more explicit HTML5 structure

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

How to build a more clear HTML5 structure, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Preface

Like a revolution, HTML 5 is going on vigorously in the post-Web2.0 era.

There is no need for me to repeat what HTML 5 is. As far as I understand it, the innovation of HTML 5 can be summarized as clear semantic label system, rich media support that simplifies complexity, magical local data storage technology, rich animation (canvas) without plug-ins, and powerful API support. In short, HTML 5 makes human-computer interaction and human-network interaction more comfortable and user-friendly. The lack of support for rich media applications and this storage in the past is no longer a real pain for browsers. The original intention of the HTML 5 revolution is to push Web from a content platform to a standardized application platform and unify the standards of each platform camp.

In this article, I will elaborate on one of the innovations of HTML 5: a more clear and concise semantic structure.

Start with "head"

A standard XHTML header code would look like this:

The code is as follows:

Can you remember that? Will you learn by rote? Of course not! We just need to copy and paste mechanically.

Let's take a look at what a standard HTML 5 header looks like:

The code is as follows:

There is no need for me to say whether it is complicated or simple. Yes, the head of HTML 5 can be so simple and easy to remember! Also, you can ignore case, quotation marks, and the backslash before the last angle bracket.

Why can it be so loose? In fact, if you send XHTML as text/html, the browser can parse very well, and the browser doesn't care about the syntax of the code. Therefore, HTML 5 is metaphysical and may break some of the original standards, but it still performs well in browsers.

Of course, for the convenience of team assistance and follow-up maintenance, we should unify a style that you like, such as:

The code is as follows:

...

...

In addition, HTML 5 is not currently supported by all browsers, but this header that can save more than 100 bytes (for sites with a daily PV level of more than 1 million, it can save a lot of traffic) is perfectly compatible. If you have any research on browser parsing mode, you should know that pages trigger weird patterns without defining doctype, and as long as you define a browser, you can parse pages in standard mode without specifying a certain type of DTD.

A new semantic labeling system

Semantic coding is a necessary skill for a qualified front-end Developer, but with the increasing enrichment of web pages, it is obviously not enough to use the original xhtml tags to de-semantic. God said, "Let there be 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. Truth comes from practice. Let's write an example:

The code is as follows:

Website title

Subtitle of the website

HTML 5

CSS

JavaScript

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

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

A brief introduction to the author

Mr.Think, an ordinary person who specializes in Web front-end technology.

The bottom of the page

Above is a simple blog page part HTML, which consists of the header, the article display area, the right column, and the bottom. It is neatly coded and conforms to the semantics of XHTML, which works 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 read semantics to define the corresponding block. For example, standard browsers (such as Firefox, Chroome, and even the new version of IE) have a shortcut to direct customers to the navigation of the page, but the problem is that all blocks are defined in DIV, and the ID value of DIV is set with the developer, so the browser does not know which block should be the navigation link. The emergence of the new HTML 5 tag makes up for this deficiency. So, the above code, replaced by HTML 5, can be written like this:

The code is as follows:

Website title

Subtitle of the website

HTML 5

CSS

JavaScript

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

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

A brief introduction to the author

Mr.Think, an ordinary person who specializes in Web front-end technology.

Bottom of the page

It turns out that the page structure of HTML can be so beautiful that it can be understood at a glance without comments. For browsers, finding the corresponding block is no longer at a loss.

How to use HTML 5 new tags for structured elements

From the above example, we learned about the structural innovation of HTML 5's new tags, but how to use them appropriately when switching to practical use? I think this is also a question that many HTML 5 learners want to ask. Like XHTML semantics, the use of HTML 5 semantic tags should be followed: each tag has its own specific meaning, and semantics allows us to use the right tag in the right place to better make people and machines clear at a glance (machines can be understood as browsers 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 the type, such as the title of the article block), which contains the subject 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; and so on.

The following are the semantic explanations and guidelines for the new tags commonly used in structural classes listed in the HTML 5 manual:

Label

Manual interpretation: defines the header for section or document.

Instructions: generally used to include page headers, and can also be used for other regional headers, such as article headers:

The code is as follows:

Website title

Subtitle of the website

Label

Manual interpretation: used to combine the titles of a web page or section (section).

Usage guidelines: for combinations of title classes, such as the title and subtitle of an article:

The code is as follows:

This is an article that introduces HTML 5 structural tags.

Innovation of HTML 5

Label

Manual interpretation: the section that defines navigation links.

Guidelines: used to define the navigation section of the page:

The code is as follows:

HTML 5

CSS

JavaScript

Label

Define something other than article. The content of aside should be related to the content of article.

Guidelines: for section content, a new section is started in the document stream, which is generally used in the sidebar related to the content of the article:

The code is as follows:

A brief introduction to the author

Mr.Think, an ordinary person who specializes in Web front-end technology.

Label

Manual interpretation: define sections in the document (section). Such as chapters, headers, footers, or other parts of the document.

Guidelines: for section content, a new section will be started in the document stream:

The code is as follows:

What is section?

A new chapter

About section

Introduction of section

...

Label

Manual interpretation: define the footer of section or document. Typically, it contains the name of the creator, the date the document was created, and / or contact information.

Instructions: it is generally used to wrap the general bottom of the entire page, and can also be used at the bottom of other areas, such as the bottom of article:

The code is as follows:

COPYRIGHT@Mr.Think

Label

Manual interpretation: define external content. For example, a new article from an external news provider, or text from blog, or an article from a forum

Ben. Or from other external sources.

Usage guidelines: as the name implies, it is generally used in the article block:

The code is as follows:

This is an article that introduces HTML 5 structural tags.

Innovation of HTML 5

2011.03.20

Details of the article

Label

Manual interpretation: used to combine elements.

Usage guidelines: mostly used for the combination of pictures and picture descriptions:

The code is as follows:

figure标签

Here is the description of the picture.

Label

Manual interpretation: define a menu list. Use this label when you want to list form controls.

Usage guidelines: used in menu blocks to define menu lists or menu options:

The code is as follows:

HTML 5

CSS

JavaScript

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, H2, inpu and other tags, are easy to use as long as they are put into practice.

About compatibility

If you are a person who likes to study and focus on the front end, you should know that the new HTML 5 tags have been widely 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 compatible methods on the Internet (this article is about structure, ha).

Later words

Any new technology needs a process of adaptation. If you're ready to be a good Web front-end developer, you have to keep trying and accepting the latest front-end technologies.

Sun Wen once said that if you want to experience the happiness of civilization, you have to go through the pain of civilization. This is true of the human revolution, and so is the revolution of HTML 5. With the decline of IE, the major browser manufacturers have entered the warring States era. For developers, we only expect major browser makers to follow the same standard as much as possible, rather than falling apart after competing with each other. Because, efficient and perfect presentation to all kinds of users of the same application is our ultimate goal.

Start with the doctype of the page, to use the new HTML 5 tags to build a more semantic structure of the page, and then explain the new tags related to the page structure. I believe you have a new understanding of the new structural tags of HTML 5. If you are interested, open your IDE, write a piece of code built by the new tags of HTML 5, and then use CSS to draw your grand blueprint.

After reading the above, have you mastered how to build a more specific HTML5 structure? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report