Channels ▼
RSS

Open Source

HTML 5 Starts Looking Real


Rob Cherny is lead developer for user experience consultants NavigationArts.


The World Wide Web Consortium's statement last month that it was retiring the XHTML 2 Web markup language in favor of HTML 5 sent ripples across Web development waters. The declaration solidified HTML 5 as the official future of Web development based on open standards. In the process, HTML 5, with its plethora of new features, was certified as the first legitimate challenger to the proprietary solutions of Adobe Flash, Microsoft Silverlight, and Sun JavaFX. What, you don't find a new version of a Web markup language that exciting? It's true, some of the new elements and tags defined in the core HTML 5 working draft are probably in the boring-but-important category -- such as new semantics in tags including nav, header, section, aside, and footer, among others. But there's a lot to intrigue anyone doing or in charge of Web development:

  • Native plug-in-free audio and video via tags
  • A Canvas element for drawing, dynamic text, and animation
  • Drag-and-drop event data model
  • Cross-document and cross-domain messages
  • Ajax navigation history (your Back button will work!)
  • Geolocation
  • Network status awareness (online/offline)
  • Enhanced data types for form controls
  • A rich text-editing model
  • Local storage in client-side databases
  • Web worker threads

These each solve some specific problems, but, more important, they bring HTML, JavaScript, and Cascading Style Sheets (CSS) development on par with many key Flash and Silverlight features. Why does this matter? Openness. Before many of these HTML 5 features, there was no real open alternative to Adobe and Microsoft's closed solutions. HTML 5 changes this by supporting open standards that expose underlying technologies, enabling integration, innovation, and development of more complex software and services.

Why Openness Matters

The Web has succeeded because of its open architecture -- text-based, accessible, fully open, platform independent. This architecture is based on publicly defined HTML, CSS, JavaScript, XML, RESTful APIs, specifications, and network protocols. Anyone with the means can create software to browse or serve the Web by implementing these standards on any platform, allowing the unfettered exchange of ideas, information, and commerce. To many developers, this open architecture is the whole point of the Web. If proprietary technologies and browser plug-ins were required for every site, the Web couldn't run as it does today, nor would the Web be as successful as it has been. A closed, proprietary, plug-in-based Web would break user platform expectations and mix up usability conventions such as context menus, keyboard shortcuts, and form controls. It would prevent bookmarking of URLs and use of the back button. It would constrain users with accessibility concerns, from text resizing to high-contrast viewing.

Admittedly, proprietary solutions can offer great innovation, but they also add barriers to use and frequently limit their development to usage of specific development tools. This is because only select experts know how the technology works, and only proprietary tools can generate the required files, making vendor lock-in a reality.

5 New Tools: HTML 5 Adds These Key Features

Canvas -- JavaScript to create Web graphics

Location API -- Interface to location data from GPS or other sources

Video Element -- Easier to embed video on Web pages

AppCache -- Allows Web sites to launch offline

Web Workers -- Background threads that speed execution

Conventional wisdom once held that different browser vendors' proprietary features and interpretations had made consistency in Web development nearly impossible to implement. This has changed. Since the early 2000s, most Web browsers have supported the W3C's open standards in a much more uniform way, making development more straightforward. You only need to look at how users rapidly adopted Mozilla Firefox, Apple Safari, Google Chrome, and Opera to see how standards compliance leads to developer and user converts. Collectively, these browsers already have implemented large parts of the HTML 5 feature set that are, in most cases, enabled without proprietary plug-ins. This is the Open Web at work.


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