Top Navigation

An Introduction to HTML5 Part-1

HTML5 is the new emerging web standard for developing website and applications. Lets explore and discuss about HTML5 and associated technologies which will be sooner or later a web development standard in future.

Before you start learning HTML5

At present time, HTML5 have limited support for various browsers and it is still considered to be in development. Before you start trying out your hands on HTML5, you must have a basic working knowledge of different web development technologies such as HTML, CSS and javascript. However, if you are just curious to know more about HTML5 and how it is currently implemented. You may like to go through this article.

History of HTML5

html5 evolution

1995: HTML 2.0 Formalized the syntax and many of the rules that were already implemented

1997: HTML 3.2 Largely ignored by browser manufacturers who began to implement their own tags

1998: Web Standards Project: – Pushed for adoption added weight to the W3C recommendations and promoted standards-based browsers.

1994: HTML 4.0 Stabilize the syntax and structure of HTML and became the standard for web authoring.

2000:In years 2000 W3C released xHTML, designed to move HTML towards XML DTDs often caused it to render as HTML. Finally in 2004, HTML5 was approved by W3C make it future web building standard. HTML5 retains the backward compatibility of earlier versions while adding new structural tags and api support making it easier for web designer and developers to implement.

Need for HTML5

Now the question arises, why do we need HTML5? Do we really need it? One of the main reasons that HTML5 was favored over other versions was due to the fact it remains backward compatible with other versions of HTML. That means it supports the previous documents written in other versions of HTML that are in millions of number which would eventually stop them working. Earlier version of HTML were not as good as HTML 5 in error handling and parsing the syntax rules.

HTML5 Browser Support

html5 browser support

Let us talk about the various levels of browser supported by HTML5 and their implementation. Many of the new features of HTML5 have varying degree of support offered by different browsers and their implementation. Older versions of internet explorer don’t have much support for HTML5 while the new version of internet explorer 9 by Microsoft offers a significant HMTL5 compatibility. This will help you to determine when to use specific HTML5 features and how to implement them with different user agents. Below is a list of resources where you can test for HTML5 support online offered by different browsers.

http://fmbip.com/litmus/

http://caniuse.com/#cats=HTML5

http://html5test.com/

New structural tags in HTML5

To help get web authors get more control over the structure of their HTML documents. HTML5 introduces several new structural tags that help identify and section content. In many place, these tags will allow you to replace container div tag with meaningful semantic markup. Let us discuss about the new HTML5 structural tags and how to use them.

<section><section/>

“According to HTML5 specification, the section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typical with a heading.”

<article><article/>

“The article element represents  a self -contained composition in a document, page, application or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of the content.”

<aside><aside/>

“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from the content. Such section are often represented as sidebars in printed typography.”

<header><header/>

“The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1-h2 element or an hgroup element), but this is not required. The header element can be used to wrap a section’s table of contents, a search form, or any relevant logos.”

<hgroup><hgroup/>

“The hgroup element represents the heading of a section. The element is used to group a set of h1-h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.”

<footer><footer/>

“The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information  about its section such as who wrote it, links to related documents, copyright data, and the like.”

<nav><nav/>

“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.”

The standard HTML5 specification for each tag mentioned on this article has been supplied from World Wide Web Consortium official website. W3C is an organization responsible for developing standards for world wide web.

, , ,

No comments yet.

Leave a Reply