HTML5

HTML5 is the latest evolution of the standard that defines HTML. It provides new elements, attributes, and behaviors that allow for increased interactivity. It also encompasses a larger set of technologies that grant more diverse and powerful features to web sites and applications. The three most important elements to know about HTML5 are doctype, semantic markup, and multimedia features.

Doctype

The document type declaration, <!DOCTYPE>, is used to specify which particular version of markup a document was written in. This is the minimum information required to ensure that a browser renders the web page.

HTML5

	            <!DOCTYPE html>
                

HTML 4.01

	            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                

Semantic Markup

In HTML5 names of the element tags mean exactly what they are titled. If you need to create a navigation menu on your site you used a <nav> tag. You need to list your contact information at the bottom of a page? Use a <footer> tag. Semantic markup is HTML written in a way that gives the website content specific meaning.

HTML5

	            <header>
                

HTML 4.01

	            <div id="header">
                

In HTML5, there are new semantically rich elements that can convey the purpose of the element to both developers and browsers.

Multimedia Features

HTML5 also introduced native support for audio and video. Prior to HTML5, a plug-in like Flash or Silverlight was needed to provide a web site with multimedia features.The <video> allows you to play a movie in your website. The data of this element is supposed to be video but it might also have audio or images associated with it. Like many of HTML5’s new features video is very simple to implement:

HTML5

	            <video width="640"  height="360" src="http://LinkToYourVideoSource" controls autobuffer> </video>
                

HTML 4.01

	            Feature not available
                

The <audio> element enables native audio playback within the browser. We can take advantage of this now as nearly all of the major browsers support it — currently Firefox, Chrome, Safari, Opera, IE9, and IE10. For browsers that don't support audio natively, we can easily fallback to Flash.

HTML5

	            <audio controls="controls">
	                <source src="YourFile.ogg" type="audio/ogg">
	                <source src="YourFile.mp3" type="audio/mpeg">
	                Your browser does not support the audio element.
	            </audio>

HTML 4.01

	                Feature not available
                

A specific tag, introduced in HTML5, the <canvas> tag creates a blank area of your page that can be used for drawing. Canvas can be used to represent something visually on your browser page. In basic terms, it is a blank image <img> tag that you can create simple pixel-based graphics in by writing instructions in JavaScript.The addition of the canvas element provides another multimedia technology we can use to enhance our web pages.