One of the most intriguing things about HTML5 is the addition of new element types that allow to place new types of content directly into the web pages without requiring plugins or additional programs. Lets take a look at how we can use HTML5 to place new types of content on our web pages.
New Content Tags in HTML5
First of all, we will taking a look at figure element. Technically, we can place a figure element under sectioning content. Let us see what all it allows us to do with illustrations or visual content.
The HTML5 specification refers it as “The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc., that are referred to from the main content of the document, but that could, without affecting the flow of the document be, moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.”
In many ways, you can look at the figure tag and the related figcaption element as way of grouping or sectioning visual content, related to the pages of overall content.
Next we will discuss video/audio elements along with other HTML5 content tags.
As per HTML5 specification, “The video element is a media element whose media data is ostensibly video data, possible with associated audio data.” Video tag makes it possible for us to embed video on pages.
As per HTML5 specification, “The audio element is a media element whose media data is ostensibly audio data.”
Audio tag can be used directly to embed audio files on pages with audio controllers.
According to HTML5 specification: “The embed element represents an integration point for an external (typically non-HTML) application or interactive content. ”
It is defined as “.. providing scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, games graphics, or other visual images on the fly.”
It means that the canvas API allows us to import graphics, modify them and draw them directly on the page. For using canvas element, we first need to define a canvas area by specifying a canvas element with required width and height. This area can later be use to apply different kinds of content directly into the page or application. However, most of them would require the use of their associated API’s to control them but the basic syntax for placing canvas element on a page is quite simple.
The standard HTML5 specification for each tag mentioned on this article has been supplied from World Wide Web Consortium official website. W3C is an organization responsible for developing standards for world wide web.