HTML5 / CSS3

HTML5 / CSS3

HTML5 is the latest version of HTML or Hypertext Markup Language. Before that HTML4 reigned supreme for many years under many different guises. CSS3 is an advancement of CSS2 designed to work with HTML5.

I began using the HTML 4 markup language over 10 years ago when I first started to learn about web design. I learnt to design in tables and frames for layout, and spent many hours trying to make websites look good on Internet Explorer 6. I rarely had any problems with Netscape. At the time I remember my lecturer said that JavaScript would not last. How wrong was he! There are JavaScript libraries all over the place now, the most popular of course being jQuery.

The biggest change for me since HTML4 has been the introduction of ‘divs’ and css for layout which replaced tables. However tables are still good for tabular data. For some reason people think that you shouldn’t use tables anymore but I don’t see the logic behind that. How else do you display tabular data easily?

So what difference does HTML5/CSS3 make? Well without getting in to too much detail (because I don’t know enough yet!), it makes quite a lot of difference if you are a designer or developer. It opens up more possibilities to create and develop within a more stable and reliable environment. The biggest problem when designing web sites in the past has always been testing to make sure your web site looked and worked the same on all browsers. Another problem was the variety of different plugins that you had to embed, and then of course there was the limitations of browser themselves. You could have a page loaded with several different technologies requiring all sorts of plugins, and then you had to test the page to make sure it worked on Internet Explorer, Safari, Firefox, Chrome, Opera etc.You still have this to an extent but there are generally less nasty surprises.

With standards compatible browsers such as Firefox and Google Chrome combined with the HTML5 markup language and CSS3 styling abilities, designers and developers can now concentrate more on what they do best, designing and developing, not hours and hours of mind-numbing testing.

Ironically HTML5 is not yet an official standard yet (it should be in 2014), but it has already been taken up by Google, Facebook, YouTube and of course the WordPress CMS to structure their pages so it’s here to stay.

Some neat benefits of HTML5 are the various new tags and of course the <canvas> tag for drawing graphics on the fly using scripting, usually JavaScript.  Offline caching and Geolocation are incredibly useful features too when developing applications. Here’s a neat summary of HTML5 advantages: http://www.html5arena.com/blog/html5/10-major-advantages-of-html5/

For me, there are now a lot of neat extras with CSS3 including animation, the one I see as the most beneficial are media queries so our web sites can be tailored to the various devices such as smart phones and tablets, and who knows what else is coming down the line.

But what about Internet Explorer 7 and 8!

Well some smarty pants put JavaScript libraries together to help us design in HTML5/CSS3 for legacy browsers like the below:

<!-- enable IE8/7 to recognise HTML5 elements -->
<!-- enable IE8/7 to recognise CSS3 media queries -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

So anyway, I held back for a while but now I’m jumping on the HTML5 / CSS train too. All aboard!