Channels ▼
RSS

Design

The Arrival of HTML 5


Function Precedes Form

HTML 5 specification continues the trend of becoming a semantic-oriented language. Authors of HTML 5 encourage developers to separate information from presentation. All presentation instructions must be placed in CSS and pure presentation HTML elements have become deprecated (e.g. <center>, <big>, <font>, <s>, <u>, etc). Note that the meaning of <i> and <b> elements have been corrected: these elements now represent "alternate voice or mood, or otherwise offset from the normal prose…" and "stylistically offset from the normal prose, such as keywords, product names …" respectively.

Along with deprecated presentation tags and changed definitions, HTML 5 introduces many new purely semantic elements, including:

  • Section semantic:
    • <article>: An independent piece of content of a document, such as a blog entry or newspaper article.
    • <aside>: A piece of content that is only slightly related to the rest of the page.
    • <header>: A group of introductory or navigational aids.
    • <footer>: A footer for a section which can contain information about the author or copyright information.
    • <nav>: Represents a section of the document intended for navigation.

  • Group semantic:
    • <figure>: Can be used to associate a caption together with some embedded content, such as an image or video.

  • Text semantic:
    • <progress>: Completion of a task, such as downloading or when performing a series of expensive operations.
    • <meter>: Represents a measurement, such as disk usage.
    • <time>: Date and/or time.
    • <details>: Additional information or controls which the user can obtain on demand. The summary element provides its summary, legend or caption.
    • <output>: Some type of output, such as a calculation done through scripting.

The idea of these tags is to provide additional semantic information about the content to browsers, information aggregators and web crawlers. This has become especially important for search engines (to properly categorize, split and rate the significance and relevance of each part of content), mashups and other information aggregation tools (e.g. price comparison catalogs, blog aggregators, etc).

REST in Forms

REST (short for "Representational State Transfer") is a popular web applications architecture style. REST application can be characterized by a clear separation between clients and servers, stateless communications with the server (no client context is stored on the server between requests) and uniform client-server protocol that can be easily invoked from other clients. Applied to HTTP, it encourages usage of URI for identifying all entities and standard HTTP methods like GET (retrieve), POST (change), PUT (add) and DELETE (remove) for entity operations. However, before HTML 5 it was impossible to send PUT and DELETE HTTP requests straight from the HTML form. This forced developers to use JavaScript or encode method names using additional parameters (e.g. _method).

HTML 5 now fully supports issuing PUT and DELETE requests from HTML forms without any workarounds. This is an unobtrusive, but ideologically important innovation which brings more elegance into web architecture and simplifies development of HTML UI for REST services. Below is an example of using the PUT method for adding a new contact via a REST service:


<form method="put"
      action="https://mycontacts.com/api/contacts/">
 <p><label>Name: <input name="name"></label></p>
 <p><label>Telephone: <input type="tel" name="tel"></label></p>
 <p><label>E-mail: <input type="email" name="email"></label></p>
 <button type="submit" name="submit">Add</button>
</form>

Communicating Documents

Now documents opened in browsers can exchange data using messages. Such data exchange may be useful on a web page that includes several frames with the data loaded from different origins. Usually, a browser does not allow JavaScript code to access/manipulate the objects of other documents opened from a different origin. This is done to prevent cross-site scripting and other malicious and destructive endeavors. However, sometimes it is required to exchange data between frames, such as a parent document and an inner frame or to provide an API that allows controlling the behavior when the page is embedded in another page. To address this need, the new onmessage event handler has been introduced for a Window object. JavaScript from another frame can send events by using the Window.postMessage() method (this method is permitted to be invoked by JavaScript loaded from another origin).


window.addEventListener('message', onHello, false);

function onHello(msg) {
  if (msg.origin == 'http://example.com' && msg.data == 'Hello') {
      // send similar message back
      e.source.postMessage('Hello', msg.origin);
      helloMsgCounter++;
  }
}

Note that it is essential to validate an input event (origin and/or content) before executing an associated logic to avoid injection of malicious data (executing malicious commands). It is also important to carefully consider the target origin and the data to be sent to avoid sending confidential content to other windows.

Realization

HTML 5 brings many useful and eagerly awaited features. However, it will take much time to become an official W3C Recommendation since the specification is quite sizable and refers to other draft specifications (e.g. CSS 3).

Whereas the standard is still under construction, many of its features are already supported by popular web browsers. The actual state of the implemented features is indicated in the HTML draft. A random browser can be tested for support of HTML 5 features via an online test. Some useful compatibility tables are available online, such as http://caniuse.com/.

A few of the features that are currently supported, or partially supported, in the latest releases and beta versions of popular browsers are canvas, audio and video elements, cross-document messaging, offline cache management, and SVG. Unfortunately, at this writing one of most widely distributed browsers Internet Explorer 8 does not support HTML 5. Current Internet Explorer 9 Platform Preview slightly improves this situation but its HTML 5 capabilities still far behind other popular browsers.

It seems that currently HTML 5 may be used for internal web applications developed for specific browsers or devices with default browsers that support HTML 5 features, such as the Apple iPhone and the iPod. Authors of JavaScript libraries can also utilize HTML 5 features if execution platforms support it by having fallback implementation of the same functionality that will work for older versions of other browsers.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video