There has been much noise about HTML 5, every developer seems to have an opinion. Some are positive and others are negative – Tommy Olsson, technical webmaster and software developer, is negative in an article: “I think it’s an abomination, but I’m probably in a small minority. It mocks everything I consider important on the Web”.
However, everything can´t stay the same at all time and Cashrevelations.com decided to make a simple overview of HTML 5, because sooner or later it will be here anyway. We hope this article gives you some insight into HTML 5.
HTML 5 – The Basics
Wikipedia; HTML 5 is the next version of HTML. HTML 5 specifies two variants of the same language – a “classic” HTML variant known as HTML5 and an XHTML variant known as XHTML5.
HTML 5 provides a number of new elements and attributes that reflect typical usage on modern Web sites. Some of them are semantic replacements for common uses of generic block <div> and inline <span> elements, for example <nav> and <footer>.
Other elements provide new functionality through a standardized interface, such as the elements for multimedia content <audio> and <video>.
Some elements from HTML 4 have been dropped, including purely presentational elements such as <font> and <center>, whose effects are achieved using CSS.
HTML 5 is backwards compatible with the way user agents handle deployed content.
Overview Of New Features In HTML 5
This summary of major new features in HTML 5 is based on Elliotte Rusty Harold’s article New elements in HTML 5. We recommend you to read his article for more details.
New structural elements
- section: Essentially anything that has its own heading in HTML 4
- header: The page header shown on the page; not the same as the head element
- footer: The page footer where the fine print goes
- nav: A collection of links to other pages
- article: An independent entry in a blog, magazine, compendium…
New Block Elements
- aside: Something that’s just outside the main flow of the narrative
- figure: Represents a block-level image, along with a caption
- dialog: Represents a conversation between several people
New inline elements
- time: Indicates a specific moment in history
- meter: Represents a numeric value in a specified range
- progress: Represents the state of an ongoing process
New embedding elements
- video: Allows embedding of arbitrary video formats
- audio: A complementary audio element
- embed: Is used for plugin content
The src, autoplay, autobuffer and controls attributes are common to all media elements.
New interactive elements
- details: Further information that might not be shown by default
- datagrid: Serves the role of a grid control
- menu: Contains command elements
- command: Represents a command the user can invoke
This list is not complete, if you wish to see all new elements and new attributes in HTML 5 we suggest you to go to HTML 5 differences from HTML 4 by W3C.
You might also be interested to download the handy HTML 5 Quick Reference Guide for free from Veign.com (a website design and development company). A compliment to the HTML5 Quick Reference Guide is the newly released CSS 3 Quick Reference Guide.
How Do I Start With HTML 5?
The easiest way to learn something new is just to do it. Reading through a lot of articles and reference material has it’s benefits, but to learn something really quick you need to start coding and experiment right away, without any delays.
Thats way we put together 5 HTML 5 Quick Start recourses. If you are familiar with HTML, we can guarantee that you will have a HTML 5 Valid page online within 2 hours with the help of these recourses alone.
HTML 5 Quick Start Resources
- Download Clean White Video Landing Page
- Download HTML 5 Quick Reference Guide
- Download CSS 3 Quick Reference Guide
- W3Schools HTML 5 Reference
- Markup Validation Service
These resources will give you a starting point for your HTML 5 experience – and you will discover how fun and not at all so hard as it seems if you only read reference material.
Reading On HTML 5
1. A Preview of HTML 5
As both a front-end web developer and a contributor to HTML 5, Lachlan Hunt tells us what we can expect from the emerging markup specification, whose goals include more flexibility and greater interoperability.
2. Yes, You Can Use HTML 5 Today!
Is HTML 5 really too far away to worry about? Bruce Lawson doesn’t think so – you can start using HTML 5′s new structural elements right away.
3. 5 Amazing HTML 5 Features to Look Forward to
Most major browsers implemented some of the features proposed in the HTML 5 draft. Today we will look at 5 of these exciting HTML 5 features and its implementation.
4. Preparing for HTML5 with Semantic Class Names
This is a brief introduction to the new structural elements in the HTML 5 Working Draft, and how to use semantic class names in HTML 4.01 or XHTML 1.0 markup that correspond to the names of those structural elements.
5. HTML 5 Doctor
HTML 5 Doctor publish articles relating to HTML 5 and it’s semantics and how to use them. They also invite questions, in the form of ‘Ask the doctor’ to help answer people’s queries and questions. Answers will be posted in the form of articles for all to learn from.
6. HTML 5 – A vocabulary and associated APIs for HTML and XHTML
Working Draft 23 April 2009. This version: new features are introduced, new elements are introduced based on research into prevailing authoring practices. Special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.
7. WHATWG Wiki
The purpose of the WHATWG Wiki is to create a place for contributors to post and compile their own proposals and ideas regarding WHATWG specifications. You can be a part of our community and making proposals for the next version of HTML5.
8. The Power of HTML 5 and CSS 3
As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.
9. HTML 5 Editor Ian Hickson discusses features
In this interview, HTML 5 Editor Ian Hickson discusses his favorite features, the features he thinks might be most contentious, the pain points he expects HTML 5 will address, and much more.
10. 4 Useful HTML 5 Browser Support Overviews
HTML 5 gives us many advantages. You can use the basic HTML 5 elements like header, nav and footer in all browser at the moment. But there are more cool things.
Videos on HTML 5
1. Web Design Video Blog – HTML 5 Tag Changes
Nick Bavington and James Rinylo from the Creare Group explain the new tags of HTML 5 and the discontinued tags from HTML 4.
2. Web Design Video Blog – Headers & Footers
Nick and James from Creare Group explain how to utilize headers and footers for good web design and SEO. They also look at how they might be implemented in HTML 5.
3. HTML 5 – Features you want desperately but still can’t use
As the HTML 5 effort reaches its first big milestone browsers are starting to implement it. This talk will explore some of the implementations of HTML 5 features.
4. Anne van Kesteren – Video in HTML 5
This talk will focus on the new element introduced by HTML 5 and its associated API – a short introduction to HTML 5 as well as information on recent developments.
5. Editing HTML 5
Ian Hickson, editor of the HTML 5 specification, discusses the tools he uses to gather and respond to feedback and clarifies the whole “when will it be ready?” issue and gives us some details about what part of the spec he is working on now.
Summary
According to some developers it will take a while before HTML 5 is fully implemented – Ian Hickson, co-editor of HTML 5, suggests that we might have to wait till 2022 for the final draft of HTML 5.
Remy Sharp of HTML 5 Doctor writes in his article: “2022 was misinterpreted as the year HTML 5 would be ready. That’s wrong. HTML 5 is ready today”.
The truth is that this October (2009) is the last call for the HTML 5 working draft, and you can use HTML 5 already today. It’s not difficult either, if you have some experience of HTML since before.
Without prior experience of HTML 5 we on Cashrevelations.com decided to make a simple Video Landing Page in HTML 5 – as a quick experiment to find out if it was complicated, difficult and something to be troubled about.
After reading some specifications in the HTML 5 – W3C Working Draft and with help of W3C Markup Validator we did it under 1.5 hour. And the answer to our questions? No, it is not complicated, difficult and something to be troubled about. In fact, it was very easy.
The Video Landing Page in HTML 5 is available for preview and download below.
There are no reasons for you to not start experimenting with HTML 5 already now – it is easy, there is a lot of interesting new features, there is a huge amount of reference material and, most important, HTML 5 is the future already here.
Related:
- HTML5 and The Future of the Web
- Compatibility tables for features in HTML5
- HTML 5 canvas – the basics
- Cascading Style Sheets – Current Work
- HTML5 / XHTML5 with CSS for Safari, Firefox, Opera & IE
I think it is important to note that one of Google’s top people is working on HTML 5 standardization. HTML 5 very well might be in Google’s future algorithms.
Great info! Thanks
[...] presentational elements cashrevelations.com [...]
Jay: Depends on what content you want to use. If we give permission, then it’s from post to post – and not a general permission for all our content.
Tell me what you would like to use, and then we take it from there. You can contact us HERE.
Hello, do you mind if I use some of your content on basicwebdesign.co.cc? In exchange you keep the credit and a link pointing back to your site. Thanks!
Thanks for the in-depth article and list of resources. Looks like there will be a lot of interesing features to play with in HTML 5 however I won’t be holding my breath as its release date is still set for 2022!
[...] reading here: HTML 5 – A Quick Overview Share and [...]
[...] 24, 2009 HTML 5 – A Quick Overview – cashrevelations.com 07/24/2009 There has been much noise about HTML 5, every developer seems to [...]