HTML5 में कौन-कौन से नए Features हैं ?
HTML5 in Hindi: HyperText Markup Language (HTML) एक standard language है जिसका उपयोग website बनाने के लिए पिछले 15 सालों से भी अधिक समय से किया जा रहा है।
जैसा की आप जानते हैं की technology की दुनिया में लगातार बदलाव होते रहते हैं और समय-समय पर चीजों को improve किया जाता रहता है। ठीक उसी तरह HTML में भी कई सारे updates हो चुके हैं इसका सबसे latest version HTML5 है।
Smartphones और mobile users की संख्या में लगातार वृद्धि हो रही है और लोग website access करने के लिए mobile devices का बहुत ज्यादा उपयोग कर रहें हैं ऐसे में अब website developers को desktop और laptop के अलावा इस बात का भी ध्यान रखना जरूरी होता है की उनके website को mobile-users भी आसानी से access कर पायें।
HTML4 का उपयोग आज भी किया जा सकता है लेकिन technology में होने वाले changes की वजह से यह कई सारे requirements को पूरा नही कर पता इसलिए इस challenge को पूरा करने के लिए कई सारे improvements के साथ HTML5 को launch किया गया है।
यह भी पढ़ें: सिर्फ 20 मिनट में सीखें HTML हिंदी में
आज हम इस article में HTML4 और HTML5 को compare करेंगे और जानेंगे की HTML5 में कौन-कौन से नए features add किये गये हैं|
HTML4 और HTML5 में क्या Differences हैं?
HTML vs HTML5: चलिए अब दोनों को compare करते हैं ताकि आपको पता चल सके की पुराने और नये HTML में कितना अंतर है और HTML5 में कौन-कौन से नये features include किये गये हैं|
Simple and Clear SyntaxHTML4 के मुकाबले HTML5 के syntax ज्यादा सरल और clear होते हैं| उदाहरण के लिए DOCTYPE element की बात करें तो HTML4 में DOCTYPE declaration बहुत ही lengthy होता है और एक external source को refer करता है| जबकि HTML5 में DOCTYPE का syntax बहुत ही simple है | Example के लिए आप नीचे दोनों का syntax देख सकते हैं और आसानी से दोनों में अंतर पता कर सकते हैं:
HTML4 DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3. org/TR/html4/strict.dtd">HTML5 DOCTYPE:
<!DOCTYPE html>Multimedia SupportHTML4 में multimedia content ( जैसे audio या video) को किसी web page के जोड़ने के लिए हमें third party plugins जैसे Flash, Silverlight आदि का उपयोग करना पड़ता था|
जबकि HTML5 में multimedia के लिए built in support दिया गया है, इसके लिए अलग से <audio> और <video> tags दिए गये हैं|
Vector GraphicsComputer में दो तरह के graphics use होते हैं:
- Raster image या bitmap image जो की pixel based होता है, ज्यादातर जो image हम use करते हैं camera आदि से capture करते हैं वह raster image होता है
- Vector image जो की mathematical formula के आधार पर बना होता है| इसकी खासियत यह होती है की इसकी size को जितना चाहें उतना बिना quality खराब किये stretch यानि बड़ा किया जा सकता है|
यह भी पढ़ें: Raster और Vector Graphics क्या हैं? दोनों में क्या अंतर है? कब किसका use करें?
हम HTML4 में भी vector graphics use कर सकते हैं लेकिन उसके लिए हमें Silverlight, VML या Flash का उपयोग करना होगा जबकि HTML5 में इसके लिए भी built in support दिया गया है जहाँ SVG या canvas का उपयोग कर vector graphics बना सकते हैं|
Client Side Storage अगर temporary storage की बात करें तो दोनों versions में अगल-अलग तरीके use होते हैं:
- HTML4 में किसी website के important data को temporarily store करने के लिए browser cache का उपयोग किया जाता है जिसकी capacity limited होती है|
- HTML5 में application cache और web SQL database का use होता है|
Geo LocationHTML4 में website visit करने वाले visitors की geo location को पता करना बहुत ही मुश्किल काम होता है लेकिन जब से HTML5 launch हुआ है यह काम बहुत ही आसान हो गया है|
HTML5 में नये Tags
वैसे तो कई सारे नए tags को HTML5 में include किया गया है लेकिन उनमे से कुछ important tags के बारे में हम आज इस article में जानेंगे|
<canvas> tagयह एक प्रकार का rectangular area होता है जिसके अंदर हम कई प्रकार के graphics draw कर सकते हैं| canvas में drawing करने के लिए हमें Javascript की जरूरत पड़ेगी| इसका एक example आप नीचे देख सकते हैं:
<h3>HTML5 Canvas 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='#ff9800';
temp2.fillRect(25,28,200,100);
</script>
<audio> tag audio embed करने के लिए हम सीधे audio tag का उपयोग कर सकते हैं| <audio> tag से हम Mp3, Wav, और Ogg format के audios को अपने web page पर embed कर सकते हैं| इसे कैसे use करना है इसका एक example नीचे दिया गया है:
<h3>HTML5 Audio Example</h3>
<audio controls>
<source src="sample.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<video> tag audio tag की तरह ही हम video को भी अपने वेबसाइट पर लगा सकते हैं इसके लिए simply हमें <video> tag का उपयोग करना होगा जिसका syntax आप नीचे देख सकते हैं| ध्यान रहे <video> tag से video embed करते समय हम Mp4, WebM, Ogg format के videos को ही उपयोग में ला सकते हैं|
<h3>HTML5 Video Example</h3>
<video width="320" height="240" controls="controls">
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><header> and <footer> tag जैसा की नाम से पता चल रहा है की इसका उपयोग website के header और footer बनाने में किया जाता है| पहले हम इस काम के लिए दो <div> बनाते थे लेकिन अब हम सीधे <header> tag से header और <footer> tag से footer वाले section को design कर सकते हैं|
<article> and <section> tag अपने वेब पेज में <article> और <section> tag से अलग-अलग sections को mark किया जा सकता है जिसका सबसे बड़ा फायदा search engine optimization (SEO) में होगा|<article> tag से हम ऐसे portion को mark करते हैं जो की अपने आप में complete और independent component हो जैसे article, forum post, blog post आदि|
<!DOCTYPE html>
<html>
<head>
<head><title>Article Tag Example</title></head>
</head>
<body>
<h3>HTML5 Article Example</h3>
<article>
<h1>Web in Hindi</h1>
<p>WebInHindi is the best place to learn web design and development in Hindi language.</p>
</article>
</body>
</html><menu> and <nav> tag यहाँ पर कई लोगों को menu और nav में confusion होता है लेकिन इन दोनों के बीच में काफी अंतर है:
- menu का उपयोग group of commands के लिए किया जाता है जैसे आपने देखा होगा किसी software के toolbar में कुछ buttons दिखाई देते हैं, ठीक उसी तरह के menus create कर सकते हैं जहाँ पर अलग-अलग links या buttons होते हैं और उन पर click करने से generally कोई function execute होता| आप इसका एक example नीचे देख सकते हैं जहाँ right click करने पर एक context menu display होता है|
- nav का use navigation design करने के लिए किया जाता है जिसमे अलग-अलग pages को <a> tag द्वारा link किया जाता है|
<!DOCTYPE html>
<html>
<body>
<div style="background:lightyellow;border:1px solid #cccccc;padding: 10px;" contextmenu="mymenu">
<p>Right-click inside this box</p>
<menu type="context" id="mymenu">
<menuitem label="Example"></menuitem>
<menuitem label="Hello World"></menuitem>
</menu>
</div>
</body>
</html>
अभी menu tag फ़िलहाल सभी browsers पर काम नही करता आप Firefox browser में इसे run करेंगे तो आप देख पाएंगे की right click करने पर जो menu items हमने create किया है वह context menu में सबसे ऊपर दिखाई देगा (नीचे screenshot में देखें):
<datalist> tag HTML5 में datalist एक combo box यानि dropdown की तरह होता है लेकिन इन दोनों में थोडा अंतर होता है:
- dropdown में पहले से values fix होते हैं और user उनमे से कोई एक option choose करता है|
- datalist को हम एक तरह से dropdown और textbox का combination कह सकते हैं जिसमें पहले से कुछ options fix होते हैं लेकिन user उसे एक text box की तरह भी use कर सकता है और खुद भी value type कर सकता है| जैसा आपने Google में देखा है, हम text box में type करते हैं लेकिन कुछ suggestions dropdown की तरह नीचे भी दिखाई देते हैं|
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<progress> जब आप browser में कुछ download करते हैं तो आपको एक progress bar दिखाई देता होगा जो यह बताता है कितना data download हो चुका है, ठीक उसी तरह का एक progress bar हम HTML5 में <progress> tag से बना सकते हैं|
Downloading progress:
<progress value="57" max="100">
</progress>
<figure> and <figcaption> <figure> एक प्रकार का container होता है जिसमे generally किसी image को रखा जाता है और <figcaption> से उस image के लिए caption या subtitle set किया जाता है|
<figure>
<img src="tajmahal.jpg" alt="Tajmahal" width="300" height="225">
<figcaption>Fig. - Tajmahal Agra India .</figcaption>
</figure>
<details> tag आपने कई websites पर देखा होगा की किसी link पर click करने से कुछ list of contents expand होते हैं और जब हम उसी link पर click करते हैं तो content collapse हो जाते हैं| वैसे तो इसे Javascript या jQuery से बनाया जाता है लेकिन HTML5 के <details> tag से इसे बनाना और भी आसान हो जाता है|
<details>
<summary>Browser</summary>
<ul>
<li>Firefox</li>
<li>Opera</li>
<li>Safari</li>
<li>Chrome</li>
</ul>
</details>
<input> type attributes input tag का उपयोग आपने पहले भी किया होगा जिससे textbox, dropdown, checkbox आदि बनाये जाते हैं लेकिन HTML5 में इन सब के अलावा user से हम कुछ अलग तरह के inputs भी ले सकते हैं इसके लिए input tag के type attribute के लिए कुछ नए values बनाये गए हैं:
- date: इससे browser में calendar display होगा जहाँ से user date select कर सकता है
- color: color input लेने के लिए
- email: textbox बनाने के लिए जिसमे केवल email id input किया जा सकता है
- number: textbox में केवल numerical value enter करने के लिए
- time: time input लेने के लिए
- url: url के format में input लेने के लिए
DOB: <input type="date"><br>
यहाँ पर ध्यान देने वाली बात यह है की ये सारे नये tags अभी सभी browsers खासतौर पर पुराने browsers पर काम नही करते हैं|
आज आपने इस article (HTML5 in Hindi) में जाना की HTML5 में कौन-कौन से नए Features हैं और साथ ही आपने जाना की HTML और HTML5 में क्या अंतर हैं।
अगर आपको यह article पसंद आया तो अपने दोस्तों के साथ जरूर share करें। यदि हमसे कुछ कहना चाहते हैं या कुछ सवाल पूछना चाहते हैं तो comment box का जरूर उपयोग करें।
