10 Most Important And Useful HTML5 Tags You Must Know
Posted By : Rajan Rawat | 13-Sep-2017
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
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
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
<header>
...
</header>
<nav>
<ul>...</ul>
</nav>
<footer>
...
</footer>
4. Semantic Structure
article vs section
<section>
.....
</section
section tag is used to define the html element like heade and footer and other.
<article>
...
</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
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(0,0,150,150);
</script>
<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>
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rajan Rawat
Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.