Element and label structure of HTML5

HTML5 new tag added structure element:

The section:<section> tag defines the sections (section, section) in the document. such as chapters, headers, footers, or other parts of the document.

Article:<article> tags provide independent self-contained content.

An article should have its own meaning and it should be possible to distribute it independently of the rest of the site.

Potential sources of <article> elements: forum posts, newspaper articles, blog entries, user reviews.

The aside:<aside> tag represents ancillary information related to the contents of the article tag, other than the article label content.

The <aside> content can be used as the sidebar for the article.

The header:

Hgroup:

The footer:<footer> tag represents a footnote to a block of content throughout a page or page, and in general it contains the creator's name, the date of creation, and the author's contact information.

Tip the contact information within the:<footer> element should be located in the <address> tag.

The figure:<figure> tag specifies separate stream content (images, charts, code, and so on).

The content of the figure element should be related to the main content, but if deleted, it should not affect the flow of the document.

The figcaption:<figcaption> tag defines the caption of the figure Element (caption).

The "figcaption" element should be placed in the position of the first or last child element of the "figure" element.

New Media Elements:

video:<video> tags define videos, such as movie clips or other video streams.

Audio:<audio> tags define sounds, such as music or other audio streams.

enbed:<embed> tags define embedded content, such as plugins.

New Form Control Tags:

Email: email must be entered

URL: You must enter a URL address

Number: You must enter a value

Range: Must be entered in a range of values

Date pickers: Has more than one new input type to pick the date and time: date-Select Day, month, year month-Select month, year week-Select Week and year time-select time (Hours and minutes) datetime-Select Time, day, month, year (UTC time) datetime-local-select time, day, month, year (local time)

Search: For searching the domain, the field appears as a regular text field.

Color: Colour picker.

Other additions:

The mark:<mark> tag defines the marked text. Use the <m> tag when you need to highlight text.

The progress:<progress> label identifies the progress (process) of the task. Ep:<progress value= "max=" ></progress>

ruby:<ruby> tags define ruby annotations (Chinese phonetic notation or characters). A RUBY element consists of one or more characters (requiring an explanation/pronunciation) and an RT element that provides that information, and an optional RP element that defines what is displayed when the browser does not support the "Ruby" element.

Wbr:word Break Opportunity (<wbr>) specifies where in the text to add line breaks.

canvas:<canvas> tags define graphs, tables, and other images.

<canvas> tags are just graphics containers, and you must use scripts to draw graphics.

Details:<details> tags are used to describe the details of a document or part of a document.

Currently only Chrome and Safari 6 support <details> tags.

The datalist:<datalist> label defines the list of options. Use this element in conjunction with the INPUT element to define the possible values for input.

DataList and its options are not displayed, it is just a valid list of input values.

Use the List property of the input element to bind the DataList.

All major browsers support <datalist> tags, in addition to Internet Explorer and Safari.

The keygen:<keygen> tag specifies the key pair generator field used for the form.

When the form is submitted, the private key is stored locally and the public key is sent to the server.

The output:<output> tag defines different types of output, such as the output of a script.

HTML5 elements to be removed:

Tags that can be replaced by CSS: Basefont, big, center, font, S, Strike, TT, U. These labels are purely for the screen display service, HTML5 in the promotion of the display features in the CSS unified editing.

No longer using frame frames, HTML5 is no longer supported, only the IFRAME framework is supported.

Only some browsers support tags: applets, bgsound, Blink, Marquee, and so on.

Other abolished tags: abolition of RB, using Ruby instead;

Abolition of acronym using ABBR substitution;

Abolition of DIR using UL substitution;

The abolition of the isindex using form and input in a way of substitution;

Abolition of listing using the pre substitution;

Repeal XMP using code substitution;

Abolition of NextID use of GUIDs;

Repeal Plaintex uses the "Text/plian" (unformatted body) MIME type substitution.

HTML5 Global Properties

data-*: Use the Data-* property to embed the custom data.

The Data-* property is used to store private custom data for a page or application.

The Data-* property gives us the ability to embed custom data properties on all HTML elements.

Stored (custom) data can be leveraged by JavaScript in the page to create a better user experience (no Ajax calls or server-side database queries).

The property name should not contain any uppercase letters and must have at least one character after the prefix "data-", and the property value can be any string.

Hidden: If this property is set, it specifies that the element is still not or is no longer relevant. The browser should not display elements that have the specified hidden attribute. The hidden property can also be used to prevent users from viewing elements until certain conditions are matched (for example, a check box is selected). JavaScript can then delete the hidden property to make this element visible.

The Spellcheck:spellcheck property specifies whether the element is checked for spelling and grammar.

You can check spelling: text values (not passwords) in input elements, text in <textarea> elements, and text in editable elements.

The Tabindex:tabindex property specifies the tab control order of an element when the TAB key is used for navigation.

The following elements support the TabIndex attribute: <a>, <area>, <button>, <input>, <object>, <select> and < Textarea>.

The Contenteditable:contenteditable property specifies whether the element content can be edited.

If the element does not set the Contenteditable property, the element inherits the attribute from its parent element.

Element and label structure of HTML5