HTML5 Introduction  

May 13th, 2011

HTML5 is the revised standard for HTML, XHTML and the HTML DOM. Although it is new, most modern browsers support HTML5. It is an upgrade to HTML4 which includes the following features:

  • New content specific elements: footer, header, navigation, article, section, aside, figure.
  • New form controls: time, date, calendar, url, search, email.
  • The video and audio elements for media playback.
  • Better support for local offline storage.
  • The canvas element for drawing.
  • Context menus.
  • Inline elements: mark, meter, progress.
  • Deprecated elements: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, noscript, s, strike, tt, u.
  • Character encoding.
  • Optional href on links.
  • The async attribute.
  • Interactive elements: details, menu, datagrid.

HTML4 is such a popular mark up format that HTML5 reinforces its success. It still functions with your existing web application, so that it is backward compatible. The collation of its individual features can support geolocation, video, audio and canvas. It is more than angle brackets and tags due to its interactive abilities with other programming languages. The new semantic elements supported by HTML5 include sliders, daters, email input types, amongst other input controls. Upgrading to HTML5 is as simple as defining your document type with <!DOCTYPE html>.

Browsers such as Firefox, Chrome, Safari, Opera, Google and Microsoft IE9 already support HTML5 which is defined by WC3.  For further reading refer to the following: http://www.w3.org/TR/html5/introduction.html

This is an example taken from Digital Mosaic’s website for Rolls Royce, of how simple HTML5 video code can look:

<video width=”815″ height=”458″ poster=”preview1.jpg”>

<source src=”video1.webm” type=”video/webm; codecs=”vp8, vorbis”>

<source src=”video1.mp4″ type=”video/mp4; codecs=”avc1.42E01E, mp4a.40.2″>

<source src=”video1.ogv” type=”video/ogg; codecs=”theora, vorbis”>

</video>

However, as with all new versions of programming languages, there are pros and cons to consider. The advantages are most major players have implemented the HTML5 doctype.

  • Web browsers all become subject to strict rendering.
  • Progressive enhancement can augment structural elements into an impressive web page.
  • It is validated by core authorities and the more a website is marked up with HTML5, the higher the probability that it will benefit from SEO.
  • A drawback could mean additional formatting or scripting for older browsers.

The current version of HTML5 contains syntax that is more rigid than before. In short, this means that this allows users to browse with a more enriched experience. It evolved with end users and developers influencing the design principle. There have been additional syntax changes, the character encoding is immediately functional apart from some Android based devices and it has advanced greatly by informing user agents how to handle errors. Also it has acquired new semantic meanings via removal and alterations to some elements.

There are new mark up features, sectioning of content, form enhancements that integrate web and desktop applications, spinners that enable numerical data to be entered, implementation of placeholder text, email address validation, date pickers, range, data list and patterns. ‘Required’ also eliminates the repetitive task of JavaScript validating forms. Canvas elements are the most exciting attributes of HTML5 for developers, allowing them to work limited only by their imaginative and technical capabilities.

The video and audio elements overcome the inherent plugin requirement of its predecessor. Video tag via HTML5 is integral to browsers as multimedia is here to stay. It also has the ability to draw on video, customise and rotate moving images. Thus the web platform is accelerating with modern browsers. There is improvement of graphic support, speed and increased storage. There has been a contribution to open source browsers via developers and an enhancement in the JavaScript engine. It took eight years to achieve awareness and support for pre-dated HTML versions. HTML5 is a realised technology already and simplifies development coding.

Vector graphics have become an intrinsic part of the web. Scalable Vector Graphics (SVG) enhance mouse driven games whereas Canvas benefits keyboard orientated games. The beauty of this programming upgrade is that it explicates scripts, holds images and information dense data is condensed. You can now deploy 95% of SVG to web. HTML5 is the long awaited update to HTML4, providing useful additions to the HTML language by simplifying coding and making web based applications more efficient and accessible.

Article written by Christina Georgiou