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>
<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>
...
</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
<form>
<input name="name" required placeholder="Your name" pattern="[A-z]{7}" />
<input type="email" name="email" required placeholder="email@inwebson.com"/>
<input type="url" name="url" placeholder="Homepage URL"/>
<input type="number" name="age" min="18" max="99" />
<textarea name="desc" placeholder="Describe yourself here..."></textarea>
<input type="submit" value="Submit" />
</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>
<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>
<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>
<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>
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.
<script>
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.
No comments:
Post a Comment