If you are involved in Web design, development or just the Web itself in any way, you will almost certainly have become aware of the excitement about the emerging developments in HTML5 and CSS3. This article will attempt to explain some of the reasons for this excitement. HTML5 and CSS3 represent more than a normal update of the languages in question, as they include a number of substantial changes that promise to fundamentally alter the way developers create pages and sites.
OK, so what are HTML5 and CSS3 anyway?
HTML is the main markup language (Hypertext Markup Language) used in Web pages. When you visit a website, the content items you see (text, images, media etc) are included in HTML markup code. HTML uses tagged code to define the overall structure of a page, with elements enclosing the content items. When your browser receives the HTML markup code for a page, it interprets it and presents it to you accordingly.
While HTML defines page structure, CSS (Cascading Style Sheet) code determines the styling of a page, including layout and various other visual aspects of what you see. The way the content of a page is displayed is therefore determined by both HTML and CSS code. HTML5 and CSS3 are the most recent versions of these two specifications. Essentially, with HTML5 and CSS3, developers have new techniques to choose from when building pages.
Fine, what does HTML5 offer over previous versions then?
And CSS3, what does it bring to the table?
CSS3 includes a variety of new properties and functions, allowing developers to create a greater level of interaction than before. The transform and transition functions create interactive animations in both 2D and 3D, while the "keyframes" rule defines animated sequences that elapse over time. CSS3 also introduces advanced user interface styling and the ability to use fonts without the user having them installed on their own computer.
What does semantics have to do with this?
You will see people referring to emerging techniques in Web design as being semantic. This basically means that the actual markup for a page will include an indication of semantics, or meaning, by letting the browser know something about the content of an element. For example, in the past many HTML elements simply grouped a chunk of Web page content in a meaningless way. The HTML defined the content and the CSS styled it, with only the developer and user interpreting the meaning of the content in any way. With the new structural elements in particular, HTML5 markup indicates a level of meaning that the browser can interpret and use to make the page more accessible to the user, whatever their environment happens to be.
How do HTML5 and CSS3 relate to Flash?
Many people are also making claims about the impact that HTML5 and CSS3 will have on other technologies such as Flash. It's certainly still a bit early to make huge claims about how much longer Flash will last. However, with HTML5 and CSS3, developers can achieve the kinds of interactive multimedia component that was previously mainly done in Flash. By using these new specifications instead, developers can create the same results in a way that is more accessible to different users.
Sounds good, why isn't this stuff all over the Web already?
The main factor delaying the adoption of HTML5 and CSS3 is browser support. The main browsers are all working on increasing support of these new standards, some faster than others, but full support is still a long way off. For this reason developers cannot assume that users will be able to engage with new effects created using the most recent specifications, and must provide alternatives for users with older browsers.
An Introduction to HTML5 Features
How To: HTML5 Local Storage
Using CSS3 Fonts
How to Get Started with Web Development