HTML4 versus HTML5 tags
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
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 (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 , , , , , , , , , , , and .These tags can allow a page to be constructed without
's although these can still be used. An allows a figure to contain anything including text and images. Inline tags like , , and allow items to be identified by type. A numeric value can be tagged by 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, and are used together. The former contains a list of the latter. Menus can be nested as well.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
tags was always a challenge because it matches any element. There are likely to be significantly fewerMany 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.
HTML 5 Forms
Forms are indispensible interactive HTML mechanisms. Input text fields often required JavaScript to handle different data formats like dates as well as determining whether fields contained data. JavaScript can still be used with input fields but many of the common types of input data can be defined in a consistent fashion.
New attribute types include dates, times, email and urls. Dates and times are common items and the web has made email addresses and urls ubiquitous. Having standard input types allows more consistent handling as well as providing a more consistent user interface.
The addition of the required attribute to elements will eliminate a lot of inconsistent JavaScript. It allows the browser to enforce data entry rules. Scripting can still implement more complex input rules.
There is also a placeholder attribute. The value is text to be displayed in the input field when no data has been entered yet. HTML 4 pages typically do this with JavaScript that has to handle input. Now it is the browser's job.
Another neat addition is the pattern attribute. This takes a regular expression as a value like "\\[A-Za-z0-9\\]\{5-20\}". This allows alphanumeric strings from 5 to 20 characters to be entered in the field.
HTML 5 allows entire regions to be marked as contenteditable. This allows wiki-style editing. The designMode attribute applies to an entire document. These attributes are augmented by new APIs as well.
Multimedia Extensions
Multimedia content was often deployed using and elements in conjuction with JavaScript or plugins like Flash. These elements still existing in HTML 5 and they have been extended but also replaced for many applications by the , and elements.The
The display area not only provides an output mechanism but also a programmatic input mechanism as well. The and elements address the gap in HTML 4 for playing multimedia files. This deficiency was typically addressed using the non-standard element in the past along with plugins. Of course there are new APIs for handling these elements so web designers are not restricted to just playing content when a page is viewed.Offline And Interactive Applications
One aspect of HTML 5 that might interest embedded developers is the creation of offline applications. This is possible now with some fancy JavaScript and proper configuration but HTML 5 moves from non-standard to standard HTML 5 API support for this environment. This would allow applications to be created for a device that would operate without the need for a host web server although installation may be via a website. These might be control programs for embedded devices or applications that can analyze data that might be posted online by an embedded device.
There is also an HTML 5 API that allows a Web applications to register with the host so they can handle certain protocols or media types. This is one way a developer could match application support for content obtained from an embedded device. Right now this would typically be done with an application that would have to interact explicitly with a network port.
HTML 5 is designed to be application friendly. There is a new drag-and-drop API that works with elements that contain the new draggable attribute. The is also an API allows manipulation of the browser's history support. This means pages can provide better support for the browser's back and refresh button. This will hopefully eliminate double billing problems common on some poorly designed websites.
In a sense, HTML 5 and JavaScript are the write-once-run-anywhere solution that Java was supposed to be. Java does this well from a programatic standpoint but HTML 5 has a much wider target audience than a JVM.
Wrap Up
Many elements like center, font, and strike have been depreciated. There are new, recommended methods for providing the functionality of these items. The depreciated elements will still be supported by browsers that are HTML 5-compatible but they should not be used since support for these will eventually disappear.
This has been a brief summary of the difference between HTML 4 and HTML 5. The actual specification documents are hundreds of pages long. HTML 5 represents a major step forward for the web and for developers.
