Label of HTML5 Base

Preface

This article is mainly a simple record of the Learning HTML5 label some of their own understanding of the text

A content block is a unit that chapeau an HTML page after a semantic split. For the page site, the navigation menu, the text, the article's comments, and so on each part can be called a content block. HTML5 provides a label that can specifically represent a chunk of content based on semantic partitioning

Ignore: In the performance of the effect of the basic and div display consistent, so the semantic division and application in the page can make the structure of the page clear, read the code quickly understand the meaning of the representative (HTML5 used to enhance the semantics of a tag. Semantic Benefits for Web page seo. ) article

The article label defines independent content.
The content of the article tag definition must itself be meaningful and must be independent of the rest of the document.
Potential sources of article: forum posts blog posts news story reviews

can refer to the difference between article and section of HTML5
Tag effect: After a simple test article is consistent with the effect of the Div presentation, except that they represent different meanings. See article know it is an independent content and these content is to convey the information to the outside (post, article, say, mood, story, comment, leave article) Section

The section label defines an area of the document. such as chapters, headers, bottoms, or other areas of the document. A section element is used to block content on a page in a Web site or application, and the section element works by chunking the content on the page, or by segmenting the article, and a section element usually consists of content and its headings. It is not generally recommended to use the section element for content that does not have a title. A section element is not an ordinary container element; When a content needs to be directly defined or defined by a script, it is recommended to use a div rather than a component element; If article, Nav, Aside elements conform to a condition, do not use the section element definition; The contents of the sections element can be stored separately in the database or exported to a Word document.

can refer to the difference between article and section of HTML5

I saw the introduction of the section feel it poor, give me a feeling is more than the lack of the above. Article, Nav, aside contains more emotions than section, so can use article, NAV, aside do not use section. In HTML5, Div as a container and section can't be used as a container, it's just a piece of poor people

Label effect: section and div show the same effect is a block element, the specific meaning of the block header

Header specific play is as follows
-header labels Define the headers for a document or part of a document.
-The header element should be a container for introductory content or navigation link bars.
-In a document, you can define multiple header elements.
-header labels cannot be placed inside a footer, address, or another header element.

The header can be used as a container, with the nav tag in the header, or in the article label.
Refer to: The usage of header label in HTML5

Label effect: Header and div display the same effect is a block element, the meaning of the page as the page header or the page header (Mark defines a page or a region of the head) nav

The Nav label defines the part of the navigation link.
Not all HTML documents use the NAV element. The nav element is only an area that is labeled as a navigation link.
On different devices (cell phones or PCS), you can make navigational links appear to fit the needs of different screens.

Label effects: Nav and div Display the same effect is a block element, the specific meaning is the tag definition navigation links (just HTML5 for the enhancement of the semantics of a tag.) Semantic Benefits for Web page seo. )
Reference to: Nav in HTML actually plays a role aside

The aside label defines what is outside the article label.
The content of the aside should be related to the content nearby.
Aside's content can be used as a sidebar for articles
Reference: Two ways to use the aside label in HTML5

Label effect: aside and div display the same effect is a block element, the specific meaning of the article is the information and in addition to the article as a sidebar (mark defines the content of the page sidebar) hgroup

The Hgroup label is used to group the header elements.
When a title has multiple levels (subheadings), the Hgroup element is used to group a series of H1-H6 elements.
Reference to: HTML5 knowledge points to supplement the use of-hgroup elements

Label effect: Hgroup and Div show the effect is a block element, the specific meaning of the title group, according to the main rank from top to bottom list figure

The figure label provides separate streaming content (images, charts, photos, code, and so on).
The contents of the figure element should be related to the main content, while the position of the element is independent of the main content. If deleted, the document flow should not be affected.

may refer to: The definition illustrated HTML5 new label-figure, figcaption
Label effect: Figure and Li show the same effect is a block element and the left has a certain amount of space, but it does not have Li's black dots figcaption

The Figcaption label defines the title for the figure element.
The figcaption element should be placed at the position of the first or last child element of the figure element.

can refer to: [Define the HTML5 new label-figure, Figcaption]

Label effect: Figcaption and P show the same effect is a block element and the left has a certain amount of space, but it does not have Li's black dots footer

The footer label defines the footer for a section of a document or document.
The footer element should contain information about the elements it contains.
Typically, the element contains the name of the creator of the document, the copyright information for the document, a link to the terms of use, contact information, and so on.
In a document, you can define multiple footer elements.

It corresponds to the header, refer to: HTML5 footer tag element HTML bottom footer CSS Layout tutorial

Label effects: footer and div Show the same effect is a block element and semantically represents a page or article Footer reference

What elements are in the HTML row. What are the block-level elements?
On the usage of header tag in HTML5
The difference between article and section of HTML5
How does NAV actually work in HTML?
Two ways of using aside label in HTML5
HTML5 knowledge points supplement the use of-hgroup elements
Definition of HTML5 new label-figure, figcaption
HTML5 footer Tag element HTML bottom footer CSS Layout tutorial