HTML में जोर टैग का उपयोग कैसे और कब करें

click fraud protection

उन टैगों में से एक जो आप अपने में जल्दी सीखेंगे वेब डिजाइन शिक्षा टैग की एक जोड़ी है जिसे "जोर टैग" के रूप में जाना जाता है। आइए एक नज़र डालते हैं कि ये टैग क्या हैं और आज वेब डिज़ाइन में इनका उपयोग कैसे किया जाता है।

एक्सएचटीएमएल पर वापस जाएं

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

instagram viewer
तिर्छा टैग को आम तौर पर मजबूत (बोल्ड के लिए) और जोर (इटैलिक के लिए) से बदल दिया गया है।

तथा

मजबूत और जोर देने वाले तत्व आपके पाठ में जानकारी जोड़ते हैं, उस सामग्री का विवरण देते हैं जिसे अलग तरह से व्यवहार किया जाना चाहिए और उस सामग्री के बोले जाने पर जोर दिया जाना चाहिए। आप इन तत्वों का काफी हद तक उसी तरह उपयोग करते हैं जैसे आपने अतीत में बोल्ड और इटैलिक का उपयोग किया होगा। बस अपने टेक्स्ट को ओपनिंग और क्लोजिंग टैग्स से घेर लें ( तथा जोर देने के लिए और तथा जोर देने के लिए) और संलग्न पाठ पर जोर दिया जाएगा।

आप इन टैगों को नेस्ट कर सकते हैं और इससे कोई फ़र्क नहीं पड़ता कि कौन सा बाहरी टैग है। यहां कुछ उदाहरण दिए गए हैं।

इस पाठ पर बल दिया गया है और अधिकांश ब्राउज़र इसे इटैलिक के रूप में प्रदर्शित करेंगे। 
इस पाठ पर जोर दिया गया है और अधिकांश ब्राउज़र इसे बोल्ड प्रकार के रूप में प्रदर्शित करेंगे। 

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

मजबूत {
लाल रंग;
}

इस उदाहरण में, आपको बोल्ड फ़ॉन्ट-वेट के लिए कोई गुण जोड़ने की आवश्यकता नहीं है क्योंकि वह डिफ़ॉल्ट है। यदि आप इसे मौका पर नहीं छोड़ना चाहते हैं, तो आप इसे हमेशा इसमें जोड़ सकते हैं:

मजबूत {
फोंट की मोटाई: बोल्ड;
लाल रंग;
}

अब आप पूरी तरह से गारंटीकृत होंगे कि आपके पास कहीं भी बोल्ड (और लाल) टेक्स्ट वाला पृष्ठ होगा टैग का प्रयोग किया जाता है।

जोर पर डबल अप

एक बात जो हमने साल भर में देखी है, वह यह है कि अगर आप जोर देने की कोशिश करते हैं तो क्या होता है। उदाहरण के लिए:

इस पाठ में दोनों होना चाहिए बोल्ड और इटैलिकाइज़्ड इसके अंदर पाठ।

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

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

बोल्ड और इटैलिक पर एक नोट

एक अंतिम विचार - जबकि बोल्ड () और इटैलिक () टैग को अब जोर देने वाले तत्वों के रूप में उपयोग करने की अनुशंसा नहीं की जाती है, कुछ वेब डिज़ाइनर हैं जो इन टैग का उपयोग टेक्स्ट के इनलाइन क्षेत्रों को स्टाइल करने के लिए करते हैं। मूल रूप से, वे इसका उपयोग a like की तरह करते हैं तत्व। यह अच्छा है क्योंकि टैग बहुत छोटे हैं, लेकिन इन तत्वों का इस तरह से उपयोग करने की आमतौर पर अनुशंसा नहीं की जाती है। हम इसका उल्लेख तब करते हैं जब आप इसे कुछ साइटों पर बोल्ड या इटैलिकाइज़्ड टेक्स्ट बनाने के लिए नहीं, बल्कि किसी अन्य प्रकार की विज़ुअल स्टाइलिंग के लिए CSS हुक बनाने के लिए देखते हैं।

instagram story viewer