Channels ▼
RSS

Web Development

The Arrival of HTML 5


Alexander Korostov is a System Architect at Axmor Software, IBM Solutions Group. Dmitry Paramzin is a Senior Software Engineer at IBM Solutions Group, Axmor Software.


HTML (short for the "Hyper Text Markup Language") is one of the underpinnings technologies of the modern web with the lion's share of web users' Internet activities founded on it. For nearly two decades HTML has worked well while undergoning a number of changes in response to the growing requirements of web users and vendors. It now stands on the brink of the next change -- the coming of HTML 5. At present, the Internet already contains a handful of HTML 5 specification outlines which partially cover HTML 5 features and conceptions. In this article, we review the current state of HTML and describe the most significant HTML 5 innovations.

Prehistory

The initial version of HTML was pioneered by Tim Berners-Lee in the 1980s. The idea was based on and influenced by the SGML format (Standard General Markup Language) used in CERN.

The first description of HTML was introduced to the general public in 1991 in a document called HTML Tags. This document described 20 elements included in the initial design of HTML. The first HTML specification, HTML 2.0, was published as IETF RFC 1866 in 1995. HTML 1.0 was a draft specification.

In 1994, the W3C organization was established with a directive to administer expansion of common web protocols and to advance web interoperability. All subsequent versions of HTML specification were published as W3C Recommendations. HTML 3.2 was published as W3C Recommendation in January 1997 and HTML 4.0 was published in December 1997, with minor edits issued in 1998, 1999, and 2000.

The Web Hypertext Application Technology Working Group (WHATWG) took leadership of HTML development and started work on HTML 5.0 specification in 2004 under the name "Web Applications 1.0". As of now, more than 13 years have passed since the first publication of HTML 4.0 W3C Recommendation and HTML 5.0 is still in a working draft state. Nevertheless, many parts of the draft are stable and have already been implemented in some browsers.

And Then There was DOM

HTML 5 uses a completely different approach to language definition in comparison with those of the past. In contrast with the previous versions of HTML which were based on document syntax, HTML 5 uses the Document Object Model (DOM) as the foundation of the language. DOM is an in-memory language-independent representation of the document and all its elements (objects or nodes). This shifting of the language 'source' to DOM enables abstract specification of HTML elements without relying on concrete formatting syntax. This also allows transparent usage of multiple DOM serialization syntaxes and application of different programming languages, typically JavaScript, for manipulating DOM objects from within scripts. Such manipulation is possible because DOM defines methods along with data attributes.

The authors of HTML 5.0 have chosen the Interface Definition Language (IDL) for describing the interface of the DOM elements in a language-neutral manner. IDL has C++-like syntax and provides various methods for defining OOP concepts, including but not limited to attributes (including read-only), methods, constants and inheritances. Below is an excerpt from HTML 5.0 specification that illustrates the power of IDL. This example is designed for developers familiar with object-oriented programming languages such as C++, Java, or C#.


interface HTMLMediaElement : HTMLElement {
  // error state
  readonly attribute MediaError error;

  // network state
     attribute DOMString src;

     readonly attribute DOMString currentSrc;
     const unsigned short NETWORK_EMPTY = 0;
     const unsigned short NETWORK_IDLE = 1;
     const unsigned short NETWORK_LOADING = 2;
     const unsigned short NETWORK_NO_SOURCE = 3;
  ...
     void load();
     DOMString canPlayType(in DOMString type);
     void play();
     void pause();
  ...
     // controls
    attribute boolean controls;
    attribute float volume;
    attribute boolean muted;
  ...
    // timed tracks
    readonly attribute TimedTrack[] tracks;
    MutableTimedTrack addTrack(in DOMString label, in DOMString kind, 
       in DOMString language);
};

Note that IDL only defines the attributes and methods of elements, not their textual representations. For textual representation, HTML 5 specification uses HTML and XHTML serialization types. In regards to web application authors, this change merely means that they are allowed to write their documents in any of these syntax styles.

While IDL provides numerous advantages, it also has shortcomings in comparison with DTD, the method previously used for defining HTML 4 elements. It's primary disadvantages are:

  • Lack of an obvious way to specify allowable elements hierarchies (i.e. which elements can be children of other elements and vice versa).
  • Absence of means for defining constraints of attributes. It is impossible to specify which attributes are required and which are optional. It is also not possible to specify a set of allowable values.

The authors of HTML 5 have chosen IDL, in place of DTD or the more powerful XSD, because it can abstractly define elements and their behaviors without relying on concrete markup syntax, an impossible task for DTD and XSD.


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.
 
Dr. Dobb's TV