HTML5 element Classification

HTML5 adds 27 elements, discards 16 elements, and according to the existing standard specification, defines the elements of HTML5 as the structural attribute, the level block element, the inline semantic element and the interactive element 4 category.

1. Structural elements

Structural elements are primarily responsible for the definition of the web context structure

• Section: In Web page applications, this element can also be used for chapter descriptions of regions.
• Header: Header on the body of the page, header elements tend to be in a pair of body elements.
• Footer: The bottom of the page (footer), usually marked with information about the site.
• Nav: An element that is specifically used for menu navigation, link navigation, and is an abbreviation for navigator.
• Article: Used to represent the main content of an article, typically the area displayed in a text set.

2. Level block Element

The level block element mainly completes the division of the Web page area, and ensures the effective segmentation of the content.

• Aside: used to express annotation, tips, sidebar, summary, inserted references, etc. as a complement to the content.
• Figure: is an element that combines and presents multiple elements, often in conjunction with ficaption.
• Code: Represents a block of blocks.
• Dialog: Used to express human-to-human dialogue, which contains two combinations of DT and DD elements, DT is used to represent the speaker, and DD is used to denote the content of the speech.

3. In-line semantic elements

In-line semantic elements are the main content of Web pages to complete the reference and description, is a rich content display Foundation.

• Meter: Represents a specific range of values that can be used for wages, quantities, percentages, and so on.
• Time: Represents the value of the moment.
• Progress: Used to represent a progress bar, you can complete the presentation and supervision of the progress by controlling its properties such as Max, Min, and step.
• Video: An element that supports and implements direct playback of video files, supports buffering preload and multiple video media formats.
• Audio: A sound element that supports and implements direct playback of audio files, supports buffering preload and multiple audio media formats.

4. Interactive elements

Interactive elements are mainly used for functional content expression, there will be a certain content and data association, is the basis of various events.

Details: Used to represent a specific piece of content, but the content may not appear by default, and interaction with legend by means such as a click is displayed.

DataGrid: Used to control client data and display, can be updated by dynamic script in time.

Menu: used primarily for interactive menus (elements that have been deprecated and re-enabled).

Command: Used to process the commands button.

Building Body Content

Identify articles

The article element is used to represent content that is independent, complete, and externally referenced in a document, page. The article element can be used in nested nesting. Article elements can also be used to represent plug-ins.

To segment content

The section element is used to partition the content of a page in a Web site or application, and DIV elements can also be used to partition a page, and it is recommended to use a div, rather than a section element, when a container needs to be defined directly or defined by a script. The DIV focuses on the independence of the structure, while the Sectio element concerns the independence of the content, and the section element contains content that can be stored separately in the database or exported to a Word document.

The section element is used to block the content on a page in a Web site or application, and a section element is usually composed of content and headings, good one

There are a few issues to be aware of when working with the section element:

• Do not use the section element as a set-style page container, which should be implemented with a DIV element for such operations.
• Do not use the section element if the article element, aside element, or NAV element are more in line with the usage criteria.
• Do not use the section element for content chunks that do not have headings.

In HTML5, the div element becomes a container, and when CSS styles are used, a general CSS style can be applied to the container.

Designing navigation information

A NAV element is a group of links that can be used as a page navigation in which navigation elements are linked to other pages or to other parts of the current page. The nav element can be used in the following situations:

• Traditional navigation bar
• Side Bar Navigation
• In-page navigation
• Page Turn operation

Design Auxiliary Information

The aside element is used to represent the subsidiary information portion of the current page or article, which can be a reference to the current article, a noun interpretation, and so on.

Design Micro-format

A micro-format is a way to add additional information to a Web page by using the class attribute of HTML, primarily to simplify data extraction for web development

The time element represents a moment in the 24 hour or a date that allows time difference when identifying the moment.

Add Release date

The Pubdate property is an optional Boolean property that can be used on the time element in the article element, which represents the published date of the article or the entire page.

Add a semantic module

Add a title block

The header element is a structure element that has a bootstrap and navigational effect. In HTML5, header elements usually contain H1-H6 elements, or they can contain elements such as hgroup, table, form, NAV, and so on.

Group headings

Hgroup elements can be grouped into headings or subheadings, which are typically used in combination with H1~H6 elements. However, if the article has only one main title, the Hgroup element is not required.

Add a footnote block

Footer elements can be used as footnotes to content blocks, and there are many forms of footnote information, such as author, related reading links and copyright information.

Add contact information

The address element is used to define contact information in the document, including the document author or document editor name, e-mail, real address, phone number, and so on.

HTML5 element Classification