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?”

I’m glad to say that I think I’ve come across a near-perfect solution…

There really shouldn’t be a problem in the first place: a CMS provides efficient, flexible and scalable centralized control over content while CSS (the Cascading Style Sheet markup language) is designed to provide efficient, flexible and scalable centralized control over presentation. In theory it’s a match made in heaven.

In practice it’s anything but. The problem is that creating a comprehensive style sheet that takes in every possible design element (heading, table, block, list, menu, button and so on) as well as every foible of CSS and, crucially, every bug in the various browser implementations (IE take a bow) is way beyond most users’ capabilities.

The current best workaround for the average user brave enough to move beyond the in-built default themes is to take advantage of the designs that you find on free template sites. It’s a huge advance but it’s only a partial solution. Off-the-shelf templates inherently mean design that is neither unique to your site nor tailor-made to your content.

Now however there’s an alternative.

At first sight Artisteer looks seriously unpromising – an automatic theme creator that generates unique designs every time you click the Suggest Design button sounds like a recipe for design disaster. In practice it really delivers the goods as I discuss in the full Artisteer 2.1 review . And with version 2.x’s ability to export your designs as ready-to-go themes for Joomla, Wordpress and Drupal you can begin exploring your new custom design live on your site within minutes.

With Artisteer’s various Suggestion commands you can quickly hone in on an overall look-and-feel, but what about the inevitable tweaks and iterations involved in any real world design process? It’s here that Artisteer really proves itself a worthy partner to CMS / CSS with its own beautifully efficient, flexible and scalable centralized design engine letting you take ever more granular control over your presentation as-and-when you need it.

The end result, as I say in the review, is that Artisteer makes it “child’s play to automatically create fully customised tailor-made themes that look good and work well”. By providing the bridge that connects CMS and CSS, Artisteer could be the key to unlocking the full and extraordinary potential of both. I strongly recommend giving the free trial a spin.