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.
Most websites use client side scripting in JavaScript in conjunction with HTML and CSS. This allows developers to deliver interactive components. HTML5 and CSS3 include new options for such interactive sites, including the ability to build advanced media items such as animation and drawing functions.
Fine, what does HTML5 offer over previous versions then?
HTML5 introduces a range of new elements that developers can utilise. The most notable new elements are the structural elements, media elements including canvas, and new input elements for capturing user information through website forms. The structural tags include "header", "footer", "article", "section", "nav" and "aside". These allow developers to define sections of a page in a more logical, meaningful way than before. HTML5 also includes new tags for embedding media items such as audio and video in a much more straightforward way. The canvas element is one of the most interesting additions, as Web pages can create graphics using JavaScript drawing functions, building these graphic items while the user is viewing the page.
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.
See also:
An Introduction to HTML5 Features
How To: HTML5 Local Storage
Using CSS3 Fonts
How to Get Started with Web Development
No comments:
Post a Comment