Greetings All,

Html 5 is the extension of Html. It is a standard for structuring and presenting content on the World Wide Web.

Browser Support : –

The latest versions of Google Chrome, Apple Safari,  Mozilla Firefox, Internet Explorer 9.0  and Opera all support many HTML5 features and will also have support for some HTML5 functionality.

New Features In Html 5 :-

HTML5 introduces a lot of new elements and attributes that can help us in building modern websites. The set of the most Important features introduced in HTML5. They are given below : –

 

  1. New Semantic Elements:-  They are <header> , <footer> and <section> new elements are introduce in Html5.
  2. Forms :- Improvements to HTML web forms where new attributes have been introduced for input tag like number, date, time, calendar, and range..
  3. Canvas :- <svg> and <canvas> it gives the supports of two-dimensional drawing surface that we can program with JavaScript.
  4. Audio & Video :- We can use embed audio or video on our webpages without resorting to third-party plugins.
  5. Drag and drop :- Drag and drop the items from one location to another location on the same webpage.

 

Uses of all New Features of Html5 with example

  • <header>

It defines a header for a document or section . We can define <header> element under the body tag like..

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>…</title>
</head>
<body>
<header>…</header>
………….
……….
</body>
</html>

Example : – 
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title> Header Element </title>
</head>
<body>
<header role=”banner”>
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in safari, chrome or Mozila.</p>
</header>
</body>
</html>


 

  • <footer>

It defines a footer for a document or section . We can define <footer> element under the body tag like..
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>…</title>
</head>
<body>
………….
………….
<footer>…</footer>
</body>
</html>

Example : – 
<html>
<head>
<title> Footer Tag </footer>
</head>
<body>
<footer>
<p> Created by jellyfishtechnologies.com Tutorials Point </p>
</footer>
</body>
</html>

 

  • <section>

It defines a section of any artical tag for a document or section . We can define <artical> element under the body tag like..

Example : – 
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>…</title>
</head>
<body>
<artical>
<section><Once article can have multiple sections</section>
</artical>
</body>
</html>

 

  • <form>

Form elements and attributes in HTML 5 provide a greater degree of semantic mark-up than HTML 4. A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.

Example : –
<form action=”jellyfishtechnology.com” method=”get”>
<lable> Date and Time</lable>
<input type=”datetime” name=”newName” required placeholder=”Enter Your name”>
<input type=”date” required>
<input type=”email” required>
<input type=”submit” value=”Submit”>
</form>

 

  • Canvas

The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) – you must use a script to actually draw the graphics.

The getContext() method returns an object that provides methods and properties for drawing on the canvas.

This reference will cover the properties and methods of the getContext(“2d”) object, which can be used to draw text, lines, boxes, circles, and more – on the canvas.

Example : –
<canvas id=”mycanvas” width=”500″ height=”300″ border=”10px solid blue” >
</canvas>

 

  • <svg>

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.

Example :-
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<meta charset=”utf-8″ />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id=”svgelem” height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<circle id=”redcircle” cx=”50″ cy=”50″ r=”50″ fill=”red” />
</svg>
</body>
</html>

 
 

  • Audio/Video

The HTML5 DOM has methods, properties, and events for the <audio> and <video> elements.These methods, properties, and events allow you to manipulate <audio> and <video> elements using JavaScript.Here is the simplest form of embedding a video and audio file in your webpage:

Example of Video : –
<video src=”foo.mp4″ width=”300″ height=”200″ controls>
Your browser does not support the <video> element.
</video>

 

Example of Audio : –
<audio src=”foo.mp4″ width=”300″ height=”200″ controls>
Your browser does not support the <audio> element.
</audio>

 

  • Drag and Drop

Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location. In HTML5, drag and drop is part of the standard: Any element can be draggable.

Example :-
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData(“text”, ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″>
</body>
</html>