The Seven Parts of "HTML 5 Fundamentals"

It's Web Wednesday and today we're going to take a step back and share a series by David Giard, who's going to give us a fundamental look at HTML5. Oh, I know YOU don't need this, but you might have a "friend" who does (cough... like me... cough...).

HTML 5 Fundamentals

Read this series of articles to learn more about HTML5 and CSS3

Part 1- An Introduction to HTML5

Part 2 – New Tags

Part 3 – New Attributes

Part 4 – New Input Types

Part 5 – CSS3

Part 6 – More CSS3

Part 7 – HTML5 JavaScript APIs

HTML5, Part 1: An Introduction to HTML5

HTML5 IS BIG

When I think of HTML5, I’m reminded of a quote about space by one of my favourite authors –Douglas Adams. “Space,” says Adams, “is big. Really big. I mean, you may think it’s a long way down to the chemist’s but that’s just peanuts to space.” And the reason this quote reminds me of HTML5 is because HTML 5 is big. Really big. I mean you may think it’s a long way… Well, you get the idea.

The point is that HTML5 is not just one thing. HTML5 is new tags and new attribute to existing tags and new allowed values for existing attributes and new rules about tags and attributes; It’s also a rich set of new JavaScript APIs to enhance your applications; In addition, a new version of Cascading Style Sheets (CSS3) , while not technically part of HTML5, was released at the same time also by the W3C, so we often discuss CSS3 along with HTML5 and I will do so in this paper.

HTML5 is a set of guidelines released by the World Wide Web Consortium (the “W3C” for short) with input from the most popular browser manufacturers, such as Microsoft, Google, the Mozilla Foundation, and Apple.

The browser manufacturers are implementing the HTML5 guidelines at their own pace and in their own order. Due to the enormous scope of HTML5 and the rate at which users tend to upgrade to new browsers, it is unlikely that HTML5 will be on all computers for another decade. Does this mean that HTML5 is irrelevant today? Of course not! Each browser manufacturer is working furiously to implement new features into their browser and encouraging users to upgrade to the latest browser.

You as a developer can start taking advantages of these features today. The challenge, of course, is to build a web application that will use features of new browsers, but still be useable if a user connects with an older browser that does not support the new features. This backwards compatibility is known as “graceful degradation”, meaning that your application downgrades itself gracefully rather than crashing when it encounters a degraded browser. We will talk about ways of making your pages and applications degrade gracefully throughout this paper.

HTML5 GOALS

The W3C had several goals when defining HTML5...

...

HTML5, Part 5 – CSS3

NOTE: If you are unfamiliar with Cascading Style Sheets, please check out my earlier article on the basics of CSS.

Cascading Style Sheets (CSS) have been around for years. They contain styling information to apply to a web page and they are a recommended way to separate content from layout. The Worldwide Web Consortium (W3C) released a new set of CSS recommendations – known as “CSS3” – at about the same time they released the HTML3 recommendations, so these two specification sets are often spoken of together. CSS3 adds a number of new and useful selectors, selector filters, and styles to provide more flexibility in styling web pages.

VALIDATION ...

FONTS ....

TEXT SHADOWS ...

RESIZE ...

ROUNDED CORNERS ...

CONCLUSION

In this article, we covered a few of the new styles introduced in CSS3. In the next article, we will demonstrate a few more CSS3 features.

HTML5, Part 7 – HTML5 JavaScript APIs

HTML5 provides a number of new APIs that developers can call from client-side JavaScript. We will review a few of them here.

DETECTING BROWSER CAPABILITIES

Not every browser supports every new API. If you attempt to call an API not supported by the current, browser, the browser is likely to throw an exception, which could be a bad experience for your users. For Internet apps, it’s best to test if a feature is supported before calling it. Ideally, you should find an alternate way to provide similar functionality for unsupported browsers. At a minimum, though, your application should not crash.

In any event, the first step is figuring out whether the current browser supports the feature you are interested in. For HTML5 API features, the Modernizr library is a good tool to do this. You can download the latest Modernizr script from http://modernizr.com/ and you can use it in your web page by adding a script tag, pointing to the location on your server where you save the modernizer JavaScript file,  as in the example below

SELECTING ELEMENTS ...

CANVAS ...

“DATA DASH” ATTRIBUTES ...

WEB STORAGE ...

GEOLOCATION ...

CONCLUSION

In this article, I described some of the new JavaScript APIs introduced with HTML5.

In this series, I introduced some of the concepts and features of HTML5 and CSS3.

Once you've read his series, you might not (okay, will not) be an HTML5 ninja, but you'll be on the road to better knowing what you don't know, which is a road that can lead to ninja'ness...

Logo Credit: http://www.w3.org/html/logo/