5 Exciting Things to Look Forward to in HTML 5 - Page 3
4. The <canvas> element allows image scripting on the fly
Most people take in information more quickly and effectively through visuals. For example, between a table, numerical data, and a pie chart, the pie chart gives users a better feel for the scale and relationship of data (at least most of the time).
The downside of images is that they're static. If you create a pie chart using a traditional method (for example, with an image editor like Photoshop, or a graphing application like Excel), you wouldn't be able to adjust any data that changes without manually editing your graphics.
With the <canvas> element, you can take constantly changing (database-driven) data and apply it to a pie chart like the one above, as well as other types of 2D visuals (even a cat, if you're so inclined), via scripting.
The canvas API also allows users to interact with <canvas> elements. For example, you can write a script that responds to users' clicking on a particular section of the pie chart.
5. Users can edit and interact with sections of a web page
The section in the proposed HTML 5 specifications about User Interaction describes new ways of marking up interactive web pages. The contenteditable attribute (a boolean attribute to which you assign either true or false) allows you to indicate which parts of a web page users can change.
This can be useful for wiki-style websites, in which content is user-generated. Another use of the contenteditable attribute would be to create web page templates. You can allow certain regions of a web page to be open to content editing and lock other regions that shouldn't be changed. This gives users of your website who aren't proficient in HTML an opportunity to input content safely without affecting critical areas that should be handled by more knowledgeable users.
At the document level, you can make an entire page editable via the designMode attribute, which accepts two values: on or off.
In Sum
The proposed specifications are slated to reach W3C Candidate Recommendation status in 2012, but that doesn't mean you have to wait that long to start using some of the new things in HTML 5. A lot of modern browsers, for example, have already implemented the <canvas> element (including Mozilla Firefox, which has partially implemented it since version 1.5).
HTML 5 will redefine how web developers mark up content. It will provide a better way to describe the content displayed on a web page, enable more complex content types, improve media and web application support, and increase the interoperability of HTML documents.
Note that things are still under heavy development and are bound to change; many of the proposed improvements may be heavily revised in the next few years or not implemented at all.
There are a lot of exciting new features in HTML 5. Share your own favorites in the comments.
Further reading
- You can read the latest working draft of HTML 5 specifications on the W3C website.
- Learn about the major differences between HTML 4 and HTML 5 on the W3C website.
- IBM developerWorks has an excellent in-depth article on new elements in HTML 5.
- Read about the people in charge of developing HTML 5 specifications on the W3C HTML Working Group website.
- Find out what you can do to help HTML 5 development on the WHATWG wiki website.
About the author
Jacob Gube is a web developer/designer and author of Six Revisions, a blog on web development and design. If you want to connect with the author, you can follow him on Twitter.
1 TrackBacks
TrackBack URL for this entry: http://www.readwriteweb.com/cgi-bin/mt/mt-tb.cgi/9405
Comments
Subscribe to comments for this post OR Subscribe to comments for all ReadWriteWeb posts
As someone who is an essentially inactive member of this team, let me say that I am also excited about the prospects of HTML 5, if we can figure out what to do with the q tag.
-JAK
Glad that good old HTML is changing. Now working with HTML5 should be akin to sprinting rather than jogging with previous versions! Looking forward to using it...
http://www.vantrix.net
Check out this podcast w/ Anne van Kesteren from Opera which talks about HTML5 and other coming web standards.
http://knowledgecaps.com/2008/09/19/fos-fresh-online-servicesopera/
Looks like the table and pie chart in #4 don't match.
Ah nothing like poorly formed markup that HTML brings... What a great way to keep web browsers complicated and slow. I really hope that is solved with 5. The extra CPU usage to handle error handling really puts a burden on hand held devices.
2012? bwahahahahahaha
great idea, do less writing script HTML but give a lot of functionality....
Thanks ur information
"as well as other types of 2D visuals (even a cat, if you're so inclined)"
...a cat is fine too?
The forms example currently says <input name="email" required email type="text"> but that ought to be <input name="email" required type="email">
It's possible to write in HTML5 now if you ignore IE's inabilty to render XML properly. I've wrote 3 sites in it now, http://ortatherox.com is a pretty good example.
If you want to know more about actually using it check out this guy : http://camendesign.com/
This is what I like the least about html5. Calling an element an article, an aside, a header... totally inflexible, totally context ridden. If we have a totally different mindset in 10 years time (fair chance we will), those descriptions could mean nothing, or as much as typewriter, betamax or newspaper. STOP it now. classes and id's are flexible. I can use different id's and class names in 10 years time. Element names are written in stone. Just my 3 cents.
Another really great part of the form validation is the inclusion of regular expressions. Regular expressions are very powerful for analyzing and manipulating text. Being able to include them as part of form validation is a godsend.
I'm waiting for the day that the HTML spec will fix something as simple as a scrollable table with static header. Right now you have to use a bunch of hacks, none of which work well.
Can't wait until 2012..
Wow, finally the long awaited HTML 5 will be a reality. This news really make my day. Thank you!
Isn't this invalid XHTML?
<input name="username" required type="text"/>
All of this sounds great and I can't wait to use them, but what about older browsers? To even attempt to use these tags before 2012 is asking for trouble. And maybe even 2012 is too soon . .who knows.
I'm with DC Crowley on this - HTML 5 is really oriented towards blogs and the like. I don't see it being nearly as flexible as HTML 4, and I'm sure that with HTML 5, we'll still be stuck with cheap and nasty workarounds.
There's nothing wrong with HTML 4 - it's powerful, flexible, and if people invested more time in screenreaders and the like, very accessible, too. I can't imagine that HTML 5 will have the same widespread appeal.
~ Wogan
? ? That's just garbage. "Required" would be invalid as xhtml. Pie charts? Jeez, what bright spark thought that one up? Sounds like this needs a lot more thought and a lot less nonsense.
I'm really concerned sometimes that some of the bodies are possibly thinking too much about the current use of HTML and not enough about how design and layouts may change in the future.
Maybe it wont... but what I like about the current state, is that it's open to being more than just specific elements.
I believe a more open and undefined list of elements would be better than confining this, human language is far too open to change... look how the word 'gay' has evolved. From being happy to defining people's sexual orientation.
I think it's an improvement, don't get me wrong. It's just we need to try and think as much for the future and let the people define the standard as opposed to a select group of people who think they know best.
The example:
<input name="email" required type="email">
has generated several "this is invalid XHTML" comments.
The example is valid HTML5. There are several attributes in HTML4 that don't require a value, just the presence of the attribute sets it to true, "checked" for instance.
In XHTML5, much like XHTML 1, the syntax for these attributes changes to:
<input name="email" required="required" type="email">
If you're ever curious, the W3C Markup Validator is capable of handling HTML5: http://validator.w3.org/
Kai: HTML4 provided open elements like <div>; HTML5 still allows those elements, so how is it more confining?
The new structural elements in HTML5 have largely come from "the people", not just a group claiming to be experts – that group looked at evidence of how people use HTML and designed the new elements to match what people are already doing.
(The main benefit of adding elements for these cases, instead of sticking with <div class="...">, is that it allows tools to understand the meaning of the elements and apply special processing rules. E.g. <section> can control the scope of <h1> headers, letting tools generate more accurate outline views of the document, and <header> could let small-screen browsers provide a "skip to content" feature without requiring authors to manually insert skip links into their page.)
I've been hearing a lot about HTML5. It's sad that we have to wait until 2012 for these updates. The Internet, all standards included, evolves in a very slow process. E.g. browsers; Internet Explorer bottlenecks browser evolution just as Netscape did back in the day...
HTML 5 does not appear to be the mind-blowing quantum leap I had expected it to be. I hope there will be more to it than this, because all this will do is add features that developers have been working around for years.
1) Better page element identification for SEO: so what? Just make a sitemap and submit it to Googlebot. Problem solved.
2) Improved form handling: if you don't know how to use PHP, ASP, CGI, or JavaScript to set up a form by now, your site probably does not need one at all.
3) Embedded API's: what can you embed using HTML 5 that you cannot already embed with Flash or Google Maps?
4) Canvas element: while the idea of on-the-fly image generation seems cool, the sample shot looks primitive. I could make a better chart or graph in Office 97.
5) User editable content: well somehow Wikipedia and a thousand other wiki sites are up and running right now without a "contenteditable" tag. Do we really need this?
I think it's a great idea to update the HTML spec and I don't mean to come off as too negative, but I'm disappointed there aren't more whiz-bang features and that the spec won't be finished before the end of the decade.
What I would like to see is improved positioning, padding, and spacing for DIV elements so we don't have to nest them inside each other just to get something centered on the page. Y'know, stuff people might actually use instead of solving problems we've been working around for years. Just my two cents.
What a post!! Very informative and easy to undesrtand.looking for more such posts.
What a post!! Very informative and easy to understand.looking for more such posts..Lets share some information regarding the technology.
The required field seems like the best yet. But I must say that I do not expect to see any of these things for a very long time. Not only do they need to keep revising things but also it takes a long time for browsers to get used to it and even more for users to actually start implementing it. For now css does a great work with the placement stuff.
Do you really mean sendinging in page 2?
I'm in favor of the less rigid elements like also - but we will still be able to use these in html5, won't we?
Is this move towards highly defined elements geared more towards search engines or humans?
This is the first time I have seen this website, very useful and informative.