HTML5 will include a new WebSocket API. WebSockets facilitate continuous connections between a server and a client, so information can be sent back and forth without needing to reload the page.
This enables faster communication with the server for an individual, but also facilitates multi-user interactions on a site. Examples I've seen range from a simple chat to a gigantic collective Scrabble game.
Currently, the WebSockets API is fully supported in Safari and Chrome.
CSS3 adds a wide range of new of styling capabilities to your HTML. Graphic effects like opacity, gradients, and drop-shadows can now be creating using your CSS. It also has enhanced selectors, animated transitions, and 3D transforms.
A lot of CSS3 is supported and ready to use now. The gradient background on this box was created using CSS3. You might also notice rounded corners and a drop-shadow depending on your browser. The opacity on the nav bar was also created with CSS3, and if you're using Safari or Chrome, you'll be treated to an animated fade when you mouse over the nav bar.
HTML5 will be able to retrieve info about what you're using to browse the internet, as well as interface with components of your device. Knowing what kind of device you're using will prove useful as smartphones and tablets increase in prevalence. A site can be tailored based on things like the size of the device screen or the screen orientation.
A user's location can also be detected by HTML5. Geolocation (with the user's consent, of course) already works in Firefox, Safari, Chrome, Opera, and both the Android an iOS browsers. Again, this has lots of potential application for mobile devices.
As far as interfacing with your device goes, think cameras and microphones. While not yet supported in any browser, the device element in html5 will be used to allow access to a user's camera and mic, enabling things like audio and video chat.
New graphics elements in HTML5 include <canvas> and <svg>.
The <canvas> element is just that, a canvas that can be drawn on with JavaScript. This can be used for simple animations or interactive widgets and games. WebGL extends upon the <canvas> element to create 3D animations.
The <svg>tag can be used to embed scalable vector graphics (like lines and ellipses) inline in your HTML. This means nice crisp graphics!
HTML5 allows audio and video elements to be embedded in a page without the need for any third-party plug-ins. This is great news considering the vast amount of websites with multimedia components.
The <video> tag works nearly identically to the existing <img> tag, where a source, width and height are specified. It also has some additional attributes like preload, autoplay, and controls. The video element should work in Firefox, Safari, Chrome and Opera, although there are some discrepancies on which video codecs each browser supports.
Even YouTube is giving it a try. You can opt-in to their trial HTML5 player to help test things out.
Web workers, a new HTML5 feature, are like helpers for JavaScript. They can process their own code in the background while JavaScript continues to run to achieve multi-threaded style processing in JavaScript. They're specifically meant to run longer calculations, so this can greatly increase the speed of your JavaScript.
HTML5's FileReader and FIle API's allow your OS and browser to interface together. For example, you can drag a file from your desktop into a browser-based email client to add it as an attachment. This drag and drop from OS to browser could also be used to submit a file for upload.
HTML5 also brings enhancements to AJAX file uploading, including the ability to upload multiple files at once and tracking an upload's progress.
The new semantic elements in HTML5 make a website's underlying structure more meaningful. Instead of using <div> tags to enclose every component of a web page, some common components now have their own HTML tags.
Take a look at the page source here and you'll see tags like <header>, <footer>, <nav>, and <article> denoting exactly what you'd think they would.
Although a lot of HTML5 is years away from full browser support, semantic elements can be used already. Most browsers (i.e. not IE) will be able to interpret you new semantic tags, and with a little help from some JavaScript, they all will.
HTML5 will allow enhanced caching for web apps and data. The most obvious use of this is to make a web app (like email) available to users when they're not connected to the internet. It could also help web apps run smoother if a momentary signal drop occurs in the user's connection. In general, storing info locally can help web pages and apps load and run faster since less needs to be retrieved from a server.
So how does it work? Information about what to store for offline use goes into a "manifest" file, then simply add the manifest attribute to your html tag.