There seems to be a lot of confusion lately with regards to what HTML5 actually is. Those in the web development community generally have a good idea of what it entails, if not the nitty-gritty, at least what it may contain. Not so outside of the web development world.

As generally tends to happen, external parties grab hold of these new phrases, half-heartedly look into what they mean, jumble them together and cause a wave of confusion. The latest wave is the lumping together of HTML5 and CSS3 into the general heading of HTML5.

This is misleading.

So what is HTML5 then?

HTML5 is basically an emerging standard that is intending to replace the current versions of HTML (4.01) and XHTML (1.1). It introduces new markup elements and attributes that can be used for describing the structure of a HTML document in a more defined way than is currently available. It also adds the embedding of video files and audio files into a web document.

HTML is the language for describing the structure of web pages

As well as new elements, there are new JavaScript APIs that allow such functionality as drag and drop, local file storage, web SQL, 2D drawing (via the <canvas> element) and file access.

And CSS3?

Like the current version of CSS (2.1), CSS3 allows you to define the presentation of web pages. CSS3 however, introduces a huge variety of new ways to present your designs. It also introduces the idea of “modules” such as box, lists, hyperlinks, background and text. Each module will provide styling control over a certain type of content.

CSS is the language for describing the presentation of web pages, including colors, layout, and fonts

It also introduces new effects such as rounded borders, gradients, and box shadows, all effects that currently require fancy JavaScript or hacky combinations of HTML and CSS in order to achieve them. These will now be available through simple CSS definitions. Of course there are plenty more, this is just one example of the kind of thing that will be available for use.

They’re not the same

See the difference there? HTML is for structure, CSS for presentaion. So in the same way that the current version of HTML (4.01 or XHTML 1.1) is used for structuring a web document, and the current version of CSS (2.1) is used for styling a web document, both HTML5 and CSS3 have the same roles. This hasn’t changed.

They are exclusive of one another. HTML 4.01 can be used with CSS3, HTML5 with CSS 2.1, HTML5 with CSS3, any combination (although the browser needs to support them).

So where has the confusion come from?

The biggest culprit in my eyes is Apple. When they released their HTML5 Demos, people very easily got the wrong end of the stick. This wasn’t done intentionally by Apple, but such is their worldwide appeal and influence, that many people’s first introduction to HTML5 was via Apple’s demos – that, out of seven demos, only two are HTML5 specific.

Don’t get me wrong, I like what Apple have done with these demos (other than forcing you to use Safari in order to view them), and all the demos are coded in HTML5 and use a variety of the new HTML5 elements. What annoys me is the the way they were presented to the public – under the name of HTML5 Showcase. Even the link is misleading. I’m all for promoting HTML5, but it needs to be done properly.

An example of the confusion that reigned (this was prior to the Apple HTML5 demo release) can be seen in The Guardian’s technology blog article A working web version of the solar system – in HTML5, not Flash. It’s been corrected now, thankfully, but it illustrates the confusion that existed then, and largely still exists now.

Conclusion

People need to be educated properly as to what any new emerging technologes actually are and what they are used for. Misleading the public will only lead to problems and misunderstandings as to what can do what and how, causing all sorts of issues between clients and web designers/developers who I’m sure are already dreading being asked: “This design is a bit bland. Can you add some HTML5?”