10 Most Important And Useful HTML5 Tags You Must Know

Posted By : Rajan Rawat | 13-Sep-2017

html5

HTML5 introduced so many useful and brand new tags, attributes, elements and features. This blog will tell you about the 10 most useful tags and attributes

As we know that HTML5 is most important and when it comes to web designing and development as well as bloggers. HTML5 intoduced so many useful and brand new tags, attributes, elements and features. so now of these are very useful and helpful tags for making a website. In my this post, I will tell you 10 most useful and important tags and attributes of HTML5 that will help you to make a website. You must know these ten tags before start you Website

1. DOCTYPE Declaration

This is the first thing you should put before your HTML tag. Its not tag its an instruction to the web browser that which version of HTML page is written in

<!DOCTYPE html>

2. No type attribute for script and link

In HTML4 you define the this is how you define the <script> and <link> tags

But in HTML5 you dont have to define the MIMe type value for your script. you can type the code like below

3.Semantics

In the Previous HMTL4 we use id and class for the pseudo-semantic structure but for div we no semantic stucture

but in HTML5 we have semantic sturcture like <header>, <footer>, and <nav> for the bettement of code

4. Semantic Structure

article vs section

.....

</section

section tag is used to define the html element like heade and footer and other.

...

</article>

article tag is used to define the specific independent content

5. Input types, attributes and forms

new input type and attributes have been introduced in HTML 5

<form>

</form>

6. Canvas in HTML5

this is the most new and exciting feature of HTML5 which allows you to draw 2D shapes on your web page with help of javascript.

<canvas id="Canvas" width="300" height="300"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(0,0,150,150);
</script>

7. Audio and Video tags

Previously for adding a video and audio in the web page we have to install the plugins through like <object > and <embed>

but HTML 5 has new tags for that <video> and <audio>

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

<video controls="controls" width="500" height="400">
<source src="movie.mp4" type="audio/mp4" />
<source src="media.ogg" type="audio/ogg" />
Your browser does not support the <video> tag.
</audio>

8. HTML5 editable content

HTML5 has a new exicting attribute now you can edit the content by the adding contenteditable attibute to it.

<div contenteditable="true">
content for editing
</div>

9. Local Storage

By this functionality user can the data locally within the web browser. Before the HTML5 user have store the data in the cookies with every server request.

localStorage.variableName = "value";

alert(localStorage.variableName);

localStorage.removeItem("variableName");

alert(localStorage.variableName);

</script>

10. Custom attirbute

This attribute stores the arbitray data for the pupose of Javascript . You can create the custom attribute in element with the prefix of data.