HTML एट्रीब्यूट्स का उपयोग कैसे करें

कुछ सबसे अधिक उपयोग किए जाने वाले विशेषता नामों और मानों को देखकर, HTML विशेषताओं का उपयोग करना सीखें।

HTML विशेषताएँ क्या हैं?

HTML में, विशेषताएँ संशोधक उपकरण हैं जिनका उपयोग HTML तत्वों में अतिरिक्त जानकारी जोड़ने या उनके डिफ़ॉल्ट (बॉक्स से बाहर) व्यवहार को बदलने के लिए किया जाता है।

बिना किसी अतिरिक्त विशेषता वाला HTML तत्व इस तरह दिखता है:

<tag>Content</tag>

HTML तत्व विशेषताओं के साथ इस तरह परिभाषित हैं:

<tag attribute="value">Content</tag>

उस मॉडल को ध्यान में रखते हुए, आइए कुछ व्यावहारिक विशेषता उदाहरण देखें।

The href विशेषता

href विशेषता HTML में सबसे महत्वपूर्ण विशेषताओं में से एक है।

href निम्न के लिए URL निर्दिष्ट करने के लिए उपयोग किया जाता है:

• हाइपरलिंक्स (जिन्हें केवल "लिंक" भी कहा जाता है)।
• या स्टाइल और स्क्रिप्ट जैसे बाहरी संसाधनों को आयात करने के लिए।

href . के लिए सबसे आम उपयोग मामला एंकर एलिमेंट पर लिंक यूआरएल जोड़ना है <a> :

<a href="url-path">Link text</a>

ये लिंक उपयोगकर्ताओं को आंतरिक रूप से . एक पृष्ठ से दूसरे पृष्ठ पर क्लिक करने की अनुमति देते हैं (उसी वेबसाइट/डोमेन पर), या बाहरी रूप से (अन्य वेबसाइट डोमेन के लिए)।

आंतरिक लिंक

आंतरिक लिंक एक सापेक्ष पथ का उपयोग करते हैं:

<a href="/">Home</a>

एक मानक के रूप में, "/" किसी भी वेबसाइट के पहले पृष्ठ पर ले जाता है, जो कि index.html है पेज.

अगर आपके पास इसके बारे में . नाम का पेज है और एक संबंधित HTML दस्तावेज़ जिसे about.html . कहा जाता है , आप इसे आंतरिक रूप से इस तरह से लिंक कर सकते हैं:

<a href="/about">About</a>

यह लिंक TechStacker के अबाउट पेज पर ले जाता है

बाहरी लिंक

बाहरी लिंक को एक संपूर्ण पथ की आवश्यकता होती है:

<a href="https://www.youtube.com">Go to YouTube.com</a>

लक्ष्य विशेषता

जब हम एंकर तत्व के साथ काम कर रहे हैं, तो आइए एक और महत्वपूर्ण एंकर तत्व विशेषता पर एक नज़र डालें, target विशेषता।

target विशेषता निर्दिष्ट करती है कहां जब उपयोगकर्ता उन पर क्लिक करते हैं तो लिंक खोलने के लिए।

उदाहरण के लिए, यदि आप नीचे दिए गए बाहरी लिंक पर क्लिक करते हैं तो आपको उसी में YouTube.com पर ले जाया जाएगा ब्राउज़र टैब विंडो जिसमें आप अभी हैं:

<a href="https://www.youtube.com/">Go to YouTube.com</a>

YouTube.com पर जाएं

ऐसा इसलिए होता है क्योंकि डिफ़ॉल्ट रूप से <a> तत्वों का एक target होता है _self . के मान वाली विशेषता — जिसका अर्थ है कि यह href . खोलता है लिंक मान उसी विंडो में है जिसमें उपयोगकर्ता है।

तो यह लिंक तत्व:

<a href="https://www.youtube.com/"></a>

कंप्यूटर/ब्राउज़र द्वारा इस तरह पढ़ा जाता है:

<a href="https://www.youtube.com/" target="_self"></a>

लेकिन क्या होगा यदि आप लिंक को एक नए ब्राउज़र टैब में खोलना चाहते हैं?

कोई बात नहीं, आप डिफ़ॉल्ट _self को ओवरराइड कर सकते हैं _blank . के साथ मान मूल्य:

<a href="https://www.youtube.com" target="_blank" rel="noopener"
  >Go to YouTube.com (opens in a new tab)</a
>

अब YouTube लिंक एक नए ब्राउज़र टैब में खुलेगा:

YouTube.com पर जाएं (नया टैब)

मैं इस अवसर का उपयोग अपने YouTube चैनल का प्रचार करने के लिए करूंगा:

मेरे YouTube चैनल (TechStacker) से लिंक करें।

एंकर/लिंक तत्व के बारे में और पढ़ें।

बिना मान वाली विशेषताएं

एक विशेषता आमतौर पर इसमें एक विशेषता नाम और एक विशेषता मान होता है, जैसे कि एंकर तत्व उदाहरण में।

हालांकि, कभी-कभी मान (व्यवहार) विशेषता नाम में अंतर्निहित है।

उदाहरण के लिए, defer HTML को संशोधित करने के लिए विशेषता <script> तत्व:

<script defer src="app.js"></script>

ध्यान दें कि defer विशेषता में असाइनमेंट ऑपरेटर नहीं है (= ) या मूल्य क्योंकि इसका व्यवहार अंतर्निहित है।

defer एक तथाकथित बूलियन . है गुण। बूलियन का उपयोग एक प्रकार के डेटा के लिए किया जाता है जिसमें केवल दो मान हो सकते हैं, सत्य या झूठा (या सक्षम/अक्षम करें )।

आइए defer . पर करीब से नज़र डालें विशेषता।

यह <script> तत्व, बिना defer विशेषता, अपने src execute को निष्पादित करेगी app.js . से JavaScript कोड मान जैसे ही ब्राउज़र ने इसे लोड किया है:

<script src="app.js"></script>

डिफ़ॉल्ट रूप से, HTML दस्तावेज़ों को ऊपर से नीचे तक एक बार में एक पंक्ति में पार्स (पढ़ा) जाता है। इसका अर्थ यह है कि यदि आप अपने दस्तावेज़ के शीर्ष पर कोई JavaScript डालते हैं, तो वह पहले . निष्पादित होगा आपके शेष दस्तावेज़ को पार्स किया जा चुका है।

वह डिफ़ॉल्ट है स्क्रिप्ट तत्व का व्यवहार।

लेकिन जब आप defer add जोड़ते हैं <script> . पर तत्व आप उस डिफ़ॉल्ट व्यवहार को अक्षम करते हैं:

<script defer src="app.js"></script>

अब, JavaScript कोड तब तक निष्पादित नहीं होगा जब तक कि संपूर्ण पृष्ठ लोड होना समाप्त नहीं हो जाता।

एक शाब्दिक अर्थ में, स्थगित करें मतलब स्थगित/स्थगित/प्रतीक्षा करें।

मरे हुए घोड़े को पीटने के लिए:

• बिना defer , जावास्क्रिप्ट लोड होते ही निष्पादित हो जाता है।
• साथ defer संपूर्ण HTML पृष्ठ लोड होने तक JavaScript निष्पादित होने की प्रतीक्षा करता है।

यदि विशेषताएँ आपको भ्रमित करती हैं, तो चिंता न करें, अभ्यास में उनका उपयोग शुरू करने के बाद यह हमेशा 10 गुना अधिक समझ में आता है।

कस्टम विशेषताएँ

आप कस्टम विशेषताएँ भी बना सकते हैं, जिन्हें आप जावास्क्रिप्ट से नियंत्रित कर सकते हैं। कस्टम विशेषता नामों के पहले data- . होना चाहिए लेबल:

<tag data-custom-attribute-name="value">Content</tag>

उदाहरण के लिए, मान लें कि हमारे पास “Apple” . नामक एक खाद्य तत्व है . जब कोई उपयोगकर्ता उस पर क्लिक करता है, तो हम प्रदर्शित करना चाहते हैं कि टाइप . क्या है भोजन का यह एक पॉपअप संवाद बॉक्स में है।

ऐसा करने के लिए हम food-type . नामक एक कस्टम एट्रिब्यूट बनाएंगे (data- याद रखें लेबल) और इसे <div> . में जोड़ें Apple . के साथ तत्व अंदर पाठ:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

और जावास्क्रिप्ट जो सुविधा को काम करती है:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

ये रहा एक डेमो।

HTML कोड कैसे कार्य करता है:

• सबसे पहले, हमने एक onclick जोड़ा है <div> . की विशेषता तत्व। यह एक इवेंट एट्रिब्यूट है जो एक इवेंट श्रोता को जोड़ता है जो इसे सुनता है... आपने अनुमान लगाया, क्लिक!
• फिर हम showDetailsBox(this) . का एट्रिब्यूट मान असाइन करते हैं onclick . पर विशेषता।
• showDetailsBox() जावास्क्रिप्ट फ़ंक्शन का नाम है जो जैसे ही आप Apple टेक्स्ट एलिमेंट पर क्लिक करते हैं, कॉल हो जाता है।
• द this (this) . का हिस्सा एक तर्क है जो उस वस्तु को संदर्भित करता है जिससे वह संबंधित है (यह शुरुआती लोगों के लिए थोड़ा उन्नत है, अगर इसे न समझें तो कोई बात नहीं)।
• id एक अंतर्निहित HTML विशेषता है जिसका उपयोग HTML तत्वों के लिए एक अद्वितीय आईडी निर्दिष्ट करने के लिए किया जाता है। इस मामले में, हमारी विशिष्ट आईडी है apple ।

कैसे जावास्क्रिप्ट कोड कार्य इस HTML ट्यूटोरियल के दायरे से बाहर है, इसलिए मैं आपको एक सरल व्याख्या दूंगा:

जब showDetailsBox() फ़ंक्शन को onclick . द्वारा कॉल किया जाता है घटना विशेषता, यह अपने कोड ब्लॉक को निष्पादित करता है { ... } सामग्री:

function showDetailsBox(food) {
  ...
}

कोड ब्लॉक के अंदर पहली पंक्ति पर, जावास्क्रिप्ट कस्टम data-food-type के साथ किसी भी HTML तत्व का चयन करता है विशेषता, और इसे (और इसके विशेषता मान) को foodType . नामक एक चर के लिए निर्दिष्ट करता है :

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

दूसरी लाइन पर हम बिल्ट-इन alert() run चलाते हैं विधि (जो पॉपअप संवाद बॉक्स को संकेत देती है और उसे foodType . का मान प्रदर्शित करने के लिए कहती है जो निश्चित रूप से है, fruit :

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

यदि आप ऊपर दिए गए पूरे कोड उदाहरण को पूरी तरह से नहीं समझते हैं, तो चिंता न करें, पचाने के लिए बहुत कुछ है, खासकर शुरुआत के लिए। अभ्यास से, यह समझ में आएगा!

HTML विशेषताओं के बारे में अधिक विस्तृत जानकारी के लिए, मैं MDN वेब डॉक्स HTML विशेषता संदर्भ के माध्यम से खुदाई करने की सलाह देता हूं।

महत्वपूर्ण: महत्वपूर्ण सामग्री को संग्रहीत न करें जो डेटा विशेषताओं के अंदर दृश्यमान और पहुंच योग्य होनी चाहिए, क्योंकि सहायक प्रौद्योगिकियां कभी-कभी उन तक नहीं पहुंचती हैं। खोज क्रॉलर हो सकता है इंडेक्स डेटा विशेषता मान भी नहीं - इसलिए यहां कोई महत्वपूर्ण एसईओ सामग्री न डालें।