Some Important new features in html5

|
| By Webner

Semantic tags in HTML 5: Semantic tag introduces meaning to the web page rather than just presentation. like and tags are not semantic tags because these are just used for content presentation in the browser.

These are list of semantic tags:

// we should use this tag instead of

// represent some extra content aside kept from the main content .

// this tag defines sections in a document grouping the related content, such as chapters , Introduction.

// this tag is used for representing navigation links or menus.

So we should use these semantic tags because these have a specific meaning in their name and these tags are SEO friendly. Also browser can understand its meaning.

New Graphics element in HTML 5: Canvas is used to draw graphics using javascript and html. Using canvas we can draw different types of shapes like line, rectangle, circle etc:

<canvas id="circle" width="300" height="150" style="border:1px solid red;">
</canvas>
<script>
var Id = document.getElementById("circle");
var cir = Id.getContext("2d");
ctx.beginPath();
cir.arc(100, 75, 50, 0, 2 * Math.PI);
cir.stroke();
</script> 

It will draw a circle like this:

1

New HTML 5 APIs: Local Storage: localstorage are new api in the HTML 5 which overcome the cookie.localstorage limitations. It has large amount of data storage capacity than cookie.localstorage, has no expiry date and gets cleared only through JavaScript, or by clearing the Browser Cache.

SessionStorage is also similar to localStorage but expires when the browser is closed (not the tab):

var name = localstorage.setitem("keyname", "value") // used for set data in the local storage
var name = localStorage.getItem(“keyname”) // used for retrieving data from localstorage.

Drag and Drop:- Drag drop is very common feature. In HTML 5 we can do it by simple javascript function. Earlier we required jquery libraries for this purpose. Now we don’t need to include any extra jquery libraries:
test link

We can use array to drag multiple data elements.

Drop Data: Where we need to drop dragged items:

function allowDropElement(ev) { ev.preventDefault(); } 
function dropfunction(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); 
ev.target.appendChild(document.getElementById(data)); }

We can upload the external file using HTML 5 drag drop API:

function initDragging(e) {
'dragover dragenter': function (e) { // this will work when we start dragging and dropping file
e.preventDefault();
e.stopPropagation();
},
'drop': function (e) { // this works when when we drop file.
e.preventDefault();
var dataTransfer = e.originalEvent.dataTransfer;
if (dataTransfer && dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
$.each(dataTransfer.files, function (i, file) {

var reader = new FileReader(); // This function will read all file information(name, type,size)
reader.onload = $.proxy(function (file, $fileList, event) {

filename = file.name; // Now we can pass this name to any other function which will post
data to the server.

result = uploadFile(file) // I have called another function and passed the filename as an
argument
}, this, file, $(""));
reader.readAsDataURL(file);
});
}
}}

Call this function where you want to upload file.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *