HTML टैग संदर्भ
HTML टैग संदर्भ एक संपूर्ण निर्देश पुस्तिका है जिसमें सभी उपलब्ध HTML तत्वों का विस्तृत विवरण होता है, यह किसी वास्तुकार की निर्माण सामग्री की संपूर्ण सूची के समान है। यह आवश्यक संसाधन 150+ HTML टैग्स को कवर करता है, बुनियादी संरचनात्मक तत्वों से लेकर HTML5 के उन्नत इंटरैक्टिव घटकों तक। जैसे किसी विशाल पुस्तकालय को व्यवस्थित करने के लिए प्रत्येक पुस्तक और उसके वर्गीकरण की गहरी समझ आवश्यक होती है, वैसे ही HTML टैग संदर्भ में प्रवीणता के लिए प्रत्येक तत्व के अर्थ, विशेषताओं और उपयोग संदर्भों की मजबूत जानकारी चाहिए। पोर्टफोलियो वेबसाइटों में डेवलपर्स article, section और figure जैसे अर्थपूर्ण टैग्स का उपयोग करके परियोजनाओं को पेशेवर तरीके से प्रस्तुत करते हैं। ब्लॉग प्लेटफॉर्म शीर्षक पदानुक्रम, समय तत्वों और उद्धरण टैग्स का उपयोग करके संरचित, SEO-अनुकूलित सामग्री बनाते हैं। ई-कॉमर्स साइटें फॉर्म तत्वों, उत्पाद डेटा के लिए तालिकाओं और समृद्ध प्रस्तुतियों के लिए मल्टीमीडिया टैग्स पर भारी निर्भर करती हैं। समाचार साइटें संरचनात्मक टैग्स, समय तत्वों और उद्धरण मार्कअप का उपयोग करके सही लेख स्वरूपण करती हैं। सामाजिक प्लेटफॉर्म मल्टीमीडिया टैग्स, इंटरैक्टिव तत्वों और डेटा विज़ुअलाइज़ेशन घटकों को एकीकृत करते हैं। इस व्यापक ट्यूटोरियल के माध्यम से आप संपूर्ण HTML शब्दावली में महारत हासिल करेंगे।
मूल उदाहरण
html<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<title>HTML टैग संदर्भ संपूर्ण गाइड</title> <!-- Document title for browser tab -->
<base href="https://example.com/"> <!-- Base URL for relative links -->
</head>
<body>
<header><hgroup><h1>पूर्ण HTML गाइड</h1><h2>सभी टैग्स व्याख्या सहित</h2></hgroup></header> <!-- Grouped headings in semantic header -->
<nav><menu><li><a href="#content">सामग्री</a></li></menu></nav> <!-- Navigation with menu structure -->
</body>
</html>यह मूलभूत उदाहरण पूर्ण HTML दस्तावेज़ संरचना को प्रदर्शित करता है जिसमें अक्सर अनदेखे किए जाने वाले लेकिन आवश्यक टैग्स शामिल हैं। DOCTYPE html5 घोषणा सभी आधुनिक ब्राउज़रों में मानक मोड सुनिश्चित करती है और अप्रत्याशित संगतता व्यवहार से बचाती है। मूल html तत्व lang="hi" विशेषता के साथ ब्राउज़रों और सहायक प्रौद्योगिकियों को दस्तावेज़ की मुख्य भाषा के बारे में सूचित करता है, जो पहुंच और अंतर्राष्ट्रीय SEO के लिए महत्वपूर्ण है। head अनुभाग में अदृश्य लेकिन महत्वपूर्ण मेटाडेटा शामिल है: meta charset="UTF-8" देवनागरी वर्णों सहित सही एन्कोडिंग सुनिश्चित करता है, title ब्राउज़र टैब और खोज परिणामों में प्रदर्शित होने वाला पाठ परिभाषित करता है, जबकि base दस्तावेज़ में सभी सापेक्ष लिंक के लिए संदर्भ URL स्थापित करता है। hgroup टैग पदानुक्रमित शीर्षकों h1 और h2 को समूहीकृत करता है, मुख्य शीर्षक और उपशीर्षक के बीच स्पष्ट अर्थपूर्ण संबंध बनाता है। यह अभ्यास स्क्रीन रीडर और खोज इंजन के लिए संरचनात्मक समझ में काफी सुधार करता है। nav तत्व स्पष्ट रूप से मुख्य नेवीगेशन क्षेत्र की पहचान करता है, जबकि menu सरल सूची तत्वों के बजाय इंटरैक्टिव कमांड की सूची बनाता है। यह सटीक अर्थपूर्ण दृष्टिकोण सहायक प्रौद्योगिकियों को कुशल सामग्री नेवीगेशन और खोज इंजन को बेहतर सूचना संरचना अनुक्रमण की अनुमति देता है।
व्यावहारिक उदाहरण
html<!DOCTYPE html>
<html lang="hi">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>टेक समाचार भारत - प्रौद्योगिकी समाचार</title><link rel="stylesheet" href="styles.css"></head>
<body><header><h1>टेक समाचार भारत</h1><nav><ul><li><a href="#tech">प्रौद्योगिकी</a></li><li><a href="#science">विज्ञान</a></li></ul></nav></header>
<main><section id="tech"><h2>प्रौद्योगिकी समाचार</h2><article><header><h3>कृत्रिम बुद्धिमत्ता: नई उपलब्धियां</h3><address>द्वारा <a href="mailto:[email protected]">प्रिया शर्मा</a></address><time datetime="2024-07-29T14:30:00+05:30">29 जुलाई 2024 दोपहर 2:30 बजे</time></header>
<p>नवीनतम अनुसंधान दिखाते हैं कि <mark>कृत्रिम बुद्धिमत्ता</mark> <abbr title="प्राकृतिक भाषा प्रसंस्करण">NLP</abbr> के क्षेत्र में तेजी से प्रगति कर रही है। <cite>नेचर AI रिव्यू</cite> के अनुसार <q cite="https://nature.com/ai">यह तकनीक मशीनों के साथ हमारी बातचीत को क्रांतिकारी बना रही है</q>।</p>
<blockquote cite="https://iit.ac.in/research"><p>AI <em>कंप्यूटिंग का तत्काल भविष्य</em> है और यह हमारे समाजों को <strong>मौलिक रूप से</strong> बदल देगी।</p></blockquote>
<details><summary>तकनीकी विवरण</summary><dl><dt>एल्गोरिदम</dt><dd>ट्रांसफॉर्मर न्यूरल नेटवर्क</dd><dt>प्रशिक्षण डेटा</dt><dd>500 अरब पैरामीटर</dd></dl><progress value="85" max="100">85% सटीकता</progress></details>
<figure><img src="ai-chart.jpg" alt="AI प्रदर्शन में तेजी से वृद्धि दिखाने वाला चार्ट"><figcaption>AI प्रदर्शन विकास (2020-2024)<sup>1</sup></figcaption></figure></article></section>
<aside><h4>संबंधित लेख</h4><ul><li><a href="#robotics">उन्नत रोबोटिक्स</a></li><li><a href="#quantum">क्वांटम कंप्यूटिंग</a></li></ul></aside></main>
<footer><small>© 2024 टेक समाचार भारत। खोजने के लिए <kbd>Ctrl+F</kbd> का उपयोग करें।</small></footer></body>
</html>यह प्रौद्योगिकी समाचार साइट का व्यावहारिक प्रदर्शन एक पेशेवर वास्तविकता संदर्भ में HTML टैग्स के व्यापक और समन्वित अनुप्रयोग को दर्शाता है। संरचना आवश्यक मेटाडेटा से शुरू होती है: मोबाइल अनुकूलन के लिए viewport, SEO-अनुकूलित title और स्टाइलशीट के लिए link। अर्थपूर्ण आर्किटेक्चर साइट हेडर की स्पष्ट पहचान के लिए header का उपयोग करता है, इसके बाद ul और a लिंक के साथ संरचित नेवीगेशन nav आता है। main तत्व मुख्य सामग्री को समाहित करता है, section के माध्यम से विषयगत क्षेत्रों में विभाजित। प्रत्येक लेख स्वायत्त, वितरणीय सामग्री इकाइयों के निर्माण के लिए article का उपयोग करता है। लेख हेडर में शीर्षक के लिए h3, ईमेल संपर्क के साथ लेखक पहचान के लिए address और भारतीय समय क्षेत्र सहित मशीन-पठनीय टाइमस्टैम्प के लिए datetime के साथ time शामिल है। सामग्री विभिन्न अर्थपूर्ण टैग्स का उपयोग करती है: महत्वपूर्ण शब्दों को हाइलाइट करने के लिए mark, तकनीकी संक्षिप्ताक्षरों के लिए title के साथ abbr, स्रोत संदर्भों के लिए cite, cite के साथ छोटे उद्धरणों के लिए q। blockquote तत्व स्रोत एट्रिब्यूशन के साथ लंबे उद्धरणों का प्रबंधन करता है, जिसमें जोर के लिए em और मजबूत महत्व के लिए strong शामिल है। summary के साथ details JavaScript के बिना फोल्डेबल सेक्शन बनाता है, तकनीकी विनिर्देशों को व्यवस्थित करने के लिए परिभाषा सूची dl, dt, dd, साथ ही सटीकता संकेतकों के लिए progress शामिल है।
HTML टैग संदर्भ की सर्वोत्तम प्रथाएं अर्थपूर्ण सटीकता और सार्वभौमिक पहुंच पर आधारित हैं। टैग चयन करते समय दृश्य रूप से अधिक अर्थपूर्ण अर्थ को व्यवस्थित रूप से प्राथमिकता दें: दृश्य बोल्डनेस के बजाय महत्व के लिए strong का उपयोग करें, इटैलिक के बजाय जोर के लिए em, और सामान्य div कंटेनर के बजाय nav, article, aside जैसे विशिष्ट अर्थपूर्ण तत्वों का चयन करें। स्तर छोड़े बिना शीर्षक पदानुक्रम h1-h6 का सम्मानपूर्वक सम्मान करें, प्रत्येक पृष्ठ पर केवल एक h1 होना चाहिए। पहुंच के लिए सभी चित्रों के लिए अर्थपूर्ण alt विशेषताएं प्रदान करें, for और id के माध्यम से फॉर्म नियंत्रणों के साथ लेबल जोड़ें, scope के साथ उपयुक्त तालिका हेडर का उपयोग करें, और lang विशेषता के माध्यम से भाषा निर्दिष्ट करें। सही नेस्टिंग, व्यवस्थित टैग बंद करने और नियमित W3C सत्यापन के माध्यम से साफ मार्कअप संरचना बनाए रखें। महत्वपूर्ण त्रुटियों में सारणीबद्ध डेटा के बजाय लेआउट के लिए तालिकाओं का उपयोग, CSS के बजाय font और center जैसे पुराने प्रस्तुति टैग्स का उपयोग, जब अर्थपूर्ण विकल्प मौजूद हों तो div और span का अधिक उपयोग, और बटन में लिंक जैसे इंटरैक्टिव तत्वों की गलत नेस्टिंग शामिल है। alt विशेषताओं का छूटना पहुंच को गंभीर रूप से नुकसान पहुंचाता है, जबकि गलत फॉर्म लेबलिंग स्क्रीन रीडर उपयोगकर्ताओं के लिए बाधाएं बनाती है। प्रभावी डिबगिंग के लिए DOM संरचना निरीक्षण के लिए ब्राउज़र डेवलपर टूल का उपयोग करें, axe-core जैसे टूल के साथ पहुंच ऑडिट करें, ऑनलाइन वैलिडेटर के साथ HTML को सत्यापित करें, और वास्तविक स्क्रीन रीडर के साथ परीक्षण करें।
📊 त्वरित संदर्भ
| श्रेणी | टैग | विवरण | उदाहरण उपयोग |
|---|---|---|---|
| दस्तावेज़ संरचना | <!DOCTYPE> | दस्तावेज़ प्रकार घोषणा | <!DOCTYPE html> |
| मूल तत्व | <html> | HTML दस्तावेज़ मूल तत्व | <html lang="hi"> |
| दस्तावेज़ शीर्ष | <head> | मेटाडेटा के लिए कंटेनर | <head><title>शीर्षक</title></head> |
| दस्तावेज़ शीर्षक | <title> | ब्राउज़र टैब में दिखाया गया शीर्षक | <title>मेरी वेबसाइट</title> |
| मेटाडेटा | <meta> | HTML दस्तावेज़ के बारे में जानकारी | <meta charset="UTF-8"> |
| बाहरी लिंक | <link> | बाहरी संसाधनों से संबंध | <link rel="stylesheet" href="style.css"> |
| आंतरिक शैलियां | <style> | आंतरिक CSS शैली परिभाषाएं | <style>body { margin: 0; }</style> |
| स्क्रिप्ट | <script> | JavaScript कोड या बाहरी स्क्रिप्ट | <script src="app.js"></script> |
| आधार URL | <base> | सापेक्ष लिंक के लिए आधार URL | <base href="https://example.com/"> |
| बिना स्क्रिप्ट | <noscript> | JavaScript के बिना ब्राउज़र के लिए सामग्री | <noscript>JavaScript सक्षम करें</noscript> |
| दस्तावेज़ मुख्य भाग | <body> | मुख्य सामग्री कंटेनर | <body><h1>सामग्री</h1></body> |
| अनुभाग हेडर | <header> | पृष्ठ या अनुभाग हेडर | <header><h1>साइट शीर्षक</h1></header> |
| नेवीगेशन | <nav> | नेवीगेशन लिंक कंटेनर | <nav><ul><li><a href="/">होम</a></li></ul></nav> |
| मुख्य सामग्री | <main> | मुख्य सामग्री क्षेत्र | <main><article>मुख्य सामग्री</article></main> |
| अनुभाग | <section> | विषयगत सामग्री समूहीकरण | <section><h2>अध्याय शीर्षक</h2></section> |
| लेख | <article> | स्वतंत्र, पूर्ण सामग्री | <article><h2>ब्लॉग पोस्ट</h2><p>सामग्री</p></article> |
| साइड सामग्री | <aside> | साइडबार या स्पर्शीय सामग्री | <aside><h3>संबंधित लिंक</h3></aside> |
| फुटर | <footer> | पृष्ठ या अनुभाग फुटर | <footer><p>कॉपीराइट 2024</p></footer> |
| पता | <address> | संपर्क जानकारी | <address>ईमेल: <a href="mailto:[email protected]">[email protected]</a></address> |
| शीर्षक समूह | <hgroup> | शीर्षक समूह कंटेनर | <hgroup><h1>शीर्षक</h1><h2>उपशीर्षक</h2></hgroup> |
| स्तर 1 शीर्षक | <h1> | प्राथमिक स्तर 1 शीर्षक | <h1>मुख्य पृष्ठ शीर्षक</h1> |
| स्तर 2 शीर्षक | <h2> | द्वितीयक स्तर 2 शीर्षक | <h2>अनुभाग शीर्षक</h2> |
| स्तर 3 शीर्षक | <h3> | तृतीय स्तर शीर्षक | <h3>उप-अनुभाग शीर्षक</h3> |
| स्तर 4 शीर्षक | <h4> | चतुर्थ स्तर शीर्षक | <h4>उप-उप-अनुभाग शीर्षक</h4> |
| स्तर 5 शीर्षक | <h5> | पंचम स्तर शीर्षक | <h5>छोटा शीर्षक</h5> |
| स्तर 6 शीर्षक | <h6> | षष्ठ स्तर शीर्षक | <h6>सबसे छोटा शीर्षक</h6> |
| अनुच्छेद | <p> | पाठ का अनुच्छेद | <p>यह एक अनुच्छेद है।</p> |
| विभाजन | <div> | सामान्य ब्लॉक कंटेनर | <div class="container">सामग्री</div> |
| स्पैन | <span> | सामान्य इनलाइन कंटेनर | <span class="highlight">पाठ</span> |
| लाइन ब्रेक | <br> | लाइन ब्रेक | लाइन एक<br>लाइन दो |
| क्षैतिज रेखा | <hr> | क्षैतिज रेखा विभाजक | <hr> |
| पूर्व-स्वरूपित | <pre> | पूर्व-स्वरूपित पाठ | <pre> कोड स्थान के साथ</pre> |
| ब्लॉक उद्धरण | <blockquote> | ब्लॉक उद्धरण | <blockquote cite="source.html"><p>उद्धरण पाठ</p></blockquote> |
| मजबूत महत्व | <strong> | मजबूत महत्व | <strong>महत्वपूर्ण पाठ</strong> |
| जोर | <em> | जोर दिया गया पाठ | <em>जोर दिया गया पाठ</em> |
| चिह्न | <mark> | हाइलाइट किया गया पाठ | <mark>हाइलाइट सामग्री</mark> |
| छोटा पाठ | <small> | छोटे अक्षर या कानूनी पाठ | <small>कॉपीराइट नोटिस</small> |
| हटाया गया | <del> | हटाया गया पाठ | <del>हटाई गई सामग्री</del> |
| डाला गया | <ins> | डाला गया पाठ | <ins>जोड़ी गई सामग्री</ins> |
| सबस्क्रिप्ट | <sub> | सबस्क्रिप्ट पाठ | H<sub>2</sub>O |
| सुपरस्क्रिप्ट | <sup> | सुपरस्क्रिप्ट पाठ | E=mc<sup>2</sup> |
| छोटा उद्धरण | <q> | छोटा इनलाइन उद्धरण | <q cite="source.html">छोटा उद्धरण</q> |
| उद्धरण संदर्भ | <cite> | उद्धरण संदर्भ | <cite>पुस्तक शीर्षक</cite> |
| संक्षिप्तीकरण | <abbr> | संक्षिप्तीकरण | <abbr title="HyperText Markup Language">HTML</abbr> |
| परिभाषा शब्द | <dfn> | परिभाषा शब्द | <dfn>HTML</dfn> एक मार्कअप भाषा है |
| समय | <time> | दिनांक या समय | <time datetime="2024-07-29">29 जुलाई 2024</time> |
| कोड | <code> | कंप्यूटर कोड | <code>console.log('नमस्ते')</code> |
| चर | <var> | चर नाम | <var>x</var> = 10 |
| नमूना आउटपुट | <samp> | कंप्यूटर नमूना आउटपुट | <samp>त्रुटि: फ़ाइल नहीं मिली</samp> |
| कीबोर्ड इनपुट | <kbd> | कीबोर्ड इनपुट | <kbd>Ctrl+C</kbd> दबाएं |
| स्ट्राइकथ्रू | <s> | स्ट्राइकथ्रू पाठ | <s>गलत जानकारी</s> |
| रेखांकित | <u> | रेखांकित पाठ | <u>रेखांकित पाठ</u> |
| तिर्यक | <i> | तिर्यक पाठ | <i>तिर्यक पाठ</i> |
| बोल्ड | <b> | बोल्ड पाठ | <b>बोल्ड पाठ</b> |
| द्विदिशीय अलगाव | <bdi> | द्विदिशीय अलगाव | <bdi>उपयोगकर्ता इनपुट पाठ</bdi> |
| द्विदिशीय ओवरराइड | <bdo> | द्विदिशीय ओवरराइड | <bdo dir="rtl">दाएं से बाएं पाठ</bdo> |
| रूबी | <ruby> | रूबी एनोटेशन | <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby> |
| रूबी पाठ | <rt> | रूबी पाठ | <rt>उच्चारण</rt> |
| रूबी कोष्ठक | <rp> | रूबी कोष्ठक | <rp>(</rp> |
| शब्द ब्रेक अवसर | <wbr> | शब्द ब्रेक अवसर | बहुत<wbr>लंबा<wbr>शब्द |
| डेटा | <data> | मशीन-पठनीय डेटा | <data value="123">उत्पाद #123</data> |
| क्रमरहित सूची | <ul> | क्रमरहित सूची | <ul><li>आइटम 1</li><li>आइटम 2</li></ul> |
| क्रमित सूची | <ol> | क्रमित सूची | <ol><li>पहला आइटम</li><li>दूसरा आइटम</li></ol> |
| सूची आइटम | <li> | सूची आइटम | <li>सूची आइटम सामग्री</li> |
| विवरण सूची | <dl> | विवरण सूची | <dl><dt>शब्द</dt><dd>परिभाषा</dd></dl> |
| विवरण शब्द | <dt> | विवरण शब्द | <dt>HTML</dt> |
| विवरण परिभाषा | <dd> | विवरण परिभाषा | <dd>मार्कअप भाषा</dd> |
| मेन्यू | <menu> | कमांड मेन्यू | <menu><li><button>क्रिया</button></li></menu> |
| तालिका | <table> | तालिका कंटेनर | <table><tr><td>सेल</td></tr></table> |
| तालिका कैप्शन | <caption> | तालिका कैप्शन | <caption>बिक्री डेटा तालिका</caption> |
| स्तंभ समूह | <colgroup> | स्तंभ समूह | <colgroup><col span="2"></colgroup> |
| स्तंभ | <col> | तालिका स्तंभ | <col style="width: 50%"> |
| तालिका हेडर | <thead> | तालिका हेडर समूह | <thead><tr><th>नाम</th></tr></thead> |
| तालिका मुख्य भाग | <tbody> | तालिका मुख्य भाग समूह | <tbody><tr><td>डेटा</td></tr></tbody> |
| तालिका फुटर | <tfoot> | तालिका फुटर समूह | <tfoot><tr><td>कुल</td></tr></tfoot> |
| तालिका पंक्ति | <tr> | तालिका पंक्ति | <tr><td>सेल डेटा</td></tr> |
| हेडर सेल | <th> | तालिका हेडर सेल | <th scope="col">स्तंभ हेडर</th> |
| डेटा सेल | <td> | तालिका डेटा सेल | <td>सेल सामग्री</td> |
| फॉर्म | <form> | फॉर्म कंटेनर | <form action="submit.php" method="post"> |
| फ़ील्डसेट | <fieldset> | फॉर्म फ़ील्ड समूहीकरण | <fieldset><legend>व्यक्तिगत जानकारी</legend></fieldset> |
| लेजेंड | <legend> | फ़ील्डसेट कैप्शन | <legend>संपर्क विवरण</legend> |
| लेबल | <label> | फॉर्म कंट्रोल लेबल | <label for="name">नाम:</label> |
| इनपुट | <input> | फॉर्म इनपुट कंट्रोल | <input type="text" id="name" name="name"> |
| बटन | <button> | क्लिक करने योग्य बटन | <button type="submit">भेजें</button> |
| चयन | <select> | ड्रॉपडाउन चयन | <select><option value="1">विकल्प 1</option></select> |
| डेटा सूची | <datalist> | इनपुट विकल्प सूची | <datalist id="browsers"><option value="Chrome"></datalist> |
| विकल्प समूह | <optgroup> | विकल्प समूह | <optgroup label="फल"><option>सेब</option></optgroup> |
| विकल्प | <option> | चयन विकल्प | <option value="in">भारत</option> |
| टेक्स्ट एरिया | <textarea> | बहुपंक्ति टेक्स्ट इनपुट | <textarea rows="4" cols="50"></textarea> |
| आउटपुट | <output> | गणना परिणाम | <output name="result" for="a b">परिणाम</output> |
| प्रगति | <progress> | प्रगति संकेतक | <progress value="70" max="100">70%</progress> |
| मीटर | <meter> | स्केलर माप | <meter value="6" min="0" max="10">10 में से 6</meter> |
| विवरण | <details> | खुलासा विजेट | <details><summary>विस्तार के लिए क्लिक करें</summary>विवरण</details> |
| सारांश | <summary> | विवरण सारांश | <summary>सारांश शीर्षक</summary> |
| संवाद | <dialog> | संवाद बॉक्स | <dialog open><p>संवाद सामग्री</p></dialog> |
| लिंक | <a> | हाइपरलिंक एंकर | <a href="https://example.com">लिंक टेक्स्ट</a> |
| छवि | <img> | छवि तत्व | <img src="image.jpg" alt="विवरण"> |
| चित्र | <picture> | रेस्पॉन्सिव छवि कंटेनर | <picture><source media="(min-width: 800px)" srcset="large.jpg"><img src="default.jpg"></picture> |
| आकृति | <figure> | कैप्शन के साथ आकृति | <figure><img src="chart.jpg"><figcaption>चार्ट विवरण</figcaption></figure> |
| आकृति कैप्शन | <figcaption> | आकृति कैप्शन | <figcaption>छवि कैप्शन टेक्स्ट</figcaption> |
| छवि मानचित्र | <map> | छवि मानचित्र | <map name="planetmap"><area shape="rect" coords="0,0,82,126" href="sun.htm"></map> |
| छवि क्षेत्र | <area> | छवि मानचित्र क्षेत्र | <area shape="circle" coords="90,58,3" href="mercury.htm"> |
| ऑडियो | <audio> | ऑडियो सामग्री | <audio controls><source src="audio.mp3" type="audio/mpeg"></audio> |
| वीडियो | <video> | वीडियो सामग्री | <video controls><source src="video.mp4" type="video/mp4"></video> |
| स्रोत | <source> | मीडिया संसाधन | <source src="video.webm" type="video/webm"> |
| ट्रैक | <track> | समयबद्ध टेक्स्ट ट्रैक | <track kind="subtitles" src="subtitles.vtt" srclang="hi"> |
| एम्बेड | <embed> | बाहरी सामग्री | <embed src="file.pdf" type="application/pdf"> |
| इनलाइन फ्रेम | <iframe> | इनलाइन फ्रेम | <iframe src="page.html" width="300" height="200"></iframe> |
| ऑब्जेक्ट | <object> | बाहरी ऑब्जेक्ट | <object data="movie.swf" type="application/x-shockwave-flash"></object> |
| पैरामीटर | <param> | ऑब्जेक्ट पैरामीटर | <param name="autoplay" value="true"> |
| स्क्रिप्ट | <script> | स्क्रिप्ट कोड | <script>console.log('नमस्ते');</script> |
| नो स्क्रिप्ट | <noscript> | नो-स्क्रिप्ट फॉलबैक | <noscript>JavaScript आवश्यक है</noscript> |
| कैनवास | <canvas> | ग्राफिक्स कैनवास | <canvas id="myCanvas" width="200" height="100"></canvas> |
| टेम्प्लेट | <template> | सामग्री टेम्प्लेट | <template><p>टेम्प्लेट सामग्री</p></template> |
| स्लॉट | <slot> | सामग्री स्लॉट | <slot name="content">डिफ़ॉल्ट सामग्री</slot> |
| कस्टम तत्व | <custom-element> | कस्टम तत्व | <my-button>कस्टम घटक</my-button> |
| SVG | <svg> | स्केलेबल वेक्टर ग्राफिक्स | <svg><circle cx="50" cy="50" r="40" fill="red"></svg> |
HTML टैग संदर्भ की पूर्ण महारत आधुनिक वेब डेवलपमेंट के लिए अपरिहार्य आधार स्थापित करती है। मुख्य निष्कर्षों में यह समझना शामिल है कि 150+ HTML टैग्स प्रत्येक विशिष्ट अर्थपूर्ण उद्देश्यों की सेवा करते हैं, दृश्य रूप के बजाय सामग्री अर्थ के आधार पर उपयुक्त तत्वों का चयन, और यह पहचान कि सही अर्थपूर्ण मार्कअप पहुंच, SEO प्रदर्शन और कोड रखरखाव में सुधार करता है। यह व्यापक शब्दावली बुनियादी दस्तावेज़ संरचना तत्वों से लेकर विशेषीकृत इंटरैक्टिव घटकों, मल्टीमीडिया कंटेनर और उन्नत फॉर्म नियंत्रणों तक फैली है। यह ज्ञान सीधे CSS स्टाइलिंग क्षमताओं से जुड़ता है, जहाँ अर्थपूर्ण HTML तत्व चयनकर्ताओं, स्यूडो-क्लासेस और विशेषता चयनकर्ताओं के माध्यम से परिष्कृत स्टाइलिंग के लिए अर्थपूर्ण हुक प्रदान करता है। JavaScript इंटरैक्शन अर्थपूर्ण रूप से उपयुक्त तत्वों के साथ काम करते समय अधिक शक्तिशाली और रखरखाव योग्य हो जाते हैं जो स्पष्ट प्रोग्रामेटिक इंटरफेस प्रदान करते हैं। Grid और Flexbox जैसी उन्नत CSS तकनीकें उपयुक्त HTML संरचना के साथ बेहतर काम करती हैं, जबकि React और Vue.js जैसे आधुनिक फ्रेमवर्क उन डेवलपर्स से लाभान्वित होते हैं जो अंतर्निहित HTML अर्थशास्त्र को समझते हैं। अनुशंसित अगले चरणों में CSS चयनकर्ताओं और कैस्केड में गहराई से जाना, बेहतर पहुंच के लिए ARIA विशेषताओं की खोज, Progressive Web App मार्कअप पैटर्न का अध्ययन, और कस्टम तत्व बनाने के लिए Web Components की जांच शामिल है। व्यावहारिक सीखने की सलाह विविध टैग प्रकारों का उपयोग करके परियोजनाओं के निर्माण, विनिर्देश अपडेट के लिए MDN दस्तावेज़ीकरण का नियमित परामर्श, और पहुंच उपकरणों के साथ मार्कअप परीक्षण पर जोर देती है।
🧠 अपने ज्ञान की परीक्षा करें
अपना ज्ञान परखें
व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी