HTML5 New Elements

I used a lot of new elements supported by HTML5, and tried a lot in the Web pages to be built later. Thanks to the foreign sites for providing many Free and Open Source HTML5 templates, it makes it easier to understand the application scenarios and meanings of new elements. Here, I will also summarize my experiences:

HTML5 New Elements
1. Semantic/Structural Elements
<Article> Defines an article
<Aside> Defines content aside from the page content
<Bdi> Isolates a part of text that might be formatted in a different ction from other text outside it
<Command> Defines a command button that a user can invoke
<Details> Defines additional details that the user can view or hide
<Summary> Defines a visible heading for a <details> element
<Figure> Specifies self-contained content, like configurstrations, diagrams, photos, code listings, etc.
<Figcaption> Defines a caption for a <figure> element
<Footer> Defines a footer for a document or section
<Header> Defines a header for a document or section
<Hgroup> Groups a set of <Mark> Defines marked/highlighted text
<Meter> Defines a scalar measurement within a known range (a gauge)
<Nav> Defines navigation links
<Progress> Represents the progress of a task
<Ruby> Defines a ruby annotation (for East Asian typography)
<Rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<Rp> Defines what to show in browsers that do not support ruby annotations
<Section> Defines a section in a document
<Time> Defines a date/time
<Wbr> Defines a possible line-break

2. Media Elements
<Audio> Defines sound content
<Video> Defines a video or movie
<Source> Defines multiple media resources for <video> and <audio>
<Embed> Defines a container for an external application or interactive content (a plug-in)
<Track> Defines text tracks for <video> and <audio>

3. Advance Elements
<Canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<Datalist> Specifies a list of pre-defined options for input controls
<Keygen> Defines a key-pair generator field (for forms)
<Output> Defines the result of a calculation

Old Elements discarded by HTML5
<Acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>

Webpage layout impact:
-The layout is clearer and clearer. in the old way, we usually use the div element under float: left to divide all parts of the page, including the page header, footer, navigation, and topic. For example, if the page header contains a navigation area, you can still use div nested div.
-After HTML5 is used, a special header element can be used for the page header, a special footer element can be used at the end of the page, and a special nav element can be used for navigation. if the subject is a text-based area, special article elements can be used to nest images and code snippets in the middle, and specific figure elements can be used.
-In short, the element abstraction is more detailed, which makes the ideographic definition clearer. When the page is reconstructed in the future, the readers can easily analyze the overall structure of the page.

Browser impact:
-Note that not all elements are supported by mainstream browsers, such as details and summary elements. So far, these elements are only supported by chrome. chrome provides default implementations for closing and expanding details elements, when closed
-The author is wondering whether the design submission of this element is from Google employees.-_-|
-In the IE browser series, most HTML5 elements can only be supported by IE9. This is an estimate for Chinese users.
-If you want to use time, a new element that represents time or date, you can replace all kinds of self-made calendar controls. The style and basic functions are provided by the browser, but sadly, no browser vendor currently supports it

Other element experience:
-The embed element provides the ability to embed other plugin applications in webpages. The most common is flash.
-Datalist's rich input box auto-filling and prompt functions allow users to automatically match the options included in option when entering keywords. Currently, it seems that only a few browsers such as Firefox support this function.
-Input type = "range" provides a pull bar to adjust the range of input values. input type = "number" provides an input box for exclusive numbers.
-Aside provides a sidebar design outside the main content area, for example, the bar advertisement area on the right that can be seen on many websites
-I have to mention that canvas provides graphic rendering in a certain range of areas, combined with Javascript Call graphics rendering API, can achieve various effects of the page, a very powerful example: http://www.effectgames.com/demos/canvascycle/

Summary:
-Newly Added HTML5 elements may be a challenge for web page developers, because there are many habits to change and the content to be familiar with is also very detailed.
-In the past, we used table, tr, and td as web pages and used div + css2.x in a large number in the Web2.0 era. Any new design and concept must have its own principles, in today's fast-changing world of agile, page reconstruction uses the old element to nest a huge page with the div and table full of screens. The workload is very huge, that's why New HTML5 elements that are clearer and more ideographic are born.
-In the context of Javascript interpretation speed, browser localization computing capability, and increased hardware speed, for example, the graphic rendering API provided by canvas allows unlimited page effects, web games can even catch up with client games.

Reference:
A good article about HTML5: http://www.ibm.com/developerworks/cn/xml/x-html5/

HTML5 New Elements
1. Semantic/Structural Elements
<Article> Defines an article
<Aside> Defines content aside from the page content
<Bdi> Isolates a part of text that might be formatted in a different ction from other text outside it
<Command> Defines a command button that a user can invoke
<Details> Defines additional details that the user can view or hide
<Summary> Defines a visible heading for a <details> element
<Figure> Specifies self-contained content, like configurstrations, diagrams, photos, code listings, etc.
<Figcaption> Defines a caption for a <figure> element
<Footer> Defines a footer for a document or section
<Header> Defines a header for a document or section
<Hgroup> Groups a set of <Mark> Defines marked/highlighted text
<Meter> Defines a scalar measurement within a known range (a gauge)
<Nav> Defines navigation links
<Progress> Represents the progress of a task
<Ruby> Defines a ruby annotation (for East Asian typography)
<Rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<Rp> Defines what to show in browsers that do not support ruby annotations
<Section> Defines a section in a document
<Time> Defines a date/time
<Wbr> Defines a possible line-break

2. Media Elements
<Audio> Defines sound content
<Video> Defines a video or movie
<Source> Defines multiple media resources for <video> and <audio>
<Embed> Defines a container for an external application or interactive content (a plug-in)
<Track> Defines text tracks for <video> and <audio>

3. Advance Elements
<Canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<Datalist> Specifies a list of pre-defined options for input controls
<Keygen> Defines a key-pair generator field (for forms)
<Output> Defines the result of a calculation

Old Elements discarded by HTML5
<Acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>

Webpage layout impact:
-The layout is clearer and clearer. in the old way, we usually use the div element under float: left to divide all parts of the page, including the page header, footer, navigation, and topic. For example, if the page header contains a navigation area, you can still use div nested div.
-After HTML5 is used, a special header element can be used for the page header, a special footer element can be used at the end of the page, and a special nav element can be used for navigation. if the subject is a text-based area, special article elements can be used to nest images and code snippets in the middle, and specific figure elements can be used.
-In short, the element abstraction is more detailed, which makes the ideographic definition clearer. When the page is reconstructed in the future, the readers can easily analyze the overall structure of the page.

Browser impact:
-Note that not all elements are supported by mainstream browsers, such as details and summary elements. So far, these elements are only supported by chrome. chrome provides default implementations for closing and expanding details elements, when closed
-The author is wondering whether the design submission of this element is from Google employees.-_-|
-In the IE browser series, most HTML5 elements can only be supported by IE9. This is an estimate for Chinese users.
-If you want to use time, a new element that represents time or date, you can replace all kinds of self-made calendar controls. The style and basic functions are provided by the browser, but sadly, no browser vendor currently supports it

Other element experience:
-The embed element provides the ability to embed other plugin applications in webpages. The most common is flash.
-Datalist's rich input box auto-filling and prompt functions allow users to automatically match the options included in option when entering keywords. Currently, it seems that only a few browsers such as Firefox support this function.
-Input type = "range" provides a pull bar to adjust the range of input values. input type = "number" provides an input box for exclusive numbers.
-Aside provides a sidebar design outside the main content area, for example, the bar advertisement area on the right that can be seen on many websites
-It must be noted that canvas provides graphic rendering in a certain range of areas. Combined with Javascript, it calls the graphic rendering API to implement various special effects on the page.
 

Summary:
-Newly Added HTML5 elements may be a challenge for web page developers, because there are many habits to change and the content to be familiar with is also very detailed.
-In the past, we used table, tr, and td as web pages and used div + css2.x in a large number in the Web2.0 era. Any new design and concept must have its own principles, in today's fast-changing world of agile, page reconstruction uses the old element to nest a huge page with the div and table full of screens. The workload is very huge, that's why New HTML5 elements that are clearer and more ideographic are born.
-In the context of Javascript interpretation speed, browser localization computing capability, and increased hardware speed, for example, the graphic rendering API provided by canvas allows unlimited page effects, web games can even catch up with client games.