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
<article> help machines figure out what content is supposed to be. New input types like
<input type=email> can also be useful for the same reasons, although the new input types include custom UIs which make them useful even for "common" human readers.
Note that the new Forms features are much more than new input types. It also includes support for placeholder text and several other attributes.
<canvas>, which allows drawing 2D(and, with WebGL, 3D) shapes like charts or even render games.
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,
<div data-status=open>Open</div> is now finally allowed. Note that custom attribute names must be prefixed with
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:
- Simplified doctype string:
(can still include
xml:langif you want XML compliance)
<meta charset="utf-8" />
scriptno longer accepts
charsetfor remote scripts:
<script src="/media/js/jquery.js" charset="utf-8"></script>(inline scripts need no additional attributes at all)
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
<div id="nav">, you just have
<nav>. Doesn't seem like much but it adds up.
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
<div>. These new elements include:
HTML5 forms are greatly improved.
New Input Types
- color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, and url
We could go into forms all day, but here are some resources to explain all this new stuff better.
- A Form of Madness
- The Future of The Web: How We’ll Create Form in HTML5
- HTML5 Input Types
- Have a Field Day with HTML5 Forms
- Rethinking Forms in HTML5
- HTML5 Forms Are Coming
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
:before pseudo-selector and the
content style when an ordered-list or numbering would be semantically incorrect. (For example, numbering the steps of filling out form fields.)
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:
text-rendering: optimizeLegibility;added to the styles in the definition for
labelincluded in definition with
selectsince it needs
- styles for
:focusfrom Eric Meyer's CSS Reset added back in
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).
If you just blindly convert all the <div>s on your pages to <sections> it's pretty unlikely your page will have the outline you expected. And, apart from being a semantic faux-pas, this will confuse the hell out of people who rely on headings for navigation.
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
divs. The promising new elements include
footer, among others. I really like the idea of semantic elements replacing meaningless containers.
Oh yeah, a related item: the much-simplified
doctype - finally something I can type from memory!
(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:
<section>and the new header outlining algorithm (I did say it was just my 2¢)
- new form elements, e.g.
- client-side storage
Because no one has put this yet: