01273 704 771
What’s All This About HTML5 and CSS3?
HTML (Hyper Text Markup Language) was developed in 1990 and since then it has been altered countless times, allowing for the numerous changes and trends of the internet. Its function however, which is to place content on a web page, has always remained largely the same.
With the official introduction of CSS (Cascading Style Sheets) in 1996, website design was drastically changed. The burden of styling was lifted from the HTML page and placed into a separate style sheet file. Since then CSS has also undergone a myriad of changes. For more details on the history of CSS check out this W3 document.
For a while now, both designers and developers alike have been eagerly anticipating the arrival of HTML5 and CSS3. Both languages are still currently in development but they both have available features which can be used and displayed on a number of browsers.
The syntax will not be drastically changed but instead will be simplified or added to, so if you’re familiar with HTML or CSS then you shouldn’t have a problem learning the newer versions.
HTML5
Although HTML5 is not due to be completed until 2014 it is already supported by a few browsers and over the next year I expect we will be seeing a rise in support.
The current W3 article on HTML5 can be found here and is well worth a read if you have the time.
Many of the features are available now for demonstration purposes and it is worth learning about these features in anticipation of an official release.
Some of the features brought to you in HTML 5 are as follows:
- A new div naming system. You will be able to use tags such as <header> or <article> in place of the currently used <div class=”Header”> or <div class=”content”>. This makes it a little easier to define the structure of your website. An element flow chart can be seen here to better explain it.
- A simplified doctype tag. Instead of the larger doctype declaration you will need only use <!DOCTYPE HTML>.
- New video and audio support making it very easy for a developer to display videos or audio tracks to a website using markup.
- The new Canvas element will allow you to make 2d images using markup - the amount of features here is outstanding.
- HTML5 should load faster than previous iterations because it uses the WebSockets protocol.
- A new Content Editable tag which allows users to edit specified content.
As you can see, the move to HTML 5 will allow you to easily create dynamic and interactive content within the markup which will be far easier than current methods.
The W3 website lists the current features in far more depth than the above list.
CSS3
Like HTML5, CSS3 is not supported by all browsers, so using it means you need to cater for older browsers to prevent unwanted results.
Learning to use CSS3 won’t be a difficult task. It doesn’t make any radical changes to the current iteration but instead just adds features to allow designers to improve the look and feel of a site.
Some of the new features are as follows:
- Rounded corners – This feature is already widely used, backed up by Javascript to support older browsers. It gives you the ability to round the corners of your divs with out the need for images or a script.
- The border images feature is an ingenious idea which allows you to replace your standard borders with images. You can already see this in action on some sites.
- @font-face allows you to upload any font to your server and reference it meaning you can use virtually any font you like. This isn’t a new feature, having been used in CSS2, but it is likely to become a web standard feature of CSS3.
- Instead of using images to display gradients you can now set a background with a gradient using CSS3. This will give designers a high level of flexibility without having to force users to load a large amount of images.
Most of CSS3 is geared around giving powerful tools to the designer to make designing easier and more flexible whilst also reducing page load times.
You can learn more about CSS3 and its features at the W3 website.
Let’s all hope that HTML5 and CSS3 become supported by all browsers soon so we can begin developing even faster and providing more aesthetically pleasing web content.
