What's The Difference Between HTML 4 and HTML 5

Jan. 6, 2012
Did you ever have a web page that would not display properly? HTML5 is designed to address this issue along with many more but how does it differ from HTML 4?

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. A+

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 fewer
elements so it is easier to find the matching closing
.

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.

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 element was not part of HTML 4 but it was supported by most browsers. The HTML 5 attributes include height and width as well as MIME type and src. This essentially changes a ubiquitous element into a standard element.

The provides a drawing target for graphic APIs. This includes WebGL although WebGL is not part of the HTML standard. 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.

About the Author

William G. Wong | Senior Content Director - Electronic Design and Microwaves & RF

I am Editor of Electronic Design focusing on embedded, software, and systems. As Senior Content Director, I also manage Microwaves & RF and I work with a great team of editors to provide engineers, programmers, developers and technical managers with interesting and useful articles and videos on a regular basis. Check out our free newsletters to see the latest content.

You can send press releases for new products for possible coverage on the website. I am also interested in receiving contributed articles for publishing on our website. Use our template and send to me along with a signed release form. 

Check out my blog, AltEmbedded on Electronic Design, as well as his latest articles on this site that are listed below. 

You can visit my social media via these links:

I earned a Bachelor of Electrical Engineering at the Georgia Institute of Technology and a Masters in Computer Science from Rutgers University. I still do a bit of programming using everything from C and C++ to Rust and Ada/SPARK. I do a bit of PHP programming for Drupal websites. I have posted a few Drupal modules.  

I still get a hand on software and electronic hardware. Some of this can be found on our Kit Close-Up video series. You can also see me on many of our TechXchange Talk videos. I am interested in a range of projects from robotics to artificial intelligence. 

Sponsored Recommendations

Comments

To join the conversation, and become an exclusive member of Electronic Design, create an account today!