Here is the detail to explain you what is html5 and what it does.

Later we use HTML, HTML4, XHTML and HTML DOM. All these HTML version cannot support rich content of web programming. E.g animation to graphics, music to movies etc. Now HTML5 is the latest version of HTML. HTML5 support all important contents without using additional plugins. HTMl5 work for PC, Tablet or Smartphone easily.

Without any validation you can make input type. That is a more beneficial work for developer to complete their task in seconds rather than to spend much time on validation.We are Showing you some good examples below.Have a look on example and check variety of HTML5.


You May Also Like:


The HTML5 <!DOCTYPE>

In HTML5 there is only one DOCTYPE declaration, and it is very simple:

<!DOCTYPE html>

HTML5 – New Features

Important Features of HTMl5 are graphics, media content, form handling, API and support for local storage.

Browser Support for HTML5

Chrome, Firefox, Internet Explorer, Safari, Opera support the new HTML5 elements.


The figure & figcaption elements

Printed material like books and magazines, an image, chart, or code example use images by using caption. Before now, we didn’t have a way of semantically marking up this sort of content directly in our HTML, instead resorting to CSS class names. HTML5 hopes to solve that problem by introducing the <figure>and <figcaption> elements.

The <figure> element

The <figure> element is intended to be used in conjunction with the<figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things).

Using <figure> and <figcaption>

An image within a <figure> element without a caption Here is the code:

<figure>
  <img src="/orang-utan.jpg" alt="Baby Orang Utan hanging from a rope">
</figure>

Figure with an image and caption

An image within a <figure> element with an explanatory caption and the code:

<figure>
  <img src="/macaque.jpg" alt="Macaque in the trees">
  <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <ahref="http://www.themesrefinery.net">Themesrefinery</a></figcaption>
</figure>


Make your Content Editable

Now a days we have using tricks to edit and store text in a web browser. By using contenteditable attribute this work make so easy.

The contenteditable attribute is an attribute whose keywords are the empty string,

contenteditable has three possible states:

contenteditable=”” or contenteditable=”true”

Indicates that the element is editable.

contenteditable=”false”

Indicates that the element is not editable.

contenteditable=”inherit”

Indicates that the element is editable if its immediate parent element is editable. This is the default value.

<!DOCTYPE html>
 
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>untitled</title>
</head>
<body>
    <h2> To-Do List </h2>
     <ul contenteditable="true">
        <li> Break mechanical cab driver. </li>
        <li> Drive to abandoned factory
        <li> Watch video of self </li>
     </ul>
</body>
</html>

Browser Support for contenteditable

Chrome                              4.0+

Safari                                  3.1+

Mobile Safari                    5.0+

Firefox                                3.5+

Opera                                 9.0+

Internet Explorer            5.5+

Android                             3.0+

 


Email Inputs

Email Inputs is same as Form Input. Only we apply validation the browser is then able to look for patterns to ensure a valid e-mail address has been entered.

 

<!DOCTYPE html>
 
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>untitled</title>
</head>
<body>
    <form action="" method="get">
        <label for="email">Email:</label>
        <input id="email" name="email" type="email" />
 
        <button type="submit"> Submit Form </button>
    </form>
</body>
</html>

HTML5 Input Types

Input Type: color

Input type color is used to select a color from input field.

Example

Select your favorite color:

 <input type="color" name="favcolor">

Input Type: date

Input type date is used to select a date

Example

Birthday:

<input type="date" name="bday">

Input Type: datetime

Input type datetime allows the user to select a date and time (with time zone).

Example

Birthday (date and time):

<input type="datetime" name="bdaytime">

Input Type: email

Input type email is used for input e-mail address.

Example

E-mail:

<input type="email" name="email">

Input Type: search

Input type search is used for search fields.

Example

Search Google:

<input type="search" name="googlesearch">

 


HTML5 Form Elements

<datalist>

In this form element we can Specifies a list of pre-defined options for an <input> element

<keygen>

In this form Element Specifies a key-pair generator field in a form to authenticate users.

<output>

Represents the result of a calculation


HTML5 Graphics

HTML5 Canvas

The <canvas> element is used to draw graphics on a web page by using javascript. By using Canvas you can drawing paths, boxes, circles, text etc.

Here To add a border, use the style attribute:

Example

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

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)

Example

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

Canvas – Gradients

Gradients can be used to fill rectangles, circles, lines, text, etc.

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

Example

Create a linear gradient. Fill rectangle with the gradient:

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);

Example

Create a radial/circular gradient. Fill rectangle with the gradient:

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);

HTML5 Video

By using HTML5 you can easily show your videos on your web pages. Before HTML5 different browsers use different plugins for video like flash. HTML5 support videos. You can easily embed videos or movies on your web pages.

Example

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

HTML5 Audio

HTML5 has proper standard for audio files. Before HTML5 different browsers use different plugins for audio files. Now you can easily embed audio files by using HTML5.

Example

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

HTML5 Drag and Drop

HTML5 support Grag and Drop feature. You can easily drag an object from one location to another location.

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>

HTML5 Web Storage

With HTML5, web pages can store data locally within the user’s browser. You can store large amount of data without affecting the website performance.

 

About The Author

Related Posts

Leave a Reply

Your email address will not be published.