Some HTML5 elements & its breif intro

This is a simple list to familiarize with new elements in HTML5 version. Some of the HTML 4.01 elements are currently obsolete, never used, or not used the way they were intended. All those elements are removed or re-written in HTML5.

The new HTML5 version also includes new elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, find Geo location, include web storage, application cache, web workers, etc. So making a basic familiarization with these new HTML5 elements help us to write better web pages for feature.

New canvas Element

<canvas> : Used to draw graphics, on the fly, via scripting (usually JavaScript)

New 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>

New Form Elements

<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

New 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 direction 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

<dialog> : Defines a dialog box or window

<summary> : Defines a visible heading for a <details> element

<figure> : Specifies self-contained content, like illustrations, 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

<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

The removed structuring elements from HTML 4.01

<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>

I collected these information from different websites and blogs to learn HTML5. But still I am too confused about some of these HTML5 elements. Actually we need a detailed description and examples about usage for each HTML5 elements. So I consider this as a to-learn list for me!

Got a project in mind? Send me a quick message, and I'll get back to you within 24 hours!.

Your Questions / Comments

If you found this article interesting, found errors, or just want to discuss about it, please get in touch.

Sarathlal N