New Tags of HTML 5

New Tags of HTML 5 in Hindi

HTML का पूरा नाम  Hyper Text Markup Language  है |

HTML 5 मे HTML के old version की तुलना मे HTML 5 मे  बहुत ही अच्छे और कुछ नये tags को जोड़ा गया है जिनमे से हम कुछ महत्वपूर्ण Tags के बारे मे आज की पोस्ट मे जानेंगे |

<canvas> tag

<canvas> tag के द्वारा हम किसी rectangular area के अंदर कई प्रकार के graphics draw कर सकते है |

note :-  <canvas > tag के द्वारा drawing करने के लिए Javascript की जरूरत पड़ेगी |

for example :- 

<h3>HTML5 Canvas Tag Example</h3>
<canvas id="mycanvas" width="400" height="300">Update your browser</canvas>
<script>
var temp1=document.getElementById('mycanvas');
var temp2=temp1.getContext("2d");
temp2.fillStyle='#440ADD';
temp2.fillRect(35,30,250,100);
</script>

OUTPUT :-

<video> tag 

अगर हम html के द्वारा अपनी वेबसाइट पे कोई video लगाना चाहते है तो उसके लिए हम video tag का उपयोग कर सकते है |

note :-  video embed करते समय हम Mp4, WebM, Ogg format वाले videos को ही उपयोग में ला सकते हैं|

for example :- 

<h3>HTML5 Video tag  Example</h3>
<video width="320" height="240" controls="controls">
  <source src="xyz.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video>

OUTPUT :- 

HTML 5 Video – Browser Support

Browser                 MP4         WebM        Ogg
Internet Explorer       YES         NO          NO
Chrome                  YES         YES         YES
Firefox                 YES         YES         YES
Safari                  YES         NO          NO

<audio> tag

अगर हम html के द्वारा अपनी वेबसाइट पे कोई audio लगाना चाहते है तो उसके लिए हम audio tag का उपयोग कर सकते है |

note :-  audio embed करते समय हम Mp3, Wav, Ogg format वाले audios को ही उपयोग में ला सकते हैं|

for example :- 

<h3>HTML5 Audio tag Example</h3>
<audio controls>
  <source src="sample.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

OUTPUT :- 

HTML 5 Audio – Browser Support

Browser             MP3            WAV        OGG
Chrome              YES            YES        YES
Firefox             YES            YES        YES
Safari              YES            YES        NO
Opera               YES            YES        YES

<progress> tag

जब कभी हम किसी web browser से कुछ भी जैसे ऑडियो , वीडियो , फाइल आदि download करते है और यदि हमे ये देखना हो की data कितना download हुआ है तो उसके लिए एक progress bar होता है | वैसा ही progress bar बनाने के लिए हम <progress> tag का उपयोग करते है |

for example :- 

Downloading Status :- 
<progress value="50" max="100">
</progress>

OUTPUT :- 

<figure> and <figcaption>  tag

<figure> एक प्रकार का container होता है जिसमे generally किसी image को रखा जाता है और <figcaption> से उस image के लिए caption या subtitle set किया जाता है|

for example :- 

<figure>
 <img src="kedar.jpeg" alt="kedar" width="300" height="225">
 <figcaption>Fig. - kedarnath India .</figcaption>
</figure>

OUTPUT :- 

<details> tag 

आपने बहुत सारी websites पर देखा होगा की जब हम किसी link पर click करते है तो कुछ list of contents open होते हैं और जब हम उसी link पर click करते हैं तो content close हो जाते हैं| HTML 5 से पहले इसे Javascript या jQuery की help से बनाया जाता है लेकिन HTML5 मे <details> tag से इसे बनाना और भी आसान हो जाता है|

for example :- 

<details>
  <summary>Subject</summary>
<ul>
<li>HTML</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ul>
</details>

OUTPUT:-