HTML5 Fever : Introduction

Posted By : Sandeep Kundu | 29-Nov-2012

HTML5 is the latest version of html from the Web Hypertext Application Technology Working Group (WHATWG). HTML5 provides support for 2D graphics (see canvas tag), new element for embedding audio, video and new structural tag for <article>, <aside>, <canvas>, <details>, <footer>, <header>, <hgroup>, <nav> and <section>.

HTML5 - New Features

Some of the new features in HTML5 are :

Browser Support for HTML5

The latest versions of Safari, Google Chrome, Mozilla Firefox, Opera, and Microsoft Internet Explorer 9.0 (currently in beta) all support many of HTML5 features.

In addition, the mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

Specific browsers supporting HTML5 are :

  • IE 9 beta
  • Firefox 3.0+
  • Safari 3.0+
  • Chrome
  • Opera 9.5+

New elements in HTML5

Some of the new elements in HTML5 are :

1. <article> : The HTML <article> tag is used to represent an article. Article is a body element and must be placed inside the body tag element. Article tag element is used to place the content of web page in both static and dynamic websites.

Code Snippet

<div class="main">
   	<header>
       	<h1>Header</h1>
    </header>
    <article>
        <h1>Article</h1>
    </article>
    <aside>
        <h1>Aside</h1>
    </aside>
    <footer>
   		<h1>Footer</h1>
    </footer>
</div>

                                        

See above code in action here

2. <aside> : The <aside> tag is used to define some content aside from the content it is placed in. The <aside> content should be related to the surrounding content. This type of content is often represented in sidebars.

Code Snippet

<div class="main">
    <article>
        <h1>Article</h1>
    </article>       
    <aside>
        <h1>Aside</h1>
    </aside>    
</div>

                                        

See above code in action here

3. <audio> : The <audio> tag is used to define sound, such as music or other audio streams.

Code Snippet

<div class="main">
    <audio autoplay="autoplay" controls="controls" loop="loop" preload="auto" src="http://sound30.mp3pk.com/indian/dabangg2/[Songs.PK]%2001%20-%20Dagabaaz%20Re%20-%20Dabangg%202.mp3"></audio>    
</div>

                                        

See above code in action here

4. <canvas> : The <canvas> tag is used to draw graphics using scripting (usually JavaScript) on a web page. A canvas is a rectangular area and it has several methods for drawing paths, boxes, circles, characters, and adding images.

Note : The <canvas> element has no drawing abilities of its own. All drawing must be done inside JavaScript.

Code Snippet

<div class="main">
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <script type="text/javascript">
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.font="30px Arial";
		ctx.strokeText("Hello World",10,50);
	</script>    
</div>

                                        

See above code in action here

5. <details> : The HTML <details> tag specifies additional details that the user can view or hide on demand. It can be used in conjunction with the HTML5 <summary> tag to provide a heading that can be clicked on to expand/collapse the details as required.

Code Snippet

<div class="main">
    <details open="open">
		<p>If your browser supports this element, it should allow you to expand and collapse these details.</p>
    </details>    
</div>

                                        

See above code in action here

6. <footer> : The HTML <footer> tag is used for defining the footer of an HTML document or section. Footers usually contain information such as the author of the document, copyright information, links to terms of use, privacy policy, etc.

Code Snippet

<div class="main">
	<header>
       	<h1>Header</h1>
    </header>
    <article>
        <h1>Article</h1>
    </article>       
    <aside>
        <h1>Aside</h1>
    </aside> 
    <footer>
    	<p style="float:left;"><a href="#">Home</a> | <a href="#">Services</a> | <a href="#">About Us</a> | <a href="#">Contact</a></p>
        <p style="float:right;">Copyright 2012. All rights reserved</p>
    </footer>      
</div>

                                        

See above code in action here

7. <header> : The HTML <header> tag represents a group of introductory or navigational aids. Headers can contain headings, subheadings, version information, navigational controls, etc.

Code Snippet

<div class="main">
	<header>
    	<h1>Header</h1>
    </header> 
    <article>
        <h1>Article</h1> 
    </article>       
    <aside>
        <h1>Aside</h1>
    </aside>
    <footer>
    	<h1>Footer</h1>
    </footer>   
</div>

                                        

See above code in action here

8. <hgroup> : The <hgroup> tag is used to define the heading of a section or a document.The <hgroup> element is used to group headers, <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings.

Code Snippet

<div class="main">
	<header>
      	<h1>Header</h1>
    </header>
    <article>
    	<hgroup>
          	<h1>Hgroup</h1>
        </hgroup>
    </article>       
    <aside>
       <h1>Aside</h1>
    </aside>
    <footer>
    	<h1>Footer</h1>
    </footer>     
</div>

                                        

9. <nav> : The <nav> tag is used to define a section intended for navigation.

Code Snippet

<div class="main">
	<nav>
		<p style="float:left;"><a href="#">Home</a> | <a href="#">Services</a> | <a href="#">About Us</a> | <a href="#">Contact</a></p>
	</nav>      
</div>
                                        

See above code in action here

10. <section> : The <section> tag is used to define sections in a document. These sections could include chapters, headers, footers, or any other sections of the document.

Code Snippet

<div class="main">
	<header>
		<h1>Header</h1>
	</header>
    <section>
      	<h1>Section</h1>
    </section>
    <article>
        <h1>Article</h1>
    </article>       
    <aside>
        <h1>Aside</h1>
    </aside> 
    <section>
       	<h1>Section</h1>
    </section>
    <footer>
    	<h1>Footer</h1>
    </footer>      
</div>
                                        

See above code in action here

11. <video> : The <video> tag is used to define video, such as a movie clip or other video streams.

Code Snippet

<div class="main">
	<article>
    	<video controls="controls" autoplay="autoplay" loop="loop" preload="preload">
  			<source src="http://www.w3schools.com/tags/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  			<source src="http://www.w3schools.com/tags/movie.ogg" type='video/webm; codecs="vp8, vorbis"' />
		</video>
    </article>    
</div>
                                        

See above code in action here

Conclusion

Well now you have basic knowlage of HTML5. Now you guys go and practice these yourself. Soon I'll be discussing about new form's element for html 5, till then enjoy reading.

- Sandeep Kundu

About Author

Author Image
Sandeep Kundu

Request for Proposal

Name is required

Comment is required

Sending message..