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:-