HTML5 is huge, but also awesome.
In my view, it is mostly about interoperability. The spec goes and specifies even edge cases to try and make sure that all browsers read the markup the same way.
In second place, HTML5 has video and audio, which do exactly what the name says it does. If you want to include video or audio, HTML5 should reduce your plugin needs.
In third place, HTML5 includes lots of accessibility and semantic help. For instance, elements like
Note that the new Forms features are much more than new input types. It also includes support for placeholder text and several other attributes.
Old behavior is now standardized, such as Internet Explorer's ancient
The DOCTYPE is finally decent! You can now actually memorize it!
Specifying encoding is also easier, with
If you want to send data to the client and associate it with elements, you can now do it with custom attributes. For instance,
You can now include SVG and MathML in HTML documents. Previously, you could only do it with XHTML documents.
Among the multiple new functions and fields HTML5 defines, one of the most impressive is classList, which enables you to manipulate the class attribute more easily. Instead of having to getAttribute/setAttribute and use complex hacks to figure out which classes an element has and remove a specific class from that element, classList makes those hard situations very simple.
There are also multiple related specs, such as Web Workers, Web Sockets and IndexedDB, which are not really part of HTML5 but everybody talks about them as if they were. They are very useful for taking advantage of multi-core computers, communicating with servers and storing data locally.
As for CSS3, it includes support for animations, transitions, rounded borders and the flexible box model.
Also new in CSS3 are the new selectors, which make it simpler to match specific elements on a page(such as only the odd or even rows in a table).
Opacity, new units, marquee and ruby are also part of CSS3.
I think that pretty much covers all important parts.
To keep track of features and specifications support you can check When can I use. It includes HTML5 and CSS3 features and things like SVG, PNG, CSS2.1 and CSS2. It also tracks their status of approval (Recommendation, Proposed Recommendation, Candidate Recommendation, Working Draft, IETF standard). FindMeByIP maintains matrices of supported CSS3 features only, by browser.
Some rejiggering and simplification of syntax took place in the nuts and bolts:
HTML5 brings the ability for your markup to be much more semantic, and overall much easier to read/write and have smaller file sizes. Instead of having
Many elements from XHTML1 and HTML4 have been deprecated. The following elements are not supported in HTML5:
Several new elements in HTML5 are meant to only add more semantic markup, and will do nothing except provide a more meaningful alternative to
HTML5 forms are greatly improved.
New Input Types
We could go into forms all day, but here are some resources to explain all this new stuff better.
CSS3 brings the wonderful of Media Queries. Media Queries are so, so, so great. Not available in IE8 and below, but will be supported by IE9.
CSS3 has incrementing counters. You can use these to auto-number elements without an ordered-list using the
If you're a fan of CSS Resets, there's an HTML5 CSS Reset available from HTML5 Doctor. I have made three additions to this reset for my personal pages:
A competing reset called reset5 is available, but I have not yet evaluated it personally. It is based on both the Eric Meyer and HTML5 Doctor resets.
The HTML5 Security Cheatsheet tracks bugs in HTML5 features as implemented in various browsers, and also includes bugs in existing features that are good to keep track of as well.
Using HTML5 elements does not automatically make your code semantic, however. The WHATWG has written an article called <section> is not just a "semantic <div>" explaining that it is not simply a container element.
In HTML 5, there is an algorithm for constructing an outline view of documents. This can be used, for example by AT, to help a user navigate through a document. And <section> and friends are an important part of this algorithm. Each time you nest a <section>, you increase the outline depth by 1 (in case you are wondering what the advantages of this model are compared to the traditional <h1>-<h6> model, consider a web based feedreader that wants to integrate the document structure of the syndicated content with that of the surrounding site. In HTML 4 this means parsing all the content and renumbering all the headings. In HTML5 the headings end up at the right depth for free).
There are the basic layout thing like border-radius, shadows (box/text), rgba support, and so on; This is what CSS3 is most known for. More interesting are the canvas tag, video tag, local storage, websockets and so on that will create much richer user experiences in plain HTML/JS/CSS. These features have the potential to be a great alternative for Flash on the web without the need of additional plugins.
I find the new HTML elements rather interesting...some of them are promising semantic replacements for generic
Oh yeah, a related item: the much-simplified
(This is my answer to a similar question over on webapps.stackexchange.com)
The Canvas and Web Worker Threads are the most exciting aspects of HTML5 to me. I have written some web apps that make use of those features:
With regards to CSS3 - have alook at http://css3please.com/ to see what you can do.
The later your browser, the more likely you will be able to see the effects.
Audio and video tags allow for presenting media without the need for a plugin like Flash or Silverlight, and most importantly works on the iPhone and iPad browsers. There are some issues that need to be worked out regarding codecs and digital rights management.
Jeremy Kieth just released a really good book on the topic, "HTML5 for Web Designers". you might want to check that out.
It is the first book from A Book Apart. Highly recommend it to intermediate to advanced designers. A++
NOTE: you may have to wait to get a hard copy
This doesn’t offer an opinion on importance, but it’s a useful delta between HTMLs 4 and 5.
My 2¢ on the main improvements:
Because no one has put this yet: