As a new standard for HTML, a lot of people are starting to hear about HTML5. A while back, I had a chance to start working on it. In this post, I am going to share some basic knowledge I’ve learned. Weather it is going to be good or not, is up to you but I will try to outline what HTML5 is, the way to use it and what good points are in comparison to the previous version of HTML.
History & Future
HTML5 was initially created by WHATWG (web hypertext application technology working group) with the name “Web Application 1.0” in 2004. Apple, Mozilla and Opera started up WHATWG as a result of W3C saying no to extend HTML. In 2007, W3C dropped egg-bound XHTML2 and moved its step to form HTMLWG working together with WHATWG to create HTML5.
The first draft of HTML5 was released in 2008. The final spec of HTML5 won't be ready until 2022, but you don't have to wait that long to start using it today and build really advanced web apps.
What is HTML5
HTML5 ~= HTML + CSS + JS
HTML5 combines HTML, CSS3 and Java script technologies and shows impressive results unreachable with simple HTML means.
The Rules behind HTML5
- New features should be based on HTML, CSS, DOM, and JavaScript
- Reduce the need for external plugins (like Flash)
- Better error handling
- More markup to replace scripting
- HTML5 should be device independent
- The development process should be visible to the public
Browser Compatibility
HTML5 is not yet an official standard, and no browsers have full HTML5 support yet. The following figures present a classification of different browsers and their compatibility with HTML5. The score is obtained on a total of 500 established from the 500 latest features of HTML.
| Score | |
|---|---|
| Chrome 22 » | 437 |
| Maxthon 3.4.5 » | 423 |
| Opera 12.00 » | 385 |
| Safari 6.0 » | 376 |
| Internet Explorer 9 » | 138 |
If you are interested in more details, have a look at html5test.
What's new in HTML5
Simplification
Doctype just got easy
The XHTML 1.0 Strict template for a basic page can be intimidating to look at. By comparison, HTML5 is so simple that you can type it out by hand. Below is a simple HTML5 document, with the minimum of required tags:
<em>Title of the document</em> The content of the document......
Character Encoding
HTML 5 authors can use simple syntax to specify Character Encoding as follow:
The
HTML 5 removes extra information required and you can use simply following syntax:
The tag:
So far you were writing as follows:
HTML 5 removes extra information required and you can use simply following syntax:
Semantic Elements
One of the best (and, in my opinion, easiest) ways to get started with HTML5 is by using its new semantic elements for describing the structure of page content.
Before HTML5, developers commonly use IDs and/or class names with these
In HTML5, there are new semantically rich elements that can convey the purpose of the element to both developers and browsers.
Here are some examples of the new semantic elements in HTML5:
- is used for content that can be grouped thematically. A can have a , as well as a . The point is that all content contained by is related.
- typically contains the headline or grouping of headlines for a page and/or s, although it can also contain other supplemental information like logos and navigational aids. Notice that I said “page and/or s.” That means you could have multiple s on a page.
- is used for content about a page and/or s, such as who wrote it, links to related information and copyrights. And, like , you could have multiple s on a page.
- is used to contain major navigation links for a page. While it isn’t a requirement, will often be contained by , which, by definition, contains navigational information.
- is used for content that is self-contained and could be consumed independent of the page as a whole, such as a blog entry. is similar to in that both contain related content. The best rule of thumb for deciding which element is appropriate for your content is to consider whether the content could be syndicated. If you could provide an Atom or RSS feed for the content, is most likely the way to go.
- indicates the portion of a page that is tangentially related to the content around it, but also separate from that content, such as a sidebar or pull-quotes. A good method for deciding whether is appropriate is to determine if your content is essential to understanding the main content of the page. If you can remove it without affecting understanding, then is the element to use.
An example markup for HTML5 document would look like the following:
... ... ... ... ... ...
There is still a lot to cover here, I will continue in my next blog.
Share this Blog with colleagues
