The Web Hypertext Application Technology Working Group (WHATWG) began work on the new HTML 5 standards in 2004. However, HTML 5 received widespread media attention in April 2010, when Steve Jobs (Apple) announced in his public letter titled “Thoughts on Flash” that Flash would no longer be required to consume any type of web content, and new web standards such as HTML 5 will win. Soon after, Adobe Flash was no longer supported in iOS technologies. Has HTML 5 lived up to this expectation? Has it or will it make proprietary browser plugins such as Flash and Silverlight extinct?
What is HTML 5?
Let us start with an introduction to the web markup known as HTML 5. It is a new web standard composed by the World Wide Web Consortium (W3C) that consists of a variety of industry experts representing different companies. HTML 5 is a combination of new HTML tags, new attributes to existing HTML tags, and a new JavaScript API. W3C has stated the HTML markup has not changed since 2000, and thus, is out of date with the current era of web and mobile computing. HTML 5 intends to create more semantic and interactive web pages for the current era, as well as remove tedious and unneeded tags and attributes.
HTML 5 introduces semantics to a web page within the HTML by identifying the [header], [footer], the main section of the webpage, etc. These semantics are then used by the search engines to index pages more accurately. The following tags literally define the section of the page that their name refers to: [header], [footer], [nav],[article], [aside]. The [section] tag is similar to a div tag, but rather than simply being used for css purposes, it assigns semantic meaning to the content within it, suggesting that all the content is related in some manner. The [figure] and [figcaption] tags, define an image and a caption to the image; [hgroup] refers to all headers grouped together; and [mark] highlights certain words, phrases, or sentences, such as within a search result. Only one [h1] tag is allowed within any semantic tag. An [anchor] tag can now be placed around a whole semantic section.
HTML 5 additionally introduces interactions within browsers that reduce our current dependence on third party or proprietary plugins. Some of these tags include [audio] and [video] that displays audio and video files in a browser without the need for a plugin or player, with the aid of the [source] tag. An [audio] or video tag can have multiple sources defined. The browser simply moves on to the next defined source if the previous one cannot be found. The [canvas] tag allows 2D drawing capability, where a developer can capture the pixel by pixel result of the drawing or writing, and conduct actions accordingly. The [command] conducts an action, such as save or submit. Multiple input boxes can be tied in to a [command] tag. Thus, when a [command] is disabled, all relevant input boxes are also disabled.
The [datalist] tag displays help with input boxes. It displays possible options for the user to choose from, or enables the user to type out their own input. The [summary] and [details] tags can be used for expanding headers within a list to see the details; [embed] tag is used instead of objects on the page; [wbr] places a break in an appropriate place as defined by the developer if a really long word needs to wrap to the next line; [progress] displays the progress of an action, especially in the case of ajax calls; [time] can be used to present a date and time on the page, for example, the date-time the page was published. Additionally the new [input] tags in HTML 5 can define a context to the content being entered, such as an email address or a number. This is especially useful in mobile devices where the context of the input box changes the keypad displayed. HTML 5 additionally simplifies the [doctype] tag, and does not require mime types in a script tag when using JavaScript, and in a [link] tag when using CSS as your stylesheet.
JavaScript API
The JavaScript API has features that allow better offline storage of data, and data selection for client-side development. Contacts from Yahoo, Google, etc. will be available in the browser, and can be used by the website. Applications and web pages can be defined as being offline, and are thus cached and received on the client’s browser even when they are offline. Indexed database and Web SQL DB allows for data selection on a webpage with SQL commands. GeoLocation is available to the website, and can deliver the user’s latitude, longitude, and altitude. Server events are the opposite of AJAX call, where calls are made from the server to the client. On the other hand, XMLHttpRequest Level 2 is the next level of AJAX calls, where a secure call can be made to a different server than the origin of the page.
HTML Tags and Javascript API List
The following provides a list of all the HTML tags and Javascript API discussed above and available in HTML 5. A reference to these can be found on the
W3schools website.
HTML
|
Article
|
Footer
|
Rt
|
|
Aside
|
Header
|
Ruby
|
|
Audio
|
Hgroup
|
Section
|
|
Canvas
|
Keygen
|
Source
|
|
Command
|
Mark
|
Summary
|
|
Datalist
|
Meter
|
Time
|
|
Details
|
Nav
|
Video
|
|
embed
|
Output
|
Wbr
|
|
Figcaption
|
Progress
|
|
|
Figure
|
Rp
|
|
JavaScript
|
Contacts
|
Geolocation
|
|
Selection
|
Canvas 2D Context
|
|
Offline Apps
|
HTML Microdata
|
|
Indexed Database
|
Media Capture
|
|
Web Workers
|
Messaging
|
|
Web Storage
|
Forms
|
|
Web Sockets
|
File API
|
|
Web SQL DB
|
|
|
Server Events
|
|
|
XMLHttpRequest Level 2
|
|
The Present and the Future
HTML 5 has great potential for the future with interactions native to the browser that will reduce our dependence on proprietary plugins. However, currently not all features have been adopted by all browsers. For example, several of the browsers have not yet adopted all of the types of [input] fields. Some features, such as [progress], [meter], [contacts], and web SQL DB are not available in any of the browsers. There is still some debate in terms of the SQL that will be used to implement the Web SQL DB feature.
According to Ian Hickson (Google), the person responsible for the syntax in HTML 5, the release date for HTML 5 is in the year 2022. Within this far-off timeline most of the features of HTML 5 will be implemented in all major browsers, and the majority of the community on the web will be utilizing browsers compatible with HTML 5.
This futuristic timeline for HTML 5 ensures that our dependence on plugins, such as Silverlight and Flash has not yet been eliminated. Until a full acceptance of HTML 5 within the major browser used by the web community, most of the tags and syntax of HTML 5 cannot be widely utilized. However, for now, we can rely on some of the tags and API that can perform additional functionality in browsers utilizing HTML 5, while having failsafe methods in browsers not using HTML 5.