Top 10 things you must know about HTML5

more images

XHTML2 had almost grown into an idealistic recommendation for web. The project started in 2002 and updated in 2006, was an avid effort for re-working of the language of the web. It would address the inconsistencies, expel obvious presentational tags and offer clear and concise mark-up language. This was all before W3C announced, XHTML 2 will be dropped when the Working Group’s charter expires on 31 December 2009. The resources of the XHTML2 group would be transferred to HTML group that is currently working on HTML5 specifications. Evidently, the approach HTML working group emerges as more pragmatic, as it focuses on compatibility with current HTML specification. The key effort in HTML5 is to move away from the document markup.  HTML5 would be focused on a more robust, feature-full client side environment for web application development by offering a variety of APIs. Some parts of the HTML5 have already made their into the major web browsers.

1.  Timeline

This is all those waiting for the release of HTML5. For this we could take the words of Ian Hickson, the editor of the HTML5 working draft, in an interview with Tech Republic stated that

Standards development isn’t like making software — people are implementing HTML5 as we speak, and many parts of HTML5 will likely be widely used long before HTML5 is officially “done.” There are many parts of HTML5, like the canvas element and the postMessage mechanism, that are already implemented in multiple browsers.

He was asked to give a timeline of the HTML5 recommendation. His proposed recommendation in HTML5 is 2022. As Hickson adds,

This may look ridiculous (2003 to 2022 is 19 years!), but it’s worth considering how this compares to HTML4, DOM2 HTML, and XHTML1, the three specifications that HTML5 is intended to update and replace.

As you know HTML5 is available and ready to use today. The timeline for those working  HTML5 team stops is October 2009. If this is the last call for HTML5 working draft, it implies that all the issues with spec enhancements, bugs, anything will have to be submitted and written into the spec for October. HTML5 supports all the lowercase, self closing tags and double quoted attributes. In case you are not comfortable with new additions you can always opt out of them.

2.  More Markup

For long authors of HTML have been working on table elements until they started using semantics and standards.  They now use div left, right and center. We use the semantic classes and ID for naming conventions to define the functions for div tag.  However, HTML5 will allow the users a simple header and footer element. Moreover, the new semantic markup in HTML5 could be a big asset for the designers. HTML5 adds a number of new elements and all of these can be used by the modern browsers.

3. Web Hypertext Application Technology Working Group (WHATWG)

The WHATWG is completely open for anyone who likes to offer his ideas and suggestion. In order to contribute your suggestions sign up to the mailing lists. You’ll have the option for Internet Relay Chat (IRC). What’s more, you would have the compete chat history. Details of the WHATWG information is available in their site.

4. Block Structure

header

It represents a group of navigational aids. It is used to construct the document outline. Further, you are not restricted to using the header only once. You might use it to mark up the authors name and the time of a comment placed on a blog post.

footer

It is the footer to the section. Interestingly, it is not restricted to one use at the bottom of the page. You can also use the footer to mark up the footer of a blog post in addition to the footer of the entire document.

nav

It is used to wrap all the major navigation blocks like table of contents, pagination links and breadcrumbs. The nav elements can be used to navigate around site, ie inappropriate for a list of sponsor links.

article

It represents a component of a page which contains the self-contained composition in a document, page, application, or site. It can be defined to be independently distributable or reusable.

aside

It is used to represent a section of content that is related to the content around the aside element. For instance, it pulls the quote or a sidebar.

section

It has a generic document or application section. However, this isn’t a replacement for the div element. A section is only appropriate if the element’s contents would be listed explicitly in the document’s outline.

5. How to get your markup to validate as HTML5

It is really easy you can change your DOCTYPE from whatever.

<!DOCTYPE html>

HTML5 with lovely XHTML-style markup would be the best.

6. Google’s Ready for HTML5

Google has shifted its focus on HTML5, which its browser-based Chrome OS would support.

To know more checkout Google’s homepage

<!DOCTYPE html><head ><title>HTML5 - Google Search</ title><script>

Interestingly, Google search page and listing due to the use of invalid tags font element for instance and several other errors. However, this doesn’t matter and you can take advantage of the HTML5 parsing rules with that doctype.

Although that is all you need for HTML5 to be triggered. There is a lot more to HTML5 that you can think of.

7.  Semantics

There are semantics that you have been accustomed to, for years. Let’s see what HTML5 has on offer

Details

It is used to include the additional information which you can obtain on demand. With an open attribute it can be determined its content can be seen or it can be toggled by the user or by JavaScript.

Figure

It can be used to annotate illustrations, photos, listings etc. If it is moved away from the primary content, it would affect the flow of the document.

Mark

It highlights the run of text. For instance mark a term that you have to search.

Time

It can be used to encode the modern dates and times in a machine-readable way. The datetime attribute is the element that provides the machine readable time. On the contrary the contents are human readable.

8. HTML5 styles (Default)

All the default styles for all elements are a part of the browser. The browsers are not adapted with the new elements by default, so its important give the block elements their initial default styles.

To fix the anomalies you need to include the following CSS in your stylesheet

header, nav, article, section, figure, aside, footer { display: block; }

HTML5 is needs much more than just a markup change. You have the web forms 2.0 spec in HTML5 that means you don’t need to use JavaScript to do the basic form validation that we have repeated time and again.

9. New HTML5 JavaScript APIs

Drag and Drop

Native JavaScript dragging that works across browser windows. It is currently available for IE8, Firefox 3.5 and Safari 4

Inline editing

It enables the user to edit the content on the page without an editor. Changes can be implemented using input to a CMS.

Cross-domain messaging

It allows messages to be communicated across different domains. It is available in IE8, Firefox 3.5, Safari 4 and Opera 10.

History API

Support for Ajax-based application and saving states in the history to move back and forth.

Offline applications

It would enable the users to continue using web application even when there is no web connection. It is available in Safari 4 and Firefox 3.5. The specs will be changing all the time until the last call.

Some additional JavaScript APIs

Local storage - Two types of storage, key/value pair and SQL based to store data associated with your application.

New selectors - document. querySelectorAll uses CSS syntax to find elements in the DOM.

Web workers - It basically threads for JavaScript

Geolocation - It provides an API to retrieve the latitude and longitude

Web socket - TCP/IP type socket communication

10. Compatibility

The new element don’t rely on the new DOM interface which would be available to the browser. However, the audio and video elements will have a new DOM interface.  Only the browsers with the new media elements implemented will be able to offer native audio or video.

It shouldn’t hold you back from using these elements. In case you use the video element and it’s not supported in the browser and its contents would be rendered. Suppose you have provided an Ogg Theroa-encoded video and then QuickTime. In case the video elements is not supported. There are a couple of browsers that might have trouble seeing the new elements natively.

Conclusion

The design trends have changed overtime throughout the Web community. And for the most part users have all accepted that some of the things we learn today can be obsolete tomorrow. The main goal is stability. The new format  proposed by HTML5 is not any more a simple format of document. However, it is supported for current Web applications such as forum, etc and its purpose is to facilitate interoperability. Overtly, the unsuccessful XHTML 2 project paves the way to HTML 5, which improves upon HTML 4 and XHTML 1 and  provides a response and an alternative to the Silverlight environment.

Source: techradar