html5 tutorial
HTML5 Tutorial

HTML5?

HTML5 is the latest, smartest and fastest version of Hypertext Mark up Language, the code that describes web pages. HTML5 was formed in 2009.

Html5 is a combination of three technologies: HTML, to build webpage structure, Cascading Style Sheets (CSS), to enhance look and feel( presentation layer), and Javascript, to add functionality to HTML elements.

The term HTML5 means not only HTML only, it is a combination of HTML, CSS and Javascript with APIs. For example, drawing and animation using canvas, offline storage, microdata, audio and video, drag and drop, geolocation,embedded fonts etc. HTML5 includes new semantic tags and some old tags( with redefinitions ).

HTML + CSS + JAVASCRIPT = HTML5

HTML5 has been designed to deliver almost everything you'd want to do online without requiring additional software such as browser plugins. It does everything from animation to apps, music to movies, and can also be used to build incredibly complicated applications that run in your browser.
There's more. HTML5 isn't proprietary, so you don't need to pay royalties to use it. It's also cross-platform, which means it doesn't care whether you're using a tablet or a smart phone, a net-book, notebook, ultra-book or a Smart TV if your browser supports HTML5, it should work flawlessly.

To learn html5, you should be familiar with HTML4, CSS2 and Javascript. This tutorial will cover HTML5 and CSS3 thoroughly with live examples and code.

Timeline of Web Technologies

Year Achievement
1991 HTML Formed
1995 HTML 2
1995 CSS
1995 JAVASCRIPT
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2001 XHTML 1.1
2009 HTML5

HTML5 Browsers Support

HTML5 is supported by latest browsers only. Here is the list of supported browsers for html5.

  • Internet Explorer 9 and above.
  • Edge 12 and above.
  • Chrome 4 and above
  • Firefox 3.6 and above
  • Safari 5.1 and above
  • Android Browsers
  • Safari 5.1 for Iphones and Ipads
  • Opera Latest versions


HTML5 New Features

New Features in HTML5

New FeaturesUse
New Semantic Tags<header>, <nav>, <section>, <article>, <footer> etc. HTML5 New Elements
Audio and Video<audio> & <video> Html5 Audio Video Tutorial
New Form ControlsNew attributes, New input types, progress bar etc. HTML5 Form Tutorial
SVG<svg> Tag for vector based drawings, shapes, pie and bar graphs, maps etc. SVG Tutorial
Canvas<canvas> tag for 2-d drawings using javascript. Canvas Tutorial
CSS-3New Selectors & properties for better styling, transition, transformation and animations. Css3 Tutorial
GeolocationTo Detect user physical location. Html5 Geolocation
Web StorageTo store upto 5mb data on front end either as local or session storage. Local and Session Storage
MicrodataTo tell search engines our page structure.
Drag n dropNew Events in javascript.

HTML5 Doctype

HTML5 Doctype is short, and easy to remember. Unlike, HTML4 and XHTML, there is no DTD. As per W3C, same doctype will be used in later versions of HTML.


<!DOCTYPE HTML>				  // New and  short Doctype, no DTD Required 

HTML5 Template

Default Template for HTML5 based websites.

<!DOCTYPE HTML>				  
<html lang="en"> 
<head>

<title>HTML5 Page</title>
<meta charset="utf-8">			  			// Short charset meta tag
<link href="style.css" rel="stylesheet">    	// No Type attribute required
<script src="file.js"></script>       	// No Type attribute required
</head>

<body>
		<h1>My First HTML5 page.</h1>
</body>

</html>