Premium Content

New Signal Chain Resources from Texas Instruments:

What's The Difference Between HTML 4 and HTML 5

Date Posted: January 06, 2012 10:42 AM
Author: William Wong

World Wide Web Consortium's (W3C) HTML 5 is the wave of the future even though it is still a work in progress. It is designed to replace the HTML 4.01 standard although HTML 5 is backwards compatible. HTML 4 and its earlier incarnations were extended using JavaScript and a host of plugins including Adobe's Flash to provide interactive and multimedia presentations. HTML 5 specification is designed to bring all of that functionality into a single, unified platform.

HTML 5 is important to embedded developers because HTML 5-capable devices like smartphones and tablets will be the norm for controlling embedded devices. The ability to deliver a portion of an embedded device's control program via HTML 5 will allow embedded developers more flexibility.

HTML 5 can also utilize other standards such as W3C's CSS3 (cascading style sheets). For multimedia presentation, the Khronos Group has defined WebGL (Web-based Graphics Library). WebGL extends JavaScript allowing access to 3D graphics hardware. This is something that could only be done requiring special plugins with HTML 4.

New Features

One of the most obvious differences between HTML 4 and 5 is the move to identify the type of information contained within a page. An HTML 4 page typically contained a large collection of <div> elements that would often be identified using id or class attributes. This allowed matching of CSS (cascading style sheet) styles to the data for presentation purposes. It was possible to analyze the contents of a web page using this information as well but there was no standard making each website an island of information that could be viewed.

HTML 5 provides standard elements like <article> (Fig. 1) that allow content to be identified using common tags. This allows a typical web page with a header, footer, article and nav sections to have the same specification across different websites. This makes programmatic processing of a web page easier. Some of the new element types include <section>, <video>, <progress>, <nav>, <meter>, <time>, <aside>, <figure>, <dialog>, <datagrid>, <menu>, <command> and <canvas>.

These tags can allow a page to be constructed without <div>'s although these can still be used. An <aside> can also be used to identify things like sidebars or pullquotes. Likewise, a <aside> allows a figure to contain anything including text and images.

Inline tags like <progress>, <meter>, and <time> allow items to be identified by type. A numeric value can be tagged by <meter> and it can also be used to provide a numberic value while displaying arbitrary text or grahpics. For example, a report card with an A+ might look like this:

As you might quess, <menu> and <command> are used together. The former contains a list of the latter. Menus can be nested as well.

<meter value="100" min="0" max="100">A+</meter>

Of course, this makes the job of web robots for search engines like Google easier but it also makes it more accurate. On the flip side, it makes the job of search engine optimization (SEO) easier for the webmaster as well. It also allows better internal and external manipulation of web pages. For example, HTML 5 allows a program to easily identify all the articles on a page and even all the video or multimedia sections within an article.

The new standard elements will also make it easier to work with HTML 5 text files. Finding matching </div> tags was always a challenge because it matches any <div> element. There are likely to be significantly fewer <article> elements so it is easier to find the matching closing </article>.

Many sites generate pages programatically so proper matching is less of an issue but improperly coded pages. The use of more element types makes error handling of malformed pages better sinces mismatched elements are easier to identify.

CSS | CSS3 | HTML | HTML4 | HTML5 | W3C | WebGL
Part Inventory
Go
powered by:
 

 
You must log on before posting a comment.

Are you a new visitor? Register Here
    There are no comments to display. Be the first one!