HTML एक सरल भाषा है, लेकिन इसकी शब्दावली आपकी कल्पना से कहीं अधिक बड़ी है। आपके द्वारा उपयोग किए जा सकने वाले कुछ अधिक असामान्य टैगों के बारे में सब कुछ जानें।

चाबी छीनना

  • विस्तार योग्य अनुभाग बनाने, उपयोगकर्ता के अनुकूल अनुभव प्रदान करने और एक साफ़ डिज़ाइन बनाए रखने के लिए टैग का उपयोग करें।
  • टैग के साथ महत्वपूर्ण सामग्री को हाइलाइट करें, अपने वेबपेज पर कीवर्ड, वाक्यांशों या खोज परिणामों पर ध्यान आकर्षित करें।
  • टैग का उपयोग करके दिनांक और समय में अर्थपूर्ण अर्थ जोड़ें, जिससे स्क्रीन रीडर का उपयोग करने वाले विकलांग उपयोगकर्ताओं के लिए पहुंच में सुधार हो सके।

एक वेब डेवलपर के रूप में, आपको सामान्य HTML टैग्स से अच्छी तरह वाकिफ होना चाहिए, , और जो आपके वेब पेजों की संरचना और सामग्री का प्रतिनिधित्व करता है। हालाँकि, HTML भाषा और भी बहुत कुछ प्रदान करती है!

इन अद्वितीय टैगों की खोज करके, आप अपने वेब ऐप्स की कार्यक्षमता बढ़ा सकते हैं, जिससे वे भीड़ से अलग दिखेंगे।

1.
और

कल्पना कीजिए कि आपके पास व्यापक जानकारी या सामग्री है जिसे आप किसी पाठक पर तुरंत थोपना नहीं चाहते। और टैग बचाव के लिए आते हैं!

instagram viewer

ये टैग एक शीर्षक या सारांश के साथ एक विस्तार योग्य अनुभाग बनाने के लिए मिलकर काम करते हैं जिसे आपकी वेबसाइट के उपयोगकर्ता प्रकट करने के लिए क्लिक कर सकते हैं। डिफ़ॉल्ट रूप से, विवरण तत्व के भीतर की सामग्री प्रदर्शित नहीं होगी, जिससे आपका पृष्ठ साफ-सुथरा और व्यवस्थित रहेगा।

आपके आगंतुक छुपी हुई जानकारी तक पहुंचने के लिए आसानी से सारांश पर क्लिक कर सकते हैं।

<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

इन टैग के साथ, आप टेक्स्ट, कोड या अन्य जानकारी के बड़े हिस्से को छिपा सकते हैं, एक साफ डिज़ाइन बनाए रखते हुए उपयोगकर्ता के अनुकूल अनुभव प्रदान कर सकते हैं। वे आपको निखारने में भी मदद कर सकते हैं एक इंटरफ़ेस डिजाइनर के रूप में कौशल.

2.

टैग आपको अपनी सामग्री के विशिष्ट भागों को हाइलाइट करने देता है, जिससे वे स्पष्ट रूप से अलग दिखते हैं। जब आप उपयोग करते हैं तत्व, ब्राउज़र आम तौर पर अंदर के पाठ पर एक पीला पृष्ठभूमि रंग लागू करते हैं, जिससे पाठक का ध्यान उस ओर आकर्षित होता है।

यह सुविधा विशेष रूप से तब उपयोगी होती है जब आप अपने वेबपेज पर कीवर्ड, महत्वपूर्ण वाक्यांशों या खोज परिणामों पर ज़ोर देना चाहते हैं।

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

उदाहरण के लिए, यदि आपकी वेबसाइट में खोज कार्यक्षमता है, तो आप इसका उपयोग कर सकते हैं परिणामों में खोज क्वेरी मिलान को हाइलाइट करने के लिए टैग, जिससे उपयोगकर्ताओं के लिए प्रासंगिक जानकारी ढूंढना आसान हो जाता है।

3.

क्या आपने कभी ऐसी स्थितियों का सामना किया है जहां सामग्री पुरानी हो गई है या प्रासंगिक नहीं रह गई है, लेकिन फिर भी आप इसे ऐतिहासिक उद्देश्यों के लिए प्रदर्शित करना चाहते हैं या समय के साथ परिवर्तनों को इंगित करना चाहते हैं?

उसे दर्ज करें टैग! इसका अर्थ है स्ट्राइकथ्रू और तत्व के भीतर किसी भी सामग्री को मध्य से एक रेखा के साथ प्रस्तुत करता है।

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

इस उदाहरण में, स्टॉक ख़त्म टेक्स्ट एक पंक्ति के साथ प्रदर्शित होगा, जो दर्शाता है कि उत्पाद की स्टॉक स्थिति बदल गई है।

4.

जब आप अपनी सामग्री में दिनांकों और समयों में अर्थपूर्ण अर्थ जोड़ना चाहते हैं, तो टैग काम आता है.

का उपयोग दिनांक समय विशेषता, आप दिनांक या समय का एक मशीन-पठनीय संस्करण निर्दिष्ट कर सकते हैं, जो ब्राउज़र, खोज इंजन और स्क्रीन पाठकों को संदर्भ समझने में मदद करता है।

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

का उपयोग करके टैग, आप अपनी सामग्री को अधिक संरचना देते हैं और इसे उपयोगकर्ताओं की एक विस्तृत श्रृंखला के लिए सुलभ बनाते हैं, जिनमें विकलांग लोग भी शामिल हैं जो स्क्रीन रीडर का उपयोग करते हैं।

5.

आपके वेबपेज पर कई भाषाओं में टेक्स्ट को प्रबंधित करना कभी-कभी चुनौतीपूर्ण हो सकता है, खासकर जब प्रत्येक भाग को अलग-अलग फ़ॉर्मेटिंग की आवश्यकता होती है।

टैग टेक्स्ट के एक हिस्से को अलग करके बचाव में आता है जिसे ब्राउज़र को अलग-अलग भाषा आवश्यकताओं के कारण अलग-अलग तरीके से व्यवहार करना चाहिए।

<p>
<bdi>5,000bdi> people attended the conference.
p>

इस उदाहरण में, तत्व संख्या को लपेटता है 5,000. यह सुनिश्चित करता है कि, यदि आसपास का पाठ किसी भिन्न भाषा में है या भिन्न स्वरूपण की आवश्यकता है, तो यह संख्या में हस्तक्षेप नहीं करेगा।

6. , ,

पूर्वी एशियाई टाइपोग्राफी के लिए, जहां उच्चारण गाइड, फ़ुरिगाना, या अन्य एनोटेशन आमतौर पर वर्णों के ऊपर या नीचे उपयोग किए जाते हैं,, , और टैग चलन में आते हैं.

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

इस उदाहरण में, तत्व में चरित्र शामिल है 漢 (कांजी), और तत्व में उच्चारण शामिल है かん (कान). तत्व उन ब्राउज़रों के लिए फ़ॉलबैक कोष्ठक प्रदान करते हैं जो रूबी एनोटेशन का समर्थन नहीं करते हैं।

7.

जब आपके पास लंबे शब्द हों जो आपके लेआउट को बिगाड़ सकते हैं, तो टैग मदद के लिए यहां है। यह एक लंबे शब्द में लाइन ब्रेक (शब्द ब्रेक अवसर) का अवसर सुझाता है, जहां ब्राउज़र टेक्स्ट को लपेटने का विकल्प चुन सकता है।

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

उपरोक्त उदाहरण में, लंबे URL में a शामिल है तत्व जो ब्राउज़र को आस-पास की सामग्री के लेआउट को संरक्षित करते हुए, यदि आवश्यक हो तो इसे दो पंक्तियों में तोड़ने देता है।

8. और

वैज्ञानिक या गणितीय नोटेशन, रासायनिक सूत्र या फ़ुटनोट के लिए, आप इसका उपयोग कर सकते हैं और क्रमशः सबस्क्रिप्ट और सुपरस्क्रिप्ट टेक्स्ट के लिए टैग।

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

यह उदाहरण उपयोग करता है प्रदर्शित करने के लिए टैग करें 2 में H2O एक सबस्क्रिप्ट के रूप में, जबकि टैग पाइथागोरस प्रमेय में घातांक प्रदर्शित करते हैं।

9.

किसी ज्ञात सीमा के भीतर अदिश माप प्रस्तुत करने की आवश्यकता है, जैसे डिस्क उपयोग, रेटिंग, या परीक्षा स्कोर? टैग ने आपको कवर कर लिया है।

का उपयोग कीमत, मिन, और अधिकतम विशेषताएँ, आप क्रमशः वर्तमान मूल्य, न्यूनतम मूल्य और माप के अधिकतम मूल्य को परिभाषित कर सकते हैं।

<metervalue="75"min="0"max="100">75%meter>

इस उदाहरण में, तत्व एक परीक्षा स्कोर का प्रतिनिधित्व करता है 75%.

10.

जब आपको जरूरत हो मोडल्स के लिए एक डायलॉग बॉक्स या विंडो ओवरले बनाएं या अच्छे व्यवहार वाले मोडल पॉप-अप इंटरैक्शन, द टैग आगे बढ़ने का रास्ता है। आप इसका उपयोग कर सकते हैं खुला डायलॉग बॉक्स को डिफ़ॉल्ट रूप से दिखाने के लिए विशेषता।

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

इस उदाहरण में, एक सरल संवाद बॉक्स जिसमें एक पैराग्राफ और एक बंद करें बटन होता है, पृष्ठ लोड होने पर दिखाई देता है, इसके लिए धन्यवाद खुला गुण। आप अधिक उन्नत इंटरैक्शन के लिए जावास्क्रिप्ट का उपयोग करके संवाद बॉक्स की सामग्री और व्यवहार को अनुकूलित कर सकते हैं।

11.

उपयोग ए के भीतर समूह से संबंधित विकल्पों को टैग करें ड्रॉपडाउन तत्व. यह आपको आसान नेविगेशन और चयन के लिए विकल्पों को व्यवस्थित और वर्गीकृत करने की अनुमति देता है।

  • टैग एक कंटेनर तत्व है जो समूह से संबंधित है ए के भीतर टैग तत्व।
  • यह ड्रॉपडाउन मेनू के भीतर विज़ुअल ग्रुपिंग या वर्गीकरण बनाकर विकल्पों को व्यवस्थित करने में मदद करता है।
  • टैग के लिए एक लेबल विशेषता की आवश्यकता होती है, जो विकल्प समूह का नाम या शीर्षक निर्दिष्ट करती है।
  • इसमें एक या अधिक हो सकते हैं टैग इसके चाइल्ड तत्वों के रूप में, समूह के भीतर व्यक्तिगत विकल्पों का प्रतिनिधित्व करते हैं।

उदाहरण के लिए:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

यह उदाहरण चयन ड्रॉपडाउन को दो खंडों में समूहित करता है: एशिया, और यूरोप. प्रत्येक समूह में उस क्षेत्र के विभिन्न देशों का प्रतिनिधित्व करने वाले टैग होते हैं।

वेब विकास में अपनी दक्षता बढ़ाएँ

इन कम-ज्ञात HTML टैग्स को सीखने से आपके वेब विकास कौशल में काफी सुधार हो सकता है। उनकी पहचान की कमी के बावजूद, वे विशिष्ट संदर्भों के लिए मूल्यवान सुविधाएँ प्रदान करते हैं।

इन टैगों को अपने कौशल सेट में जोड़ने से अन्तरक्रियाशीलता, पहुंच में वृद्धि होती है और वेब विकास प्रक्रिया सुव्यवस्थित होती है। याद रखें, भले ही वे अपरिचित हों, एक वेब डेवलपर के रूप में आपकी यात्रा पर उनका महत्वपूर्ण प्रभाव पड़ता है।