Five Things You Should Know About HTML5

1. It’s not one big thing

[mock video player]

You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation.

You may think of HTML as tags and angle brackets. That’s an important part of it, but it’s not the whole story. The HTML5 specification also defines how those angle brackets interact with JavaScript, through the Document Object Model (DOM). HTML5 doesn’t just define a <video> tag; there is also a corresponding DOM API for video objects in the DOM. You can use this API to detect support for different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the <video>tag itself.

Chapter 2 and Appendix A will teach you how to properly detect support for each new HTML5 feature.

2. You don’t need to throw anything away

[sample form controls]

Love it or hate it, you can’t deny that HTML 4 is the most successful markup format ever. HTML5 builds on that success. You don’t need to throw away your existing markup. You don’t need to relearn things you already know. If your web application worked yesterday in HTML 4, it will still work today in HTML5. Period.

Now, if you want to improve your web applications, you’ve come to the right place. Here’s a concrete example: HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders and date pickers; others are more subtle. For example, the email input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that don’t support the email input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks. This means you can start improving your web forms today, even if some of your visitors are stuck on IE 6.

Read all the gory details about HTML5 forms in Chapter 9.

3. It’s easy to get started

“Upgrading” to HTML5 can be as simple as changing your doctype. The doctype should already be on the first line of every HTML page. Previous versions of HTML defined a lot of doctypes, and choosing the right one could be tricky. In HTML5, there is only one doctype:

<!DOCTYPE html>

Upgrading to the HTML5 doctype won’t break your existing markup, because all the tags defined in HTML 4 are still supported in HTML5. But it will allow you to use — and validate — new semantic elements like <article>, <section>, <header>, and <footer>. You’ll learn all about these new elements in Chapter 3.

4. It already works

[form field with onscreen keyboard]

Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll find that HTML5 is already well-supported. Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas (Chapter 4), video (Chapter 5), geolocation (Chapter 6), local storage (Chapter 7), and more. Google already supports microdata annotations (Chapter 10). Even Microsoft — rarely known for blazing the trail of standards support — will be supporting most HTML5 features in the upcoming Internet Explorer 9.

[Gears saying "I can help"]

Each chapter of this book includes the all-too-familiar browser compatibility charts. But more importantly, each chapter includes a frank discussion of your options if you need to support older browsers. HTML5 features like geolocation (Chapter 6) and video (Chapter 5) were first provided by browser plugins like Gears or Flash. Other features, like canvas (Chapter 4), can be emulated entirely in JavaScript. This book will teach you how to target the native features of modern browsers, without leaving older browsers behind.

5. It’s here to stay

Tim Berners-Lee invented the world wide web in the early 1990s. He later founded the W3C to act as a steward of web standards, which the organization has done for more than 15 years. Here is what the W3C had to say about the future of web standards, in July 2009:

Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML5 and clarify W3C’s position regarding the future of HTML.

HTML5 is here to stay. Let’s dive in.

❧

Did You Know?

In association with Google Press, O’Reilly is distributing this book in a variety of formats, including paper, ePub, Mobi, and DRM-free PDF. The paid edition is called “HTML5: Up & Running,” and it is available now.
If you liked this introduction and want to show your appreciation, you can buy “HTML5: Up & Running” with this affiliate link or buy an electronic edition directly from O’Reilly. You’ll get a book, and I’ll get a buck. I do not currently accept direct donations.

HTML 5 Presentation

Open Slides in New Window

30+ Very Useful HTML5 Examples, Tutorials and Techniques

HTML5 examples can be really good inspiration for anyone starting a new web project, after all it is the future of web page markup and we all need to prepare for it. HTML5 is being developed as the next major revision of HTML (HyperText Markup Language). The major market and internet leaders are already switching to the HTML 5 platform. With Apple and Google both pushing the standards in order to facilitate more advanced web development, we now see HTML 5 implementations popping up all over the place as more companies get on board with the advanced features.

With the constant drop of Flash usage in web and internet applications, HTML5 is opening new doors to web designers and developers. In this scenario, it is indeed imperative for every web developer to know about basic tutorials, tricks and terms of HTML5.

Here we present before you, a comprehensive list of more than 30 HTML5 examples, tutorials and techniques that you can’t afford to miss if you are a web developer.

Let check out some HTML5 Examples

Create Offline Web Application On Mobile Devices With HTML5

A comprehensive article from the technical library of IBM by IT Architect Dietmar Krueger. In this article, the author describes and explains how challenging it i s to write application for operating systems and mobile platforms. Instead of relying on learning the platform specific languages like Objective-C with Cocoa (on iPhone), the author takes the open way of developing things through HTML5. A very clearly explained and in-depth article.

HTML 5 Demos and Examples

This site have HTML5 examples all over the place and good ones too. HTML 5 experimentation and demos I’ve hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an OR filter).

WTF is HTML5

One page overview of HTML5 – very useful and with good HTML5 examples!

Building a live news blogging system in PHP, Spiced with HTML5

This tutorial show you how to build a news website in HTML5 and CSS3. Every line of code is explained for both HTML and CSS

Designing A Blog With HTML5

Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. This tutorial investigate these by setting u a blog layout.

Semantics in HTML 5

HTML 5, the W3C’s recently redoubled effort to shape the next generation of HTML, has, over the last year or so, taken on considerable momentum. It is an enormous project, covering not simply the structure of HTML, but also parsing models, error-handling models, the DOM, algorithms for resource fetching, media content, 2D drawing, data templating, security models, page loading models, client-side data storage, and more.

There are also revisions to the structure, syntax, and semantics of HTML, some of which Lachlan Hunt covered in “A Preview of HTML 5.”

In this article, let’s turn solely to the semantics of HTML. It’s something the author has been interested in for many years, and something which he believe is fundamentally important to the future of HTML.

HTML5 Web Applications

HTML 5 browser compatibility overview.

Dive into HTML5

Dive Into HTML 5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. I shall publish Drafts periodically, as time permits. Please send feedback. The final manuscript will be published on paper by O’Reilly, under the Google Press imprint. Pre-order the printed Work and be the first in your Community to receive it.

When Can I Use

Here you will find very useful compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies.

HTML5 & CSS3 Readiness

How to Draw with HTML 5 Canvas

Among the set of goodies in the HTML 5 specification is Canvas which is a way to programmatically draw using JavaScript. We’ll explore the ins and outs of Canvas in this article, demonstrating what is possible with examples and link

Have a Field Day with HTML5 Forms

Forms are usually seen as that obnoxious thing we have to markup and style. I respectfully disagree: forms (on a par with tables) are the most exciting thing we have to work with.

Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article.

Coding Up a Web Design Concept into HTML5

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question.

Coding A HTML 5 Layout From Scratch

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play. There are some good HTML5 examples here.

How to Make an HTML5 iPhone App

You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn.

You can also do it with the skill set you probably already have: HTML(5), CSS, and JavaScript.

This tutorial show you how to create an offline HTML5 iPhone application. More specifically, I’ll walk you through the process of building a Tetris game.

Create An Elegant Website With HTML 5 And CSS3

Learn five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. But technology doesn’t stop, luckily, and we have other two great allies for the future to design better website: HTML 5 and CSS3.

Coding a CSS3 & HTML5 One-Page Website Template

See how to create a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template here.

Design & Code a Cool iPhone App Website in HTML5

HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

HTML5 for Beginners. Use it now, its easy!

HTML5 for Beginners have good HTML5 examples. Use it now, its easy! This article cover some of the HTML5 basics in a funny way…

Rocking HTML5

This presentation is an HTML5 website and it is a very informative and easy to use overview of the HTML5 elements.

Building Web Pages With HTML 5

Depending on who you ask, HTML 5 is either the next important step toward creating a more semantic web or a disaster that’s going to trap the web in yet another set of incomplete tags and markup soup.

The problem with both sides of the argument is that very few sites are using HTML 5 in the wild, so the theoretical solutions to its perceived problems remain largely untested.

That said, it isn’t hard to see both the benefits and potential hang-ups with the next generation of web markup tools.

HTML5 Cheat Sheet

This is not HTML5 examples but HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

html5test.com

This is a browser test with a lot of detail. Very useful.

HTML5 Canvas Experiment

Time for us to play with this technology. We’ve created a little experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen. (click on the image to see it in action)

12 Incredible HTML5 Experiments

Here you find a collection of Incredible HTML5 canvas-based experiments that will make you HTML5 lover.

HTML 5 Cheat Sheet (PDF)

html5 Pocketbooks

OK You have seen that HTML 5 is here, but should you use it?

Generally I think it depends on the site you are working on. If it is a high traffic commercial website you may want to hold it back a bit. However if it is a personal blog I believe it is time to get started and learn how to use the new features in HTML 5.

Actually HTML5 is used more than you may think already. You should check out the sites featured on HTML 5 Gallery and view source to see what they’re doing. Also there is already a HTML 5 WordPress theme available.

55 Excellent Examples of Websites Using HTML5

0 comments Posted by Abid Khan at 8:43 AM HTML5 is the new and updated version of the web standard and famous HTML. HTML5 has tons of new features, techniques and elements that allow designers to create new and beautiful stuff. The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash and Microsoft Silverlight. With HTML5 you can add some really nice effects to your website with ease… it’s for sure a nice way to go. So based on that, we decided to gather a list showing some excellent examples of sites that are already using HTML5… and we did find some really nice examples, check it out.