Top Navigation

HTML5 – New Application Focused Tags

As soon as HTML4 specification was released in 1999, the W3C focused on the goal of changing the syntax of HTML from SGML to XML, it was during that period that HTML 1.0 was released and work on xHTML 2.0 started.

In contrast to web designers and developers during the same period, focused on how CSS and javascript would help them build more interactive interface for their increasingly more complex web applications. In many instances developers turn to offering environment such as flash, flex and silverlight to compensate for HTML’s shortcomings.

The HTML5 specification attempts to address those shortcomings by introducing several tags that will assist developers in building applications natively in HTML. Some of these tags are focused on interactivity while other give new form controls and still others allow the formatting and mark up of data types necessary for modern web applications.

Application focused tags

<meter></meter>

“The meter element represents a scalar measurement with 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. This is also known as a gauge.”

<progress></progress>

“The progress element represents the completion progress of a task. The progress is either indeterminate, indicating that progress is being made but that is not clear how much more work remains to be done before the task is complete (e.g. because the task is waiting for remote host to respond), or the progress is a number in the range zero to a maximum, giving the fraction of work that  has so far been completed.”

Both meter and progress elements are used to represent data visually. But with few differences, the meter element is design to display results within a determined range, it shouldn’t be used unless both the min and max values are known. On the other hand, the progress element is used when we need to display the current progress or completion of a task. So, while the two element are very similar to each other but they are clearly designed for different purposes.

<time></time>

The element allows us to markup time and date information a machine readable way, it makes it easy to  for pages to share information with items such as counters, social applications and data feeds.

The HTML5 specification states-

“The time element represents either a time on a 24 hour clock, or a precise data in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. This element is intended as a way to encode modern dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user’s calendar.”

The time element also contains attributes such as pub date that help give further definition to data and time. These is an ongoing debate about the time element that may result in the change in the final specification. Currently time element can only markup time in Gregorian calendar format which will limit any dates before the calendar. The time and date information is also restricted to very specific formatting requirements, referring to April of 2001 is not allowed.

<details></details>

“The details element represents a disclosure widget from which the user can obtain additional information or controls.”

Simply, creating an accordion or tabbed widget structure could be as simple as enclosing the content in a detail tag.

<command></command>

“The command element represents a command that the user can invoke.”

Attributes all us Can be used to build toolbars

<menu></menu>

“The menu element represent a list of commands.”

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.

, ,

No comments yet.

Leave a Reply