New Elements in HTML5 is part 2 of
Beginner’s Guide to HTML5.
HTML 5 introduces new elements to HTML5 for the first time since the last millennium. New structural elements include
aside, figure, and section. New inline elements include time, meter, and progress. New embedding elements include video and audio. New interactive elements include details and command.
: is an HTML element which can be used to draw graphics using scripting. It can, for instance, be used to draw graphs, make photo compositions or do simple animations.
One of the most exciting and long-awaited features in HTML5 the : element, enabling native audio playback within the browser.
HTML5, includes specifications for a : tag, that’s meant to allow web developers to add a video to a page in the same way they would add an image. In order for this to work, web browser developers have built video playback functionality into their browsers.
The HTML : tag is used to specify multiple media resources on media elements (such as and ).
The HTML : tag is used for embedding an external application or interactive content into an HTML document. The tag was introduced in HTML 5.
The : tag specifies text tracks for media elements ( and ). This element is used to specify subtitles, caption files or other files containing text that should be visible when the media is playing.
The HTML : tag is used for providing an “autocomplete” feature on form elements. It enables you to provide a list of predefined options to the user as they input data.
The HTML : tag is used to process Web forms with certificate management systems. The element generates a secure key and submits the public key.
The HTML : tag is used for representing the result of a calculation, such as one performed by a script.
: The HTML
tag is used to represent an article. More specifically, the content within the
tag is independent from the other content on the site (even though it could be related). By “independent” I mean that its contents could stand alone, for example in syndication. Examples of article content could include a forum post, a newspaper article, a blog entry, or a user-submitted comment.
: The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.
is a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.
: One of the new elements for HTML 5 is the
element which allows you to group together links, resulting in more semantic markup and extra structure which may help screenreaders.
: The HTML
The : tag represents a part of text that must be formatted in a different direction from the text surrounding it.bdi stands for Bi-directional Isolation. This tag is mostly useful when embedding user-generated content with an unknown directionality.
A command is the abstraction behind menu items, buttons, and links. Once a command is defined, other parts of the interface can refer to the same command, allowing many access points to a single feature to share aspects such as the disabled state. : Note: The tag is currently not supported in any of the major browsers.
: The details element represents a disclosure widget from which the user can obtain additional information or controls. Essentially, we can use
to create an accordion-like widget that the user can toggle open and closed. Inside
, we can put any sort of content we want.
The HTML : tag indicates a dialog between a number of people. Examples of dialog could include a conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log.
: The HTML
tag specifies a summary/caption that can be used in conjunction with the HTML5
tag. This summary/caption can be clicked on to expand/collapse the details as required.
: The HTML
tag is used for annotating illustrations, diagrams, photos, code listings, etc. You can use the
element to associate a caption together with some embedded content, such as a graphic or video.
The : tag defines a caption for a element. The element can be placed as the first or last child of the
HTML 5 introduces mark as a way to highlight text to indicate its relevance to the user. :
The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate. :
The progress element represents the completion progress of a task. It’s typically displayed as a progress bar. :
The HTML : tag is used for specifying Ruby annotations, which is used in East Asian typography.
The : tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.
The : tag defines what to show if a browser does NOT support ruby annotations.
The HTML : tag is used for declaring the date and/or time within an HTML document.
The HTML : tag is used for specifying a line break opportunity.
Learn more in details about
New Media Elements in HTML5