मेरे पास यह बॉस हुआ करता था जो प्यार करता था, प्यार करता था, प्यार करता था, प्यार करता था शब्दों पर जोर देना। WYSIWYG संपादकों का उपयोग करने से पहले यह बहुत पहले था और मुझे उस बकवास को हैंडकोड करना होगा।
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(आइए हम उन रंगों में न जाएं जिनका इस्तेमाल उन्होंने सम के लिए किया था मोर ज़ोर।)
वह सब मार्कअप लिखना कभी भी बहुत अच्छा नहीं लगा। यह प्रयास, निश्चित रूप से, जो भी हो। लेकिन क्या यह भी एक अच्छा विचार है कि ओवरलोड सामग्री को डबल - या अधिक के साथ जोड़ा जाए! - जोर?
अलग-अलग टैग अलग-अलग जोर देते हैं
शुरुआत के लिए, <strong>
और <em>
टैग विभिन्न उपयोगों के लिए डिज़ाइन किए गए हैं। हम उन्हें HTML5 में वापस ले आए, जहां:
तो, <strong>
सामग्री को इस अर्थ में अधिक महत्व देता है कि यह सुझाव देता है कि इसमें सामग्री महत्वपूर्ण या अत्यावश्यक है। चेतावनी के बारे में सोचो:
चेतावनी: निम्न सामग्री को भयानक होने के लिए फ़्लैग किया गया है।
तक पहुँचने के लिए आकर्षक हो सकता है <em>
एक ही काम करने के लिए। इटैलिकाइज़्ड टेक्स्ट सब के बाद ध्यान आकर्षित करने वाला हो सकता है। लेकिन यह वास्तव में सामग्री को पढ़ते समय अधिक जोर देने के संकेत के रूप में है। उदाहरण के लिए, अलग-अलग स्थानों पर जोर देने के साथ एक ही वाक्य के दो संस्करण यहां दिए गए हैं:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
दोनों उदाहरण जोर देते हैं, लेकिन अलग-अलग शब्दों पर। और यदि आप उन्हें ज़ोर से पढ़ेंगे तो वे अलग लगेंगे। कि बनाता है <em>
अपने लेखन में टोन व्यक्त करने का एक शानदार तरीका। यह वाक्य के अर्थ को इस प्रकार बदल देता है <strong>
नहीं करता।
दृश्य जोर बनाम सिमेंटिक जोर
सामग्री पर जोर देते समय वे दो चीजें हैं जिन्हें आपको तौलना होगा। जैसे, ऐसे बहुत से उदाहरण हैं जहाँ आपको वाक्य के अर्थ को प्रभावित किए बिना सामग्री को इटैलिक करने की आवश्यकता हो सकती है। लेकिन उन्हें अन्य टैग्स के साथ संभाला जा सकता है जो इटैलिक प्रस्तुत करते हैं:
<i>
: यह क्लासिक है! HTML5 से पहले, इसका उपयोग सभी जगहों पर इटैलिक के साथ जोर देने के लिए किया जाता था। अब, यह विशुद्ध रूप से शब्दार्थ अर्थ को बदले बिना सामग्री को नेत्रहीन रूप से इटैलिक करने के लिए उपयोग किया जाता है।<cite>
: किसी तथ्य या आंकड़े के स्रोत का संकेत देना। ("स्रोत: सीएसएस-ट्रिक्स")<address>
: संपर्क जानकारी को चिह्नित करने के लिए उपयोग किया जाता है, न केवल भौतिक पते, बल्कि ईमेल पते और फोन नंबर जैसी चीजें भी। (
)
उसके साथ भी ऐसा ही होने जा रहा है <strong>
. स्टाइलिंग टेक्स्ट के लिए इसका उपयोग करने के बजाय आप भारी दिखना चाहते हैं, क्लासिक का उपयोग करना बेहतर विचार है <b>
बोल्डफेसिंग के लिए टैग उस सामग्री को अतिरिक्त महत्व देने से बचने के लिए जिसकी आवश्यकता नहीं है। और याद रखें, ब्राउज़र की डिफ़ॉल्ट शैलियों के लिए, शीर्षक जैसे कुछ तत्व पहले से ही बोल्ड में प्रस्तुत किए गए हैं। इससे भी ज्यादा जोर देने की जरूरत नहीं है।
ज़ोर देने वाली सामग्री में इटैलिक का उपयोग करना (और इसके विपरीत)
ऐसे वैध मामले हैं जहां आपको उस पंक्ति के हिस्से को इटैलिक करने की आवश्यकता हो सकती है जिस पर पहले ही जोर दिया जा चुका है। या हो सकता है कि पहले से ही इटैलिकाइज़ किए गए कुछ टेक्स्ट पर जोर दें।
एक ब्लॉककोट एक अच्छा उदाहरण हो सकता है। मैंने कई बार देखा है कि वे शैली के लिए इटैलिकाइज़ किए गए हैं, भले ही डिफ़ॉल्ट ब्राउज़र शैलियाँ ऐसा नहीं करती हैं:
blockquote { font-style: italic;
}
क्या होगा अगर हमें उस ब्लॉककोट में फिल्म के शीर्षक का उल्लेख करने की आवश्यकता है? इसे इटैलिक किया जाना चाहिए। तनाव पर ज़ोर देने की ज़रूरत नहीं है, इसलिए a <i>
टैग करेगा। लेकिन यह तब भी अजीब है जब किसी चीज़ को इटैलिकाइज़ किया जाता है जब वह पहले से ही इस तरह से प्रस्तुत की जाती है:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
ऐसी स्थिति में जहां हम इस तरह की तिरछी सामग्री में कुछ इटैलिक कर रहे हैं, हमें ऐसा करना चाहिए इटैलिक हटा दें नेस्टेड तत्व से… <i>
इस मामले में।
blockquote i { font-style: normal;
}
कंटेनर शैली प्रश्न यदि हम उन्हें प्राप्त करते हैं तो इन सभी उदाहरणों को पकड़ने में बहुत उपयोगी होगा:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
यह छोटा स्निपेट यह देखने के लिए ब्लॉककोट का मूल्यांकन करता है कि यह है या नहीं font-style
इसके लिए सेट है italic
. यदि यह है, तो यह सुनिश्चित करेगा <em>
, <i>
, <cite>
, तथा <address>
तत्वों को सामान्य पाठ के रूप में प्रस्तुत किया जाता है, जबकि एक अर्थ होने पर सिमेंटिक अर्थ बनाए रखा जाता है।
लेकिन वापस जोर के भीतर जोर देने के लिए
मैं घोंसला नहीं बनाऊंगा <strong>
अंदर <em>
इस तरह:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…या घोंसला <em>
अंदर <strong>
बजाय:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
प्रतिपादन ठीक है! और इससे कोई फर्क नहीं पड़ता कि वे किस क्रम में हैं... कम से कम आधुनिक ब्राउज़रों में। जेनिफर किर्निन ने इसका उल्लेख किया है कुछ ब्राउज़र केवल टेक्स्ट के निकटतम टैग को प्रस्तुत करते हैं, लेकिन मुझे अपने सीमित परीक्षणों में कहीं भी इसका सामना नहीं करना पड़ा। लेकिन देखने के लिए कुछ!
इसका कारण यह है कि मैं एक प्रकार के जोर को दूसरे रूप में नहीं रखूंगा क्योंकि इसकी आवश्यकता नहीं है। ऐसा कोई व्याकरण नियम नहीं है जो इसकी मांग करता हो। विस्मयादिबोधक बिंदुओं की तरह, एक प्रकार का जोर पर्याप्त है, और आपको उस एक का उपयोग करना चाहिए जो आप के बाद से मेल खाता हो, चाहे वह दृश्य, वजन, या घोषित जोर हो।
और भले ही कुछ स्क्रीन रीडर महत्वपूर्ण सामग्री की घोषणा करने में सक्षम हों, वे मार्कअप को किसी अतिरिक्त महत्व या महत्व के साथ नहीं पढ़ेंगे. इसलिए, जहाँ तक मैं बता सकता हूँ, कोई अतिरिक्त पहुँच नहीं है।
लेकिन मैं वास्तव में सभी जोर चाहता हूँ!
यदि आप उस स्थिति में हैं जहाँ आपका बॉस मेरे जैसा है और चाहता है सब la जोर, मैं जोर के प्रकार के लिए सही HTML टैग के लिए पहुंचूंगा, फिर बाकी शैलियों को उन टैग्स के मिश्रण के साथ लागू करूंगा जो CSS के साथ शब्दार्थ को प्रभावित नहीं करते हैं ताकि किसी भी ब्राउज़र शैलियों को संभालने में मदद न मिले।
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
मैं इसके साथ भी कर सकता हूं <strong>
रक्षात्मक उपाय के रूप में भी टैग करें:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
जब तक हम रक्षा खेल रहे हैं, हम उन त्रुटियों की पहचान कर सकते हैं जहां लाल या कुछ में हाइलाइट करके एम्फेज के भीतर एम्फेज निहित हैं:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
तो मैं शायद पिछले खंड से उस स्निपेट का उपयोग करता हूं जो किसी तत्व से डिफ़ॉल्ट इटैलिक स्टाइल को हटा देता है जब इसे किसी अन्य इटालिकिज्ड तत्व में घोंसला दिया जाता है।
और कुछ?
मैय्यबे:
- एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
- प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
- स्रोत: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- एक्सेसिबिलिटी
- लेखा
- अतिरिक्त
- पता
- पतों
- को प्रभावित
- प्रभावित करने वाले
- बाद
- सब
- अकेला
- पहले ही
- अमेरिका
- और
- की घोषणा
- की घोषणा
- अन्य
- कहीं भी
- लागू करें
- अवतार
- वापस
- पृष्ठभूमि
- क्योंकि
- से पहले
- जा रहा है
- बेहतर
- बिट
- पिन
- सीमा
- मालिक
- मुक्केबाज़ी
- बॉक्स ऑफिस
- ब्राउज़र
- ब्राउज़रों
- बजट
- कॉल
- सक्षम
- मामला
- मामलों
- परिवर्तन
- बदलना
- क्लासिक
- रंग
- संपर्क करें
- शामिल हैं
- सामग्री
- सीएसएस
- चूक
- रक्षा
- बचाव
- बनाया गया
- विभिन्न
- नहीं करता है
- dont
- डबल
- प्रयास
- भी
- तत्व
- ईमेल
- जोर
- ज़ोर देना
- पर बल दिया
- विशाल
- पर्याप्त
- संपूर्ण
- त्रुटियाँ
- और भी
- उदाहरण
- उदाहरण
- व्यक्त
- अतिरिक्त
- झगड़े
- आकृति
- प्रथम
- फ्लैग किए गए
- निम्नलिखित
- प्रपत्र
- से
- मिल
- देता है
- देते
- ग्लोबली
- Go
- जा
- अच्छा
- महान
- संभालना
- मदद
- यहाँ उत्पन्न करें
- हाइलाइट
- पर प्रकाश डाला
- एचटीएमएल
- HTTPS
- विचार
- पहचान करना
- महत्व
- महत्वपूर्ण
- in
- करें-
- अन्तर्दृष्टि
- बजाय
- IT
- जेनिफर
- पिछली बार
- सीमित
- लाइन
- थोड़ा
- स्थानों
- लंबा
- देखिए
- बनाया गया
- बनाना
- बनाता है
- निशान
- बात
- अर्थ
- माप
- उल्लेख है
- हो सकता है
- दस लाख
- आधुनिक
- गति
- अधिक
- चलचित्र
- चलचित्र
- NAB
- आवश्यकता
- घोंसला
- साधारण
- उत्तर
- नॉर्थ अमेरिका
- संख्या
- ऑफर
- Office
- ONE
- उद्घाटन
- आदेश
- अन्य
- भाग
- प्रदर्शन
- सुविधाएं
- फ़ोन
- भौतिक
- जगह
- प्लेटो
- प्लेटो डेटा इंटेलिजेंस
- प्लेटोडाटा
- खेल
- बहुत सारे
- अंक
- स्थिति
- शायद
- संरक्षित
- विशुद्ध रूप से
- पहुंच
- पढ़ना
- पाठकों
- कारण
- लाल
- याद
- प्रतिपादन
- बाकी
- बनाए रखने की
- नियम
- वही
- स्क्रीन
- स्क्रीन रीडर
- अनुभाग
- अर्थ विज्ञान
- भावना
- वाक्य
- सेट
- चाहिए
- केवल
- स्थिति
- So
- कुछ
- कुछ
- ध्वनि
- स्रोत
- फिर भी
- तनाव
- मजबूत
- अंदाज
- पता चलता है
- सुपर
- माना
- टैग
- परीक्षण
- RSI
- स्रोत
- बात
- चीज़ें
- बार
- शीर्षक
- सेवा मेरे
- स्वर
- भी
- <strong>उद्देश्य</strong>
- अति आवश्यक
- उपयोग
- चेतावनी
- घड़ी
- छुट्टी का दिन
- तौलना
- भार
- क्या
- या
- जब
- कौन
- मर्जी
- अंदर
- बिना
- शब्द
- होगा
- लिख रहे हैं
- आप
- आपका
- जेफिरनेट