The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML 4.
HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag names, quoting our attributes,an attribute had to have a value and to close all empty elements.
But HTML5 is coming with lots of flexibility and would support the followings:

Uppercase tag names.
Quotes are optional for attributes.
Attribute values are optional.
Closing empty elements are optional.

The DOCTYPE:

DOCTYPEs in older versions of HTML were longer because the HTML language was SGML based and therefore required a reference to a DTD.
HTML 5 authors would use simple syntax to specify DOCTYPE as follows:

<!DOCTYPE html>

All the above syntax is case-insensitive.

Character Encoding:

HTML 5 authors can use simple syntax to specify Character Encoding as follows:

<meta charset="UTF-8">

All the above syntax is case-insensitive.

The <script> tag:

It's common practice to add a type attribute with a value of "text/javascript" to script elements as follows:

<script type="text/javascript" src="scriptfile.js"></script>

HTML 5 removes extra information required and you can use simply following syntax:

<script src="scriptfile.js"></script>

The <link> tag:

So far you were writing <link> as follows:

<link rel="stylesheet" type="text/css" href="stylefile.css">

HTML 5 removes extra information required and you can use simply following syntax:

<link rel="stylesheet" href="stylefile.css">

HTML5 Elements:

HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag name in between.
The difference between start tags and end tags is that the latter includes a slash before the tag name.
Following is the example of an HTML5 element:

<p>...</p>

HTML5 tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.
Most of the elements contain some content like <p>...</p> contains a paragraph. Some elements, however, are forbidden from containing any content at all and these are known as void elements. For example, br, hr, link and meta etc.
Here is a complete list of HTML5 Elements.

HTML5 Attributes:

Elements may contain attributes that are used to set various properties of an element.
Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example.
Following is the example of an HTML5 attributes which illustrates how to mark up a div element with an attribute named class using a value of "example":

<div class="example">...</div>

Attributes may only be specified within start tags and must never be used in end tags.
HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.
Here is a complete list of HTML5 Attributes.

HTML5 Document:

The following tags have been introduced for better structure:

section: This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.
article: This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside: This tag represents a piece of content that is only slightly related to the rest of the page.
header: This tag represents the header of a section.
footer: This tag represents a footer for a section and can contain information about the author, copyright information, et cetera.
nav: This tag represents a section of the document intended for navigation.
dialog: This tag can be used to mark up a conversation.
figure: This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

The markup for an HTM 5 document would look like the following:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>...</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

As explained in previous chapter, elements may contain attributes that are used to set various properties of an element.
Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example.
Following is the example of an HTML5 attributes which illustrates how to mark up a div element with an attribute named class using a value of "example":

<div class="example">...</div>

Standard Attributes:

The attributes listed below are supported by almost all the HTML 5 tags.

Attribute	Options	Function
accesskey	User Defined	Specifies a keyboard shortcut to access an element.
align	right, left, center	Horizontally aligns tags
background	URL	Places an background image behind an element
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
class	User Defined	Classifies an element for use with Cascading Style Sheets.
contenteditable	true, false	Specifies if the user can edit the element's content or not.
contextmenu	Menu id	Specifies the context menu for an element.
data-XXXX	User Defined	Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-".
draggable	true,false, auto	Specifies whether or not a user is allowed to drag an element.
height	Numeric Value	Specifies the height of tables, images, or table cells.
hidden	hidden	Specifies whether element should be visible or not.
id	User Defined	Names an element for use with Cascading Style Sheets.
item	List of elements	Used to group elements.
itemprop	List of items	Used to group items.
spellcheck	true, false	Specifies if the element must have it's spelling or grammar checked.
style	CSS Style sheet	Specifies an inline style for an element.
subject	User define id	Specifies the element's corresponding item.
tabindex	Tab number	Specifies the tab order of an element.
title	User Defined	"Pop-up" title for your elements.
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
width	Numeric Value	Specifies the width of tables, images, or table cells.

For a complete list of HTML5 Tags and related attributes please check reference to HTML5 Tags.

Custom Attributes:

A new feature being introduced in HTML 5 is the addition of custom data attributes.
A custom data attribute starts with data- and would be named based on your requirement. Following is the simple example:

<div class="example" data-subject="physics" data-level="complex">
...
</div>

The above will be perfectly valid HTML5 with two custom attributes called data-subject and data-level. You would be able to get the values of these attributes using JavaScript APIs or CSS in similar way as you get for standard attributes.

A complete list of standard tags available in HTML5 is given below. All the tags are ordered alphabetically along with an indication if they have been introduced newly or they have been deprecated in HTML5.

Tag	Description
<!--...-->	Specifies a comment
<!DOCTYPE>	Specifies the document type
<a>	Specifies an anchor
<abbr>	Specifies an abbreviation
<acronym>	Deprecated:Specifies an acronym
<address>	Specifies an address element
<applet>	Deprecated: Specifies an applet
<area>	Specifies an area inside an image map
<article>	New Tag: Specifies an independent piece of content of a document, such as a blog entry or newspaper article
<aside>	New Tag:Specifies a piece of content that is only slightly related to the rest of the page.
<audio>	New Tag:Specifies an audio file.
<base>	Specifies a base URL for all the links in a page
<basefont>	Deprecated: Specifies a base font
<bdo>	Specifies the direction of text display
<bgsound>	Specifies the background music
<blink>	Specifies a text which blinks
<blockquote>	Specifies a long quotation
<body>	Specifies the body element
<br>	Inserts a single line break
<button>	Specifies a push button
<canvas>	New Tag:This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
<caption>	Specifies a table caption
<center>	Deprecated: Specifies centered text
<col>	Specifies attributes for table columns
<colgroup>	Specifies groups of table columns
<command>	New Tag:Specifies a command the user can invoke.
<comment>	Puts a comment in the document
<datalist>	New Tag:Together with the a new list attribute for input can be used to make comboboxes
<dd>	Specifies a definition description
<del>	Specifies deleted text
<details>	New Tag:Specifies additional information or controls which the user can obtain on demand.
<dir>	Deprecated: Specifies a directory list
<div>	Specifies a section in a document
<dl>	Specifies a definition list
<dt>	Specifies a definition term
<embed>	New Tag:Defines external interactive content or plugin.
<fieldset>	Specifies a fieldset
<figure>	New Tag:Specifies a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
<b>	Specifies bold text
<big>	Deprecated:Specifies big text
<i>	Specifies italic text
<small>	Specifies small text
<tt>	Deprecated:Specifies teletype text
<font>	Deprecated: Specifies text font, size, and color
<footer>	New Tag:Specifies a footer for a section and can contain information about the author, copyright information, et cetera.
<form>	Specifies a form
<frame>	Deprecated:Specifies a sub window (a frame)
<frameset>	Deprecated:Specifies a set of frames
<head>	Specifies information about the document
<header>	New Tag:Specifies a group of introductory or navigational aids.
<hgroup>	New Tag:Specifies the header of a section.
<h1> to <h6>	Specifies header 1 to header 6
<hr>	Specifies a horizontal rule
<html>	Specifies an html document
<isindex>	Deprecated: Specifies a single-line input field
<iframe>	Specifies an inline sub window (frame)
<ilayer>	Specifies an inline layer
<img>	Specifies an image
<input>	Specifies an input field
<ins>	Specifies inserted text
<keygen>	New Tag:Specifies control for key pair generation.
<keygen>	Generate key information in a form
<label>	Specifies a label for a form control
<layer>	Specifies a layer
<legend>	Specifies a title in a fieldset
<li>	Specifies a list item
<link>	Specifies a resource reference
<map>	Specifies an image map
<mark>	New Tag:Specifies a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
<marquee>	Create a scrolling-text marquee
<menu>	Deprecated: Specifies a menu list
<meta>	Specifies meta information
<meter>	New Tag:Specifies a measurement, such as disk usage.
<multicol>	Specifies a multicolumn text flow
<nav>	New Tag:Specifies a section of the document intended for navigation.
<nobr>	No breaks allowed in the enclosed text
<noembed>	Specifies content to be presented by browsers that do not support the <embed>tag
<noframes>	Deprecated:Specifies a noframe section
<noscript>	Specifies a noscript section
<object>	Specifies an embedded object
<ol>	Specifies an ordered list
<optgroup>	Specifies an option group
<option>	Specifies an option in a drop-down list
<output>	New Tag:Specifies some type of output, such as from a calculation done through scripting.
<p>	Specifies a paragraph
<param>	Specifies a parameter for an object
<cite>	Specifies a citation
<code>	Specifies computer code text
<dfn>	Specifies a definition term
<em>	Specifies emphasized text
<kbd>	Specifies keyboard text
<samp>	Specifies sample computer code
<strong>	Specifies strong text
<var>	Specifies a variable
<plaintext>	Deprecated: Render the raminder of the document as preformatted plain text
<pre>	Specifies preformatted text
<progress>	New Tag:Specifies a completion of a task, such as downloading or when performing a series of expensive operations.
<q>	Specifies a short quotation
<ruby>	New Tag:Together with <rt> and <rp> allow for marking up ruby annotations.
<script>	Specifies a script
<section>	New Tag:Represents a generic document or application section.
<select>	Specifies a selectable list
<spacer>	Specifies a white space
<span>	Specifies a section in a document
<s>	Deprecated: Specifies strikethrough text
<strike>	Deprecated: Specifies strikethrough text
<style>	Specifies a style definition
<sub>	Specifies subscripted text
<sup>	Specifies superscripted text
<table>	Specifies a table
<tbody>	Specifies a table body
<td>	Specifies a table cell
<textarea>	Specifies a text area
<tfoot>	Specifies a table footer
<th>	Specifies a table header
<thead>	Specifies a table header
<time>	New Tag:Specifies a date and/or time.
<title>	Specifies the document title
<tr>	Specifies a table row
<u>	Deprecated: Specifies underlined text
<ul>	Specifies an unordered list
<video>	New Tag:Specifies a video file.
<wbr>	New Tag:Specifies a line break opportunity.
<wbr>	Indicate a potential word break point within a <nobr> section
<xmp>	Deprecated: Specifies preformatted text

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.

Browser Support:

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

New Features:

HTML5 introduces a number of new elements and attributes that helps in building a modern websites. Following are great features introduced in HTML5.

New Semantic Elements: These are like <header>, <footer>, and <section>.
Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input> tag.
Persistent Local Storage: To achieve without resorting to third-party plugins.
WebSocket : A a next-generation bidirectional communication technology for web applications.
Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.
Audio & Video: You can embed audio or video on your web pages without resorting to third-party plugins.
Geolocation: Now visitors can choose to share their physical location with your web application.
Microdata: This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
Drag and drop: Drag and drop the items from one location to another location on a the same webpage.

Backward Compatibility

HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.
It is suggested to detect support for individual HTML5 features using a few lines of JavaScript.
If you are not familiar with any previous version of HTML, I would recommend to go through our HTML Tutorial before you explore further concepts of HTM5.

What is SVG?

SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or resized
Every element and every attribute in SVG files can be animated
SVG is a W3C recommendation

SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:

SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable (and the image can be zoomed without degradation)

Embed SVG Directly Into HTML Pages

In HTML5, you can embed SVG elements directly into your HTML page:

Example

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

</body>
</html>

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:

Canvas	SVG
Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Well suited for graphic-intensive games	Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications

What is Canvas?

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Create a Canvas

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.
Note: By default, the <canvas> element has no border and no content.
The markup looks like this:

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.
Tip: You can have multiple <canvas> elements on one HTML page.
To add a border, use the style attribute:

Example

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

</body>
</html>

Draw Onto The Canvas With JavaScript

All drawing on the canvas must be done inside a JavaScript:

Example

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

</script>

</body>
</html>

Canvas Coordinates

The canvas is a two-dimensional grid.
The upper-left corner of the canvas has coordinate (0,0)
So, the fillRect() method above had the parameters (0,0,150,75).
This means: Start at the upper-left corner (0,0) and draw a 150x75 pixels rectangle.
Coordinates Example
Mouse over the rectangle below to see its x and y coordinates:

Canvas - Paths

To draw straight lines on a canvas, we will use the following two methods:

moveTo(x,y) defines the starting point of the line
lineTo(x,y) defines the ending point of the line

To actually draw the line, we must use one of the "ink" methods, like stroke().

Example

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

</script>

</body>
</html>

To draw a circle on a canvas, we will use the following method:

arc(x,y,r,start,stop)

To actually draw the circle, we must use one of the "ink" methods, like stroke() or fill().

Example

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

</script>

</body>
</html>

Canvas - Text

To draw text on a canvas, the most important property and methods are:

font - defines the font properties for text
fillText(text,x,y) - Draws "filled" text on the canvas
strokeText(text,x,y) - Draws text on the canvas (no fill)

Using fillText():

Example 1

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

</script>

</body>
</html>

Example2

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

</script>

</body>
</html>

Canvas - Gradients

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.
There are two different types of gradients:

createLinearGradient(x,y,x1,y1) - Creates a linear gradient
createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient

Once we have a gradient object, we must add two or more color stops.
The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, like a rectangle, text, or a line.
Using createLinearGradient():

Example1

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

Example 2

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

Canvas - Images

To draw an image on a canvas, we will use the following method:

drawImage(image,x,y)

Example

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

</script>

</body>
</html>

New Elements in HTML5

The internet, and the use of the internet, has changed a lot since HTML 4.01 became a standard in 1999.
Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. All those elements are removed or re-written in HTML5.
To better handle today's internet use, HTML5 also includes new elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, find Geolocation, include web storage, application cache, web workers, etc.

The New <canvas> Element

Tag	Description
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript)

New Media Elements

Tag	Description
<audio>	Defines sound content
<video>	Defines a video or movie
<source>	Defines multiple media resources for <video> and <audio>
<embed>	Defines a container for an external application or interactive content (a plug-in)
<track>	Defines text tracks for <video> and <audio>

New Form Elements

Tag	Description
<datalist>	Specifies a list of pre-defined options for input controls
<keygen>	Defines a key-pair generator field (for forms)
<output>	Defines the result of a calculation

New Semantic/Structural Elements

HTML5 offers new elements for better structure:

Tag	Description
<article>	Defines an article
<aside>	Defines content aside from the page content
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<command>	Defines a command button that a user can invoke
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<summary>	Defines a visible heading for a <details> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption>	Defines a caption for a <figure> element
<footer>	Defines a footer for a document or section
<header>	Defines a header for a document or section
<hgroup>	Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark>	Defines marked/highlighted text
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links
<progress>	Represents the progress of a task
<ruby>	Defines a ruby annotation (for East Asian typography)
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<rp>	Defines what to show in browsers that do not support ruby annotations
<section>	Defines a section in a document
<time>	Defines a date/time
<wbr>	Defines a possible line-break

Browser Support:

New Features:

HTML5 introduces a number of new elements and attributes that helps in building a modern websites. Following are great features introduced in HTML5.

New Semantic Elements: These are like <header>, <footer>, and <section>.
Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input> tag.
Persistent Local Storage: To achieve without resorting to third-party plugins.
WebSocket : A a next-generation bidirectional communication technology for web applications.
Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.
Audio & Video: You can embed audio or video on your web pages without resorting to third-party plugins.
Geolocation: Now visitors can choose to share their physical location with your web application.
Microdata: This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
Drag and drop: Drag and drop the items from one location to another location on a the same webpage.

Remote Tutor

Pages

The DOCTYPE:

Character Encoding:

The <script> tag:

The <link> tag:

HTML5 Elements:

HTML5 Attributes:

HTML5 Document:

Related Pots

Standard Attributes:

Custom Attributes:

Related Pots

Related Pots

Browser Support:

New Features:

Backward Compatibility

Related Pots

What is SVG?

SVG Advantages

Embed SVG Directly Into HTML Pages

Example

Differences Between SVG and Canvas

Comparison of Canvas and SVG

Related Pots

What is Canvas?

Create a Canvas

Example

Draw Onto The Canvas With JavaScript

Example

Canvas Coordinates

Canvas - Paths

Example

Example

Canvas - Text

Example 1

Example2

Canvas - Gradients

Example1

Example 2

Canvas - Images

Example

Related Pots

New Elements in HTML5

The New <canvas> Element

New Media Elements

New Form Elements

New Semantic/Structural Elements

Related Pots

Browser Support:

New Features:

Backward Compatibility

Related Pots

Hot in Week

Contact Us

Category

Recent Comments

Top Categories

Latest Categories

Latest Categories

Usefull Categories