Introduction to HTML Tags
एक HTML file tags और text का combination होती है। HTML tags को HTML elements भी कहा जाता है। यदि आपको tags का concept समझ आ जाये तो आप HTML आसानी से समझ सकते है। क्योंकि HTML पूरी तरह tags के द्वारा ही कार्य करती है।
शुरआत में जब HTML को design किया गया तो इसे सिर्फ webpages में text को display करने के लिए use किया जाता था। उस समय HTML बहुत limited थी और इसमें कुछ ही tags थे। HTML tags द्वारा text को webpages में display करने की process को text को mark करना कहा जाता था। यही वजह थी की HTML को text markup language कहा गया।
उस समय HTML सिर्फ computer scientists द्वारा use की जाती थी जो अपने papers को HTML द्वारा world wide web पर publish करते थे ताकि दूसरे scientist उन्हें पढ़ सके। लेकिन HTML इतनी simple और effective थी की यह बहुत जल्दी popular हो गयी और बहुत से लोग इसे use करने लगे।
धीरे धीरे जैसे ही HTML popular हुई तो webpages में अलग अलग elements show करने की requirement बढ़ती गयी। अब HTML सिर्फ एक text markup language नहीं रही है। अब आप HTML के द्वारा webpages में कई प्रकार के elements जैसे की lists, tables images, audio, video, graphics आदि insert कर सकते है।
किसी भी webpage में elements (lists, tables, images, video आदि) HTML tags द्वारा ही insert किये जाते है। आप webpage में जो भी add करना चाहे वह tags द्वारा ही add किया जाएगा। इसके लिए HTML आपको बहुत से tags provide करती है। ये सभी tags interpreter से familiar होते है।
Interpreter एक program होता है जो सभी web browsers में होता है। यह program HTML tags को identify करता है और उनके मतलब को समझकर web page में उसी के अनुरूप text, images, list और tables आदि show करता है।
Basically tags से आप interpreter को ये बताते है की आप webpage में क्या display करना चाहते है। उदाहरण के लिए यदि आप webpage में image add करना चाहते है तो इसके लिए आप <img> tag अपनी HTML file में define करेंगे।
ज्यादातर HTML tags का purpose आप उनके नाम द्वारा ही समझ सकते है। उदाहरण के लिए <table> tag को webpage में table insert करने के लिए use किया जाता है। जैसे जैसे आप इन्हें use करना शुरू करते है तो आपको आसानी से याद रहता है की कोई particular tag किस लिए use किया जाता है।
Syntax of HTML Tags
आम तौर पर HTML tag के 3 part होते है। Opening tag शुरुआत में लगाया जाता है। इससे interpreter को ये पता चल जाता है की आप क्या करने वाले है। Opening tag के बाद वो text लिखा जाता है जिस पर ये tag apply हो रहा है। इसके बाद closing tag लिखा जाता है।
Closing tag से interpreter को पता चलता है की इस tag का उपयोग यँही तक था। Closing tag को opening tag से differentiate करने के लिए closing tag में forward slash लगाया जाता है।
HTML tags का general syntax निचे दिया जा रहा है।
<tagName> text </tagName> |
सभी HTML tags ही closing tag द्वारा नहीं close किये जाते है। HTML में ऐसे tags भी है जिन्हें सिर्फ opening tag द्वारा ही define किया जाता है। ऐसे tags को empty tags कहा जाता है। इनका syntax निचे दिया जा रहा है।
<tagName> |
HTML में कुछ ऐसे tags भी है जिनके opening और closing दोनों parts एक ही part द्वारा define किये जाते है। इनमें पहले tag का नाम लिखा जाता है उसके बाद forward slash लगाया जाता है। इनका syntax निचे दिया जा रहा है।
<tagName /> |
Types of HTML Tags
HTML में बहुत प्रकार के tags available है। कुछ tags text को format करने के लिए use किये जाते है तो कुछ multimedia elements जैसे की images, audio, video आदि insert करने के लिए use किये जाते है।
HTML के कुछ tags structures जैसे की tables, sections और lists आदि create करने के लिए use किये जाते है तो कुछ tags container की तरह भी काम करते है जिनके अंदर दूसरे tags को define किया जाता है जो उसके sub tags होते है।
HTML के सभी प्रकार के tags को कुछ मुख्य categories में divide करके निचे बताया जा रहा है।
Basic Tags
Basic tags वे tags होते है जो सभी HTML documents में अनिवार्य रुप से use किये जाते है। ये tags किसी HTML document के core structure को define करते है। HTML के basic tags की list निचे दी जा रही है।
- <html> – यह tag एक HTML file को define करता है। हर HTML file की शुरुआत इसी tag से की जाती है।
- <head> – इस tag में webpage से related scripts और styles define की जाती है।
- <title> – इस tag से webpage का title define किया जाता है।
- <body> – इस tag में webpage का मुख्य content define किया जाता है।
Formatting Tags
Formatting tags वे tags होते है जो text को format करने के लिए use किये जाते है। ये tags text पर ही apply होते है और text की presentation को control करते है। HTML के formatting tags की list निचे दी जा रही है।
- <i> – इस tag द्वारा text को italic बनाया जाता है।
- <b> – इस tag द्वारा text को bold किया जाता है।
- <u> – इस tag से text को underline किया जाता है।
- <ins> – इस tag द्वारा ऐसे text को define किया जाता है जो content में बाद में add किया गया है।
- <mark> – इस tag द्वारा text को highlight किया जाता है।
- <sup> – इस tag से text को superscript के रूप में define किया जाता है।
- <sub> – इस tag से text को subscript के रूप में define किया जाता है।
- <small> – इस tag से small text के रूप में define किया जाता है।
- <del> – इस tag से text को deleted show किया जाता है।
- <strong> – इस tag से text को strong (bold) show किया जाता है।
Form and Input Tags
form और input tags webpage में forms create करने और user से input प्राप्त करने के लिए use किये जाते है। इनकी list निचे दी जा रही है।
- <form> – यह form elements create करने के लिए एक container tag होता है।
- <input> – इस tag द्वारा different form elements create किये जाते है।
- <textarea> – इस tag द्वारा textarea create किया जाता है।
- <button> – इस tag द्वारा buttons create किये जाते है।
- <select> – यह dropdown list create करने के लिए container tag होता है।
- <optgroup> – इस tag द्वारा dropdown menu में related options का group create किया जाता है।
- <option> – इस tag द्वारा dropdown list के options define किये जाते है।
- <label> – यह tag एक text label define करने के लिए use किया जाता है।
- <fieldset> – इस tag के द्वारा किसी form में related elements का create किया जाता है।
Frame Tags
Frame tags एक web page को frames के रूप में divide करने के लिए use किये जाते है। इन tags की list निचे दी जा रही है।
- <frame> – यह tag frame elements के लिए container का कार्य करता है।
- <frameset> – इस tag द्वारा frames define किये जाते है।
- <noframes> – इस tag द्वारा उन browsers के लिए content define किया जाता है। जो forms को support नहीं करते है।
- <iframe> – इस tag द्वारा inline frames define किये जाते है।
Image Tags
Image tags web page में images को include और render करने के लिए use किये जाते है। इनकी list निचे दी जा रही है।
- <img> – इस tag द्वारा webpage में image include की जाती है।
- <map> – इस tag द्वारा एक image map include किया जाता है।
- <area> – इस tag द्वारा map में किसी particular location को show किया जाता है।
Link Tags
Link tags web page में links create करने के लिए use किये जाते है। Links एक page से दूसरे page तक travel करने के लिए use की जाती है। इनकी list निचे दी जा रही है।
- <a> – इस tag द्वारा webpage में link define की जाती है।
- <link> – इस tag द्वारा HTML file को CSS file से जोड़ा जाता है।
List Tags
List tags webpage में lists create करने के लिए use किये जाते है। इनकी list निचे दी जा रही है।
- <ul> – यह tag unordered list के लिए container create करता है।
- <ol> – यह tag ordered list के लिए container create करता है।
- <li> – इस tag द्वारा list item define किये जाते है।
- <dl> – ये tag definition list के लिए container create करता है।
- <dt> – इस tag द्वारा definition list की term define की जाती है।
- <dd> – इस tag द्वारा definition list की definition define की जाती है।
Table Tags
Table tags webpages में tables create करने के लिए use किये जाते है। इनकी list निचे दी जा रही है।
- <table> – यह tag table create करने के लिए use किया जाता है।
- <th> – इस tag द्वारा table की heading define की जाती है।
- <tr> – इस tag द्वारा table की rows define की जाती है।
- <td> – इस tag द्वारा table के columns define किये जाते है।
- <thead> – यह tag table के header content का group create करता है।
- <tbody> – यह tag table के body content का group create करता है।
- <caption> – इस tag द्वारा table का शीर्षक define किया जाता है।
Style Tags
Styles tags विभिन्न प्रकार की styles apply करने के लिए use किये जाते है। इनकी list निचे दी जा रही है।
- <style> – इस tag के अंदर HTML document के लिए styles (CSS) define की जाती है।
Section Tags
Section tags किसी container की तरह काम करते है। इनकी list निचे दी जा रही है।
- <div> – यह tag एक block section create करता है।
- <span> – यह tag एक inline section create करता है।
- <section> – इस tag द्वारा document को कई sections में divide किया जाता है।
Scripting Tags
Scripting tags webpage में scripts apply करने के लिए use किये जाते है। इनकी list निचे दी जा रही है।
- <script> – इस tag के अंदर आप HTML के साथ use की जाने वाली script को define करते है।
- <noscript> – इस tag के अंदर ऐसे browsers के लिए content define करते है जिनमें script को disable कर दिया गया है।
HTML tags के अंदर attributes define किये जाते है। Attributes किसी tag के साथ interpreter को additional information pass करने के लिए use किये जाते है। Attributes के बारे में विस्तृत जानकारी के लिए HTML Attributes in Hindi पढ़े।