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

This article is to share with you about what the newly added structural tags of html5 are. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Html5 newly added structural tags are: 1, section tags, define sections in the document; 2, article tags; 3, nav tags; 4, aside tags; 5, header tags, define the document header; 6, footer tags; 7, hgroup tags; 8, figure tags.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

HTML5's new structure tag in the previous HTML page, we basically used the p+CSS layout. When the search engine grabs the content of the page, it can only guess that the content in one of your p is the container of the article content, or the container of the navigation module, or the container introduced by the author, and so on. In other words, the structure of the entire HTML document is not clearly defined. In order to solve this problem, HTML5 has specifically added: headers, footers, navigation, article content and other structural element tags related to the structure.

Before we talk about these new tags, let's take a look at the layout of a normal page:

In the picture above, we can see very clearly that an ordinary page will have a header, navigation, article content, attached right column, bottom and other modules, while we are distinguished by class and processed by different css styles. But relatively speaking, class is not a general standard specification, search engines can only guess a certain part of the function, in addition, if this page program is given to the visually impaired to read, the document structure and content will not be very clear. The new layout brought about by the new HTML5 tag is as follows:

The relevant HTML code is:

.........

With the direct sensory knowledge above, let's introduce the relevant structural tags in HTML5 one by one.

Section tag

Tags that define sections in the document. Such as chapters, headers, footers, or other parts of the document. Content that is typically used as a section starts a new section in the document stream. It is used to represent ordinary document content or application blocks, usually made up of content and its title. However, the section element tag is not an ordinary container element, it represents a piece of thematic content, usually with a title.

When we describe a specific thing, we usually encourage the use of article instead of section;. When we use section, we can still use H2 as the title, without worrying about its location and whether it is used elsewhere; when a container needs to be defined directly or through a script to define behavior, it is recommended to use the p element instead of section.

What is section? A new chapter on section

Introduction of section

...

Article tag

Is a special section tag, it has a clearer semantics than section, it represents an independent, complete block of related content, can be used independently of the rest of the page. For example, a complete forum post, a blog post, a user comment and so on. In general, an article has a title section (usually contained within a header) and sometimes a footer. The article can be nested, and the inner article has an affiliation to the outer article tag. For example, a blog post can be displayed in article, and then some comments can be embedded in the form of article.

This is an article about HTML 5 structural tags. Innovation of HTML 5 2011.03.20

Details of the article

Nav tag

The nav tag represents a part of the page and is a group of links that can be used as page navigation, where navigation elements are linked to other pages or other parts of the current page, making html code more accurate in semantics and better support for devices such as screen readers.

Houde ITFlyDragonJ Flying Dragon shocking aside tag

The aside tag is used to load non-body content and is treated as a separate part of the page. The content it contains is separate from the main content of the page and can be deleted without affecting the content, chapter or message of the page. Such as advertisements, grouped links, sidebars, etc.

A brief introduction to the author

Houde IT

Header tag

Tags define the header of a document, usually some guidance and navigation information. It can be written not only in the head of the page, but also in the content of the page.

Usually tags contain at least one title tag (-), can also include tags, and can also include table content, identity, search form, navigation, and so on.

Site title site subtitle footer tag

The footer tag defines the footer of section or document and contains information about the page, article, or part of the content, such as the author or date of the article. As the footer of a page, it generally contains copyrights, related files, and links. It is basically the same as the use of tags, can be used multiple times in a page, if you add footer after a section, then it is equivalent to the footer of that section.

COPYRIGHT@ Houde IThgroup label

A hgroup tag is a combination of the title elements (h2-h7) of a page or section section. For example, if you have consecutive h-series tag elements in a section, you can enclose them in hgroup

This is an article about HTML 5 structural tags. HTML 5's innovative figure tags

Used to combine elements. It is mainly used for the combination of pictures and picture descriptions.

Here is a description of the picture. Thank you for reading! This is the end of the article on "what is the newly added structure tag of html5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.