HTML5 element Classification

HTML5 element Classification: Structural elements, block elements, intra-line semantic elements, interactive elements.

Objective: To make the structure of the document more clear and clear;

Add new features.

1. Structural elements: Responsible for the definition of the context structure of the web to ensure the integrity of the HTML document.

   1.1 section (for content Segmentation): In Web page applications, this element can be used for chapter representations of regions.

   
   

   The section element is used to partition the content on the page in a Web site or app, focusing on the independence of the content; A section element is usually composed of a title and content;

   
   

1.2 Header (head Element): header on the body of the page

The head area that should be used to identify each area

1.3 Footer (bottom element): Bottom of page

Should be used to identify the bottom area of each area

1.4 Nav: Elements for menu navigation, link navigation

Suitable for the following occasions

Traditional navigation bar, sidebar navigation, in-page navigation, paging operations.

1.5 article (Logo article): Used to identify the subject content of an article, typically the area displayed in a text set.

The article element is used to identify a document, a separate, complete page of content that can be externally referenced. It can be a

Articles in a blog or newspaper, a forum post, a user comment, or a standalone plugin.

The title of the article element is usually placed in the header. Headers and footer are usually included.

Article elements can be nested, and the contents of the inner layer need to be associated with the outer content in principle. A piece of news is

A article, the final comment on the news can be nested article elements.

"section and article"

Article: Represents a separate, complete, externally referenced content in a document, page, or application. such as a blog in the article

Chapter, a post in a forum or a comment from a reviewer. Usually contains headers (header element, article

The caption of the element (HN) is usually written in the header element), and the bottom (footer element).

The role of the section:section element is to segment the content on the page, such as the article segmentation. Usually for those with the title of the inside

Segment (*).

A section element is usually composed of a title (Hn,hn does not need to be placed in the header tag) and content.

A section element generally does not contain header elements and footer elements.

The role of a section element is to segment the contents of a page, such as an article fragment.

The content of adjacent section elements should be relevant, not as independent as article.

Section article cannot be substituted for Div for setting style;

If the article element, the aside element, and the nav element are more in line with the usage conditions, do not use the section element;

Do not use the section element for the same chunk that does not have a title;

"My grooming."

article used to identify content-independent articles;

The aricle usually contains header elements, footer elements;

The title HN of article is usually written in the header element;

Article can be nested, but the inner and outer layers of the article content to be related;

Section divides paragraphs into headings that do not need to be written in the header tag;

Section and article can be nested use;

Section and article are used to divide the area, not to replace the DIV as a container to set the page style, if necessary, to make

Set with Div;

If aside, nav, article are more in line with the conditions of use, do not use the section element.

"code sample"

<article>
Sneak M's Personal introduction <p>
Stalker M is a Chinese man, is a handsome guy ... </p>
<section>
Reviews <article>
Commented by: Stalker N<p>
Indeed, M classmates are really handsome </p>
</article>
<article>
Commented by: Stalker A<p>
Did you take the pills today? </p>
</article>
</section>
</article>

[Complement: Non-principal structural elements]

1.6 Hgroup (Group titles): groups headings or subheadings, usually in combination with H1~H6 elements, one content fast

The title and its sub-headings can be formed by hgroup elements in a group;

1.7 Address (Add contact information): Define contact information in the document, including the document author or document editor name, e-mail

Real address, phone number, etc.

2. Level block elements:

2.1 Aside (set auxiliary information): Used to express annotation, tips, sidebar, summary, insert references, etc. as a supplementary subject of the internal

and the content. From the display of a simple page , it is the sidebar, either on the left or on the right.      From a partial view of a page, is a summary. 、

Two ways to use the aside element:

As the main content of the plural information part, contained in the article element, wherein the content can be related to the current article reference, noun interpretation, etc.;

As a part of the page or site-wide affiliate information, it is used outside of article. The most typical form is the sidebar, where the content can be links, other articles in the blog list, ad units.

2.2 Figure: elements that are combined and presented for multiple elements, typically used in conjunction with Figcaption

<! DOCTYPE html>

2.3 Code: Represents a block of blocks .<code> what the foreground displays </code>


2.4 dialog: Used to express the dialogue between man and man's house. The element also includes two combination elements, DT and DD, which are often simultaneously
Use. DT is used to denote the speaker, and DD indicates the content of the speech.

< don't know where to use >

3 in-line semantic elements: to complete the Web page specific content of the reference and expression, rich content display.
3.1 Meter: Represents a specific range of values that can be used for wages, quantities, percentages, and so on.

3.2 Time: Indicates the duration

3.3 Progress: Used to identify the progress bar, can be achieved by the control of its max, Min, step and other attributes to achieve the control of the progress of the presentation
3.4 Video: An audio element that supports and implements direct playback of video (including video streaming) files, supports buffered preload and multiple visual
Frequency Media Format: MPEG-4,OGGV and WEBM.
3.5 Audio: A sound element to support and implement direct playback of audio (audio streaming) files, support for buffering preload and multiple audio
Media format.

"My grooming."
Design Micro-format: <time datetime= "2012-11-13" > My birthday </time>
Add release date: <time datetime= "2012-11-13" pubdate></>

4. Interactive elements: Functional content expression, there will be a certain content and data association, is the basis of various events, such elements include
The following several.

4.1 Details: Used to represent a specific piece of content, but the content may not appear by default, by some means (such as clicking) and
Summary (tested in Chrome for summary, currently only chrome and IE support) will be displayed.
<details> <summary> Health Information </summary> height: <input type= "text"/> Weight: <input type= "text"/> </details>

4.2 DataGrid: Used to control client data and display, can be updated by dynamic scripting.
4.3 menu: Primarily for interactive menus (this is an element that has been deprecated and now re-enabled)

4.4 Command: Used to handle commands button

"Attached" web front-end development specification: http://www.html5cn.org/article-558-1.html

HTML5 element Classification