LAMP Tutorials
Lamp Tutorials Contact CrackFeed

How to use HTML5

Authored on: July 18, 2011 by Jeffery Dilegge

Digg this tutorial!

Please support Crackfeed with a small donation.

Back to HTML5 Tutorials




HTML5 is the evolution of HTML4 and XHTML1, offering 28 new HTML tags and a few html coding new techniques. HTML5 supports both HTML and XML syntax, how killer is that? Unlike many other new releases of markup languages, HTML5 is supported by all major browsers and HTML5 validators are even starting to appear online. It is also backwards compatible with older browsers, though I would recommend the below code snippet for your header, just in case. What is really cool is that HTML5 is already supported by iPad! To ensure that all of your users have no problem viewing your HTML5 pwebpages, include this in your header:


<!--[if lt IE 9]>   
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>   
<![endif]-->

To the point, new HTML tags!

<video> </video> & <audio> </audio> The video and audio tags are perhaps the crowning achievement of HTML5, finally an HTML approach to posting streaming media in your pages without using flash or javascript. See the docs for video and audio, becuase this baby is loaded with attributes!


<section> </section> The section tag is used to specify a specific section of your webpage.


<hgroup> </hgroup> The hgroup tag is used to specify the header of oyur webpage. Not the header, but the visual header that shows at the top of your page, though the header not always is located there.


<article> </article> The article tag defines that the text between the article tags is a new article, blog post body or other type of article.


<aside> </aside> The aside tag defines an area of your page that is kind of related to the main contant, but no entirely. Such as similar posts and acknowledgments.


<nav> </nav> The nav tag defines the navigation area of your page.


<header> </header> Specifies the navigational aids or a webpage introduction within your webpage.


<footer> </footer> The footer tag defines footer area of your webpage such as copyright, footnotes etc.


<figure> </figure> The figure tag defines each individual group within the ain content of the webpage.


<figcaption> </figcaption> Use the optional figcaption tag to define a caption for each figure tag you use.


<ruby> </ruby> Make Ruby notations with the ruby tags.


So essentially, your HTML4 and XHTML pages are fine, but you can increase their functionality and browser accessibility with just a few organizational and code changes. I am hoping that the new tags for organization will help with Adsense ad relevence and serps, but we will see how that goes.

Checkout more new HTML elements released with HTML5 here.

View the full specification document for HTML5 here.


Links Directory | Jeffery Dilegge