HTML5 Web Design

HTML5 getting into the basics

Since 1999 when HTML 4.01 became a standard, the online network (the web) has transformed a lot. With the arrival of HTML5 and CSS3, battle for the new markup has also begun. Being a developer, rather than discussing which markup is best, one must be aware of new ideology so that one can modify coding habits for better web results. Even though both HTML5 and CSS3 are a work in progress, there is not any reason not using it right now.

With the introduction of HTML5, all those elements that were obsolete or never used in HTML 4.01 were either re-written or deleted. Unlike HTML 4.01, HTML5 is introduced with some new rules. Like – better error handling, device independence, development process visible to publics, etc. The core and most interesting features of HTML5 are, it includes wide varieties of APIs integrated with come new elements of HTML5. Such as canvas element for 2D drawing API, video and audio API, API to support offline storage, cross-document messaging, drag and drop, and a lot more. New and improved form controls and content specific elements are some other better features of HTML 5.

What is new in HTML5?

DOCTYPE

The first thing noticed about HTML5 was the doctype, written like this:

<!DOCTYPE html>

This new DOCTYPE is short, small, meaningful and easier to remember.

NEW ELEMENTS INTRODUCED IN HTML5

  • <header>

The header element contains the header information for the whole page or section of the page.

  • <nav>

The nav tag is used to define navigation. One can use nav tag for a section of page that contains links.

  • <article>

The article element defines an article i.e. defines subsection of the main document or page. It specifies self-contained and independent content. It may content header, images, texts etc.

  • <section>

The section tag work as similar as <div> tag that defines particular sections in the related page or document.

  • <aside>

The aside element is used to define content as aside from main content of the page. For example, one can use it in sidebars, posts, footers etc.

  • <figure>

The figure element is usually used to define or group the media content like pictures along with their caption.

  • <footer>

The footer element, not only used to define the footer for the page but also for any section of the page. One can use <footer> tag multiple times in the page.

Html5 basics explained
Html5 basics explained.

As these elements are much better defined, they are not only easier to use but also provides you a systematically well structured document that you require.

When it comes about web how, can we forget ‘Browser Compatibility’? Yes currently none of the browsers fully support HTML5. But in near future they will as all major browsers i.e. Chrome, Firefox, Safari, Internet Explorer are gearing up, to add new features in their latest versions and be compatible to as much HTML5 markups as possible.

Before heading to new excursion towards HTML5 though, you should know that HTML5 is not for everyone. If you think you are ready then wisely choose where and how to use it because as a matter of fact you might get stuck between HTML5 and the browsers because your browser might not understand the word of HTML5.