क्या मुझे <span> के बजाय आइकन के लिए <i> टैग का उपयोग करना चाहिए? [बन्द है]


571

मैंने फेसबुक के स्रोत पर ध्यान दिया है, वे <i>आइकन प्रदर्शित करने के लिए टैग का उपयोग करते हैं ।

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

परंतु,

से एचटीएमएल 5 कल्पना :

I तत्व एक वैकल्पिक स्वर या मनोदशा में पाठ की अवधि का प्रतिनिधित्व करता है, या अन्यथा सामान्य गद्य से ऑफसेट होता है, जैसे कि एक टैक्सोनोमिक पदनाम, एक तकनीकी शब्द, किसी अन्य भाषा से एक मुहावरेदार वाक्यांश, एक विचार, एक जहाज का नाम, या कुछ अन्य। गद्य जिसकी विशिष्ट टाइपोग्राफिक प्रस्तुति इटैलिकाइज़्ड है।

वे <i>आइकन प्रदर्शित करने के लिए टैग का उपयोग क्यों कर रहे हैं ?

क्या यह एक बुरा अभ्यास नहीं है?

या मुझसे यहां कुछ छूट रहा है?

मैं spanआइकन प्रदर्शित करने के लिए उपयोग कर रहा हूं और यह अब तक मेरे लिए काम कर रहा है।

अपडेट करें:

बूटस्ट्रैप 3 अब spanआइकनों के लिए उपयोग करता है। आधिकारिक डॉक्टर


5
उदाहरण: ट्विटर पर ट्वीट्स के नीचे उत्तर तीर <i class="sm-reply"></i>:।
- एसई बुराई है

2
क्यों <span>इस्तेमाल नहीं किया जाना चाहिए?
जशवंत

6
मुझे लगता है कि सिमेंटिक्स और एक्सेसिबिलिटी के लिए, img टैग को हमेशा ऑल्ट टेक्स्ट के साथ, आइकन्स के लिए इस्तेमाल किया जाना चाहिए।
nroose करें

12
@nroose इस पर मेरा कहना है कि आइकन के लिए उपयोग की जाने वाली छवियां सामग्री का हिस्सा नहीं हैं, लेकिन पृष्ठ की शैली के विपरीत, (उदाहरण के लिए, गायों के बारे में विकिपीडिया पृष्ठ पर एक गाय की तस्वीर)। इसलिए उन्हें सीएसएस में परिभाषित किया जाना चाहिए, न कि आइएमजी टैग में एक छवि के रूप में।
CJStuart

6
मुझे नहीं लगता कि एचटीएमएल 5 में सिमेंटिक फैसले को "राय-आधारित" माना जाना चाहिए।
एरोन

जवाबों:


596

वे <i>आइकन प्रदर्शित करने के लिए टैग का उपयोग क्यों कर रहे हैं ?

क्योंकि यह है:

  • कम
  • मैं आइकन के लिए खड़ा हूं (हालांकि HTML में नहीं)

क्या यह एक बुरा अभ्यास नहीं है?

भयंकर अभ्यास। यह शब्दार्थ से अधिक प्रदर्शन की जीत है।


87
इसका पहला दिन ट्विटर के बूटस्ट्रैप को सीखने के लिए है और यह बुरा लगता है कि वे सर्वोत्तम प्रथाओं का पालन नहीं कर रहे हैं।
जसवंत

25
कुछ लोग आगे भी जाते हैं और अन्य तत्वों का दुरुपयोग करते हैं, जैसे <tt>= टूलटिप और इसी तरह ... मुझे ATSMOHE ​​ढूंढने में मदद करनी चाहिए? "एचटीएमएल-एलिमेंट्स के शब्दार्थ दुरुपयोग के खिलाफ"
क्रिस्टोफ

18
इन वेबसाइटों के प्रत्येक दिन लाखों पृष्ठ देखे जाते हैं। यदि वे हर बार 100 बाइट्स डेटा सहेजते हैं, तो ग्राहक इस अभ्यास के साथ पृष्ठ का अनुरोध करते हैं, तो वे महत्वपूर्ण मात्रा में बैंडविड्थ बचाते हैं।
दलमास

62
100 बाइट को बचाने के लिए उन्हें 16 आइकन शामिल करने होंगे और संपीड़न को सक्षम नहीं करना होगा ।
क्वेंटिन

7
Ligatures के उपयोग के साथ , iआइकन प्रदर्शित करने के लिए टैग का उपयोग अर्थ है। वास्तव में, Google यह बताता है कि iयह सामग्री प्रतीक गाइड में लिगमेंट्स के साथ टैग का उपयोग है ।
ऑस्ट

269

मैं यहां थोड़ी देर से कूद रहा हूं, लेकिन इस पृष्ठ पर यह तब आया जब इसे स्वयं इंगित किया गया। बेशक, मुझे नहीं पता कि फेसबुक या ट्विटर ने इसे कैसे उचित ठहराया, लेकिन यहां मेरी खुद की विचार प्रक्रिया है जो इसके लायक है।

अंत में, मैंने निष्कर्ष निकाला कि यह अभ्यास उस बेमिसाल (यह एक शब्द है?) नहीं है। वास्तव में, लघुता और "मैं आइकन के लिए है" की अच्छी संगति के अलावा, मुझे लगता है कि यह वास्तव में एक आइकन के लिए सबसे अर्थपूर्ण विकल्प है जब एक सीधा <img>टैग व्यावहारिक नहीं है।

1. उपयोग युक्ति के अनुरूप है।

हालांकि यह नहीं हो सकता है कि डब्ल्यू 3 मुख्य रूप से क्या था, यह मुझे लगता है कि <i>एक आइकन को आसानी से समायोजित करने के लिए आधिकारिक कल्पना हो सकती है। आखिरकार, उत्तर-तीर प्रतीक दूसरे तरीके से "उत्तर" कह रहा है। यह एक तकनीकी शब्द को व्यक्त करता है जो पाठक के लिए अपरिचित हो सकता है और आमतौर पर इटैलिकाइज़ किया जाएगा। ("यहां ट्विटर पर, इसे हम उत्तर तीर कहते हैं ।") और यह एक अन्य भाषा से एक शब्द है: एक प्रतीकात्मक भाषा।

यदि, तीर के प्रतीक के बजाय, ट्विटर ने ( <i>shout out</i>या <i>[Japanese character for reply]</i>एक अंग्रेजी पृष्ठ पर) उपयोग किया है, तो यह कल्पना के अनुरूप होगा। फिर क्यों नहीं <i>[reply arrow]</i>? (मैं यहां HTML शब्दार्थों पर कड़ाई से बात कर रहा हूं, सुलभता नहीं, जो मुझे मिल जाएगी।)

जहाँ तक मैं देख सकता हूँ, आइकन उपयोग द्वारा स्पष्ट रूप से उल्लिखित युक्ति का एकमात्र भाग "टेक्स्ट का स्पैन" वाक्यांश है (जब टैग में टेक्स्ट भी नहीं होता है)। यह स्पष्ट है कि <i>टैग मुख्य रूप से पाठ के लिए है, लेकिन टैग के समग्र इरादे की तुलना में यह काफी छोटा विवरण है। इस टैग के लिए महत्वपूर्ण प्रश्न यह नहीं है कि इसमें सामग्री का कौन सा प्रारूप है, लेकिन उस सामग्री का अर्थ क्या है।

यह विशेष रूप से सच है जब आप मानते हैं कि "टेक्स्ट" और "आइकन" के बीच की रेखा वेबसाइटों पर लगभग कोई भी नहीं हो सकती है। पाठ एक आइकन की तरह अधिक दिखाई दे सकता है (जैसा कि जापानी उदाहरण में) या एक आइकन टेक्स्ट की तरह लग सकता है (जैसे कि एक jpg बटन में जो "सबमिट" या एक ओवरलेड कैप्शन के साथ एक बिल्ली की तस्वीर है) या पाठ को प्रतिस्थापित या बढ़ाया जा सकता है CSS के माध्यम से एक छवि। पाठ, छवि - कौन परवाह करता है? यह सब सामग्री है। जब तक हर कोई - हानि के साथ इंसान, हानि के साथ ब्राउज़र, खोज इंजन मकड़ियों, और विभिन्न प्रकार की अन्य मशीनें उस अर्थ को समझ सकती हैं, हमने अपना काम किया है।

तो यह तथ्य कि कल्पना के लेखकों ने स्पष्ट नहीं किया (या चुनना) यह स्पष्ट करने से हमारे हाथ नहीं बंधने चाहिए कि यह क्या अर्थ है और टैग की भावना के अनुरूप है। यह <a>टैग मूल रूप से उपयोगकर्ता को कहीं और ले जाने के लिए बनाया गया था, लेकिन अब यह एक लाइटबॉक्स को पॉप अप कर सकता है। बिग हूप, है ना? अगर किसी ने अनुमान लगाया है कि पकड़े जाने से पहले क्लिक पर लाइटबॉक्स को कैसे पॉप अप किया जाए, तब भी उन्हें <a>टैग का उपयोग करना चाहिए था , न कि <span>, भले ही यह पूरी तरह से वर्तमान परिभाषा के अनुरूप नहीं था - क्योंकि यह निकटतम था और था अभी भी टैग की भावना के अनुरूप है ("जब आप यहां क्लिक करेंगे तो कुछ होगा)"। उसी के साथ सौदा <i>- आप इसके अंदर जो भी चीज डालते हैं, या हालांकि रचनात्मक रूप से आप इसका उपयोग करते हैं,

2. <i>टैग एक आइकन तत्व के अर्थ अर्थ जोड़ता है

अपने आप से आइकन वर्ग को ले जाने का वैकल्पिक विकल्प <span>, बेशक जिसका कोई अर्थ नहीं है। जब एक मशीन पूछती है <span>कि इसमें क्या है, तो यह कहता है, "मुझे पता नहीं है। कुछ भी हो सकता है।" लेकिन <i>टैग कहता है, "मेरे पास सामान्य तरीके से कुछ कहने का एक अलग तरीका है, या शायद एक अपरिचित शब्द है।" यह "मैं एक आइकन शामिल है" के समान नहीं है, लेकिन यह इसके मुकाबले बहुत करीब है <span>!

3. आखिरकार, सामान्य उपयोग सही बनाता है।

उपरोक्त के अलावा, यह विचार करने योग्य है कि मशीन रीडर (चाहे खोज इंजन, स्क्रीन रीडर, या जो भी हो) किसी भी समय यह ध्यान रखना शुरू कर सकता है कि फेसबुक, ट्विटर और अन्य वेबसाइटें <i>आइकन के लिए टैग का उपयोग करें । वे कल्पना के बारे में उतनी परवाह नहीं करते हैं जितना कि कोड से अर्थ निकालने की परवाह करते हैं जो भी आवश्यक हो। इसलिए वे सामान्य ज्ञान के इस ज्ञान का उपयोग केवल यह रिकॉर्ड करने के लिए कर सकते हैं कि "यहां एक आइकन हो सकता है" या कुछ और अधिक उन्नत करें जैसे कि सीएचटी में एक नज़र को अर्थ के लिए ट्रिगर करना, या जो जानता है कि क्या। तो अगर आप का उपयोग करने के लिए चुनते हैं<i> अपनी वेबसाइट पर आइकन , तो आप कल्पना से अधिक अर्थ प्रदान कर सकते हैं।

इसके अलावा, यदि यह उपयोग व्यापक हो जाता है, तो भविष्य में इसे कल्पना में शामिल किया जाएगा। तो आप अपने कोड के माध्यम से जा रहे हैं, <span>एस के साथ <i>की जगह ! तो यह समझ में आ सकता है कि युक्ति की दिशा क्या है, विशेषकर तब जब यह वर्तमान युक्ति के साथ स्पष्ट रूप से टकराव न करे। सामान्य उपयोग भाषा के नियमों को चारों ओर से दूसरे तरीके से अधिक निर्धारित करता है। यदि आप बहुत बूढ़े हो गए हैं, तो क्या आपको याद है कि "वेब साइट" आधिकारिक वर्तनी थी जब शब्द नया था? शब्दकोशों ने जोर दिया कि एक स्थान होना चाहिए और वेब को पूंजीकृत होना चाहिए। उसके शब्दार्थ कारण थे। लेकिन आम उपयोग ने कहा, "जो भी, वह मूर्ख है। मैं 'वेबसाइट' का उपयोग कर रहा हूं क्योंकि यह अधिक संक्षिप्त है और बेहतर दिखता है।" और लंबे समय से पहले,

4. इसलिए मैं आगे जा रहा हूं और इसका उपयोग कर रहा हूं।

तो, <i>मशीनों की वजह से अधिक अर्थ प्रदान करता है, क्योंकि यह मनुष्यों को अधिक अर्थ प्रदान करता है क्योंकि हम "आई" को "आइकन" के साथ आसानी से जोड़ते हैं, और यह केवल एक अक्षर लंबा है। जीत! और अगर आप <i>टैग के अंदर या इसके ठीक बगल में समतुल्य पाठ को शामिल करना सुनिश्चित करते हैं (जैसा कि ट्विटर करता है), तो स्क्रीन पाठक समझ जाते हैं कि जवाब देने के लिए कहां क्लिक करें, सीएसएस लोड नहीं होने पर लिंक उपयोगी है, और मानव पाठक अच्छे के साथ दृष्टि और एक सभ्य ब्राउज़र एक सुंदर आइकन देखते हैं। यह सब ध्यान में रखते हुए, मैं नकारात्मक पक्ष नहीं देखता हूं।


33
लेकिन बिना दुरुपयोग के पहले से ही ऐसा करने के तरीके हैं <i>: बटन या लिंक सहित किसी भी पाठ तत्व का उपयोग करें, और पृष्ठभूमि ग्राफिक और कुछ पैडिंग का उपयोग करके एक आइकन जोड़ें, उसी तरह से इसका उपयोग किया जाता है <i>। HTML जैसा दिखेगा <a ...>Reply</a>, जो अर्थ है, स्टाइल वाला पेज इसके अलावा एक आइकन दिखाता है। यदि आइकन एकमात्र, प्राथमिक तत्व है, तो यह ए होना चाहिए <img src="..." alt="Reply">
deceze

36
@ पूरी तरह से, आप इसे पूरी तरह से अलग पक्ष पर ले गए, लेकिन क्षमा करें, मैं आपकी हर एक पंक्ति से असहमत हूं।
जशवंत

11
शून्यता (यहां तक ​​कि एक आइकन) पाठ नहीं है, हालांकि, और पाठ वह है जो विशेष रूप से कल्पना में लिखा गया है।
Ry-

17
विशेष रूप से कल्पना का मतलब जैक में लिखा गया है। आप इसे जानते हैं और बाकी सभी इसे जानते हैं। यह एक मार्गदर्शक है। और कुछ नहीं। क्या आपको लगता है कि IE कल्पना के बारे में परवाह करता है? वे बेहतर हो रहे हैं। क्या आपको लगता है कि हर एक ब्राउज़र कल्पना को परिपूर्ण बनाने की कोशिश कर रहा है? क्या आपको लगता है कि ग्रह पर हर कोई <code> नौसेना, शीर्ष लेख, पाद लेख, अनुभाग, एक तरफ ... n </ code> का सही उपयोग कर रहा है? नहीं। मैं पेज के बाद पेज पर जाता हूं जहां एक तरफ <code> <div class = "sidebar"> </ code> का प्रतिस्थापन है और आप जानते हैं कि क्या है? जिस तरह से लोग उपयोग करना जारी रखते हैं वह भविष्य में "अर्थ" को परिभाषित करने वाला है।
o_O

17
महान तर्क, मुझे लगता है कि आपने मुझे आश्वस्त किया। विशेष रूप से समझाने # 3 है, "आम उपयोग सही बनाता है"। आम भाषा की तरह, अगर हर कोई इस तरह से एक शब्द का उपयोग करना शुरू कर देता है, तो यह मानक उपयोग हो जाता है। HTML कल्पना अभी कुछ समय के लिए एक विकसित दस्तावेज रहा है, और इसे हठधर्मिता का पालन करना सिर्फ मूर्खतापूर्ण है। आम सम्मेलन का पालन करना एक अधिक टिकाऊ रास्ता है, मेरी राय में। इसके अलावा, <i> तत्व सभी है, लेकिन इस बिंदु पर पदावनत है, इसलिए मुझे इसे नया, अर्थपूर्ण समृद्ध जीवन देने के बारे में अच्छा लगता है! मैं उत्सुक हूं कि इस उपयोग के साथ कल्पना कैसे विकसित होगी, जैसा कि मुझे लगता है कि यह निस्संदेह होगा।
तर्क कलाकार

59

क्वेंटिन का जवाब स्पष्ट रूप से बताता है कि i टैग को परिभाषित करने के लिए टैग का उपयोग नहीं किया जाना चाहिए।

लेकिन, होली ने सुझाव दिया कि spanइसका कोई मतलब नहीं है और टैग के iबजाय इसके पक्ष में मतदान किया span

कुछ ने imgइसे शब्दार्थ के रूप में उपयोग करने का सुझाव दिया और इसमें altटैग शामिल हैं । लेकिन, हमें भी उपयोग नहीं करना चाहिए imgक्योंकि खाली भी srcसर्वर को अनुरोध भेजता है। यहां पढ़ें

मुझे लगता है, सही तरीका होगा

<span class="icon-fb" role="img" aria-label="facebook"></span>

यह बिना altटैग के मुद्दे को हल करता है spanऔर इसे दृष्टि-बाधित उपयोगकर्ताओं के लिए सुलभ बनाता है। यह शब्दार्थ है और किसी भी टैग का दुरुपयोग (हैकिंग) नहीं है।


6
@GeorgeMauer, सभी स्वाभिमानी html / वेब डिज़ाइनर ऑल्ट टैग्स की परवाह करते हैं। एक कारण के लिए कल्पना है। इमारतों में रैंप की तरह, ऑल्ट, टाइटल और ऑरिया टैग एक कारण से मौजूद हैं।
ऑसिरिस

3
@osiris अब पकड़, चश्मा हर समय बदल जाते हैं। मैं इसका पालन करने के लिए अच्छा मानता हूं लेकिन आपको अंतर्निहित इरादे को ध्यान में रखना चाहिए। यह कहा जा रहा है, इसे देखने के बाद से, मैं आपके साथ केवल स्क्रीन्रेडर्स / लापता छवियों / टूलटिप्स के लिए सहमत हूं - वास्तव में एक शब्दार्थ है जिससे मैं अनजान था। MDN: "इस विशेषता को इंगित करना इंगित करता है कि छवि सामग्री का एक महत्वपूर्ण हिस्सा है, लेकिन कोई पाठ्य समकक्ष उपलब्ध नहीं है। इस विशेषता को रिक्त स्ट्रिंग पर सेट करना इंगित करता है कि यह छवि सामग्री का एक महत्वपूर्ण हिस्सा नहीं है; गैर-दृश्य ब्राउज़र इसे प्रस्तुत करने से चूकना। "
जॉर्ज मौअर

3
एक साइड नोट के रूप में, मेरा मानना ​​है कि एक आइकन के लिए सही aria भूमिका प्रस्तुति है । नहीं img
सिल्वेन लेरॉक्स

2
@SylvainLeroux, मुझे लगता है कि यदि पाठ के साथ बटन में आइकन का उपयोग किया जाता है, तो भूमिका प्रस्तुति है। लेकिन यदि बटन में केवल आइकन का उपयोग किया जाता है (कोई पाठ नहीं), तो इसकी भूमिका img है।
जशवंत

2
यह ऐसा नहीं करता है! आप स्क्रीन पाठकों के साथ यह परीक्षण किया है ?! मूल रूप से सुलभ समाधान <img alt="...">को बदलने <span role="img">से सब कुछ खराब हो जाता है। aria-labelएक स्पैन, गैर-ध्यान देने योग्य तत्व पर उपयोग न करें । यह हमेशा अपेक्षा के अनुरूप काम नहीं करेगा। roleयदि आप नहीं जानते कि आप क्या कर रहे हैं तो इसका उपयोग न करें । एआरएआई पर काबू पाना हर किसी के लिए सब कुछ खराब कर रहा है। एक उत्पाद को दुर्गम बनाना और कोड को पढ़ना और बनाए रखना अधिक कठिन है। और SEO के बारे में क्या? एआरआईए अच्छा है, लेकिन समझदारी से उपयोग करें - पहुंच
क्षमता-guide.com/knowledge/aria/bad-practices

12

मेरा अनुमान: क्योंकि ट्विटर को विरासत के ब्राउज़र का समर्थन करने की आवश्यकता है, अन्यथा वे :before/ का उपयोग कर रहे होंगे:after छद्म तत्वों ।

लीगेसी ब्राउज़र उन छद्म तत्वों का समर्थन नहीं करते हैं, जिनका मैंने उल्लेख किया है, इसलिए उन्हें आइकन के लिए एक वास्तविक HTML तत्व का उपयोग करने की आवश्यकता है, और चूंकि आइकन में 'अनन्य' टैग नहीं है, इसलिए वे बस साथ चले गए <i> टैग के , और सभी ब्राउज़र समर्थन करते हैं वह टैग।

वे निश्चित रूप से एक का उपयोग कर सकते हैं <span>, जैसे आप हैं (जो कि पूरी तरह से ठीक है), लेकिन शायद इसी कारण से मैंने ऊपर उल्लेख किया है जो कि क्वेंटिन द्वारा उल्लिखित हैं , यही कारण है कि बूटस्ट्रैप का उपयोग किया जाता है<i> टैग ।

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

पुनश्च। तथ्य यह है कि प्रतीक एक 'मैं' से शुरू होते हैं और एक <i>टैग है, पूरी तरह से संयोग है।


3
वास्तव में नहीं, अगर आप I के अंदर के कोड को देखते हैं तो मैं पहले वाला तत्व है
DCdaz

12

मैं यहाँ पूरी तरह से हर किसी के जवाब के लिए एक पूरी तरह से अलग दृष्टिकोण लेता हूँ। मुझे अपना समाधान उपसर्ग करने दें और यह कहते हुए तर्क दें कि कभी-कभी मानकों और सम्मेलनों को तोड़ने का मतलब होता है, विशेष रूप से मानक HTML लेक्सिकल टैग परिभाषाओं के संदर्भ में।

कस्टम तत्व बनाने से आपको रोकने के लिए कुछ भी नहीं है जो इसे बहुत उद्देश्य के लिए स्व-वर्णनात्मक हैं।

दोनों आधुनिक ब्राउज़र और यहां तक ​​कि IE 6+ (w / shim) जैसी चीजों का समर्थन कर सकते हैं:

<icon class="plus">

या

<icon-add>

बस टैग को सामान्य करना सुनिश्चित करें:

 icon { display:block; margin:0; padding:0; border:0; ... }

और यदि आपको IE9 या उससे पहले (नीचे पोस्ट देखें) का समर्थन करने की आवश्यकता है तो एक शिम का उपयोग करें।

इस StackOverflow पोस्ट की जाँच करें:

क्या HTML5 में अपना स्वयं का html टैग बनाने का कोई तरीका है

मेरे तर्क को आगे बढ़ाने के लिए, Google के कोणीय निर्देश और नई पॉलिमर दोनों परियोजनाएँ कस्टम HTML टैग की अवधारणा का उपयोग करती हैं।


2
और फिर आप W3C सत्यापनकर्ता के पास जाते हैं, और प्रवेश करते हैं <!doctype html> <html lang="en"> <head> <title>Hello</title> </head> <body> <icon></icon> </body> </html>और आपको एक ही त्रुटि मिलती है, कह रही हैError: Element icon not allowed as child of element body in this context.
डिजिटल निंजा

6

मुझे लगा कि यह बहुत बुरा लग रहा है - क्योंकि मैं हाल ही में एक जूमला टेम्पलेट पर काम कर रहा था और मैं W3C को विफल करने वाले टेम्पलेट को प्राप्त करता रहा क्योंकि यह उपयोग कर रहा था <i> टैग और इसे हटा दिया गया था, क्योंकि इसका मूल उपयोग कुछ को इटैलिक करना था, जो अब CSS के माध्यम से किया जाता है। HTML कोई और नहीं।

यह वास्तव में बुरा अभ्यास करता है क्योंकि जब मैंने देखा कि मैं टेम्पलेट के माध्यम से चला गया और सभी <i>टैग को बदल दिया<span style="font-style:italic"> इसके बजाय और फिर सोचा कि क्यों पूरा टेम्पलेट अजीब था।

यह मुख्य कारण है कि <i>इस तरह से टैग का उपयोग करना एक बुरा विचार है - आप कभी नहीं जानते कि कौन आपके काम को बाद में देखने जा रहा है और "मान लें" कि आप वास्तव में क्या करने की कोशिश कर रहे थे, पाठ को प्रदर्शित करने के बजाय इसे इटैलिक करना है आइकन। मैंने अभी कुछ आइकन एक वेबसाइट में डाले हैं और मैंने इसे निम्न कोड के साथ किया है

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

इस तरह से मैंने अपने सभी आइकनों को एक कक्षा में प्राप्त कर लिया है, इसलिए मैं जो भी बदलाव करता हूं, वे सभी आइकॉन को प्रभावित करते हैं (जैसे कि मैं उन्हें बड़ा या छोटा, या गोल बॉर्डर इत्यादि चाहता था), ऑल्ट टेक्स्ट स्क्रीन पाठकों को उस व्यक्ति को बताने का मौका देता है जो आइकन संभवतः "इटैलिक्स में पाठ, इटैलिक का अंत" प्राप्त करने के बजाय है (मुझे बिल्कुल नहीं पता कि स्क्रीन पाठक स्क्रीन कैसे पढ़ते हैं लेकिन मुझे लगता है कि यह कुछ ऐसा है), और शीर्षक भी उपयोगकर्ता को माउस का मौका देता है छवि और एक टूलटिप उन्हें बताएं कि आइकन क्या है अगर वे इसे समझ नहीं सकते हैं। उपयोग करने से बहुत बेहतर है <i>- और यह भी W3C मानक से गुजरता है।


7
<i>पदावनत नहीं किया जाता है।
user2867288

3
"Img" टैग फ़ॉन्ट आइकन के लिए काम नहीं करता है। मेरा मतलब है कि यह करता है, लेकिन आपका ब्राउज़र आपकी साइट पर हर बार अनुरोध करने पर उसे भेजता है।
नवीन

1
इसके बजाय <span style="font-style:italic" />आप बस इसका नया विकल्प इस्तेमाल कर सकते थे -<strong />
ewino

@ मेयो मेरा मानना ​​है कि आप का मतलब है <em> </ em> जो शब्दों पर जोर देने के लिए शब्दार्थ प्रतिस्थापन है (केवल इटैलिक लागू करने के बजाय)
amklose

आप वास्तव में सही हैं :-)
ईवो

2

मुझे यह भी उपयोगी लगा जब मैं एक लिंक <a>टैग के अंदर पूर्ण स्थिति के साथ एक आइकन रखना चाहता था ।

मैंने <img>पहले टैग के बारे में सोचा था , लेकिन लिंक के अंदर उन टैगों की डिफ़ॉल्ट स्टाइलिंग में आमतौर पर बॉर्डर स्टाइलिंग और / या छाया प्रभाव होता है। इसके अलावा, <img>एक "src" विशेषता को परिभाषित किए बिना एक टैग का उपयोग करना गलत लगता है, जबकि मैं एक पृष्ठभूमि-छवि शैली शीट घोषणा का उपयोग कर रहा हूं ताकि छवि भूत और खींचें न हो।

इस बिंदु पर आप टैग्स के बारे में सोच रहे हैं जैसे - <span>या <i>किस मामले <i>में इस प्रकार के आइकन के रूप में बहुत समझ में आता है।

सभी मुझे लगता है कि सहज होने के अलावा इसका लाभ यह है कि इस टैग को एक आइकन के रूप में काम करने के लिए न्यूनतम स्टाइल शीट समायोजन की आवश्यकता होती है।


ठीक है यहाँ मुझे लगता है कि यह बुरा अभ्यास है। ऐतिहासिक रूप से <B> बोल्ड के लिए था और <I> इटैलिक के लिए था। इसलिए यदि आपने <i> का उपयोग किया है तो आप एक खाली इटैलिक टैग बनाते हैं जो कि ऐसा नहीं है। इन्हें <strong> और <em> से बदल दिया गया था, इसलिए मुझे लगता है कि प्राचीन ब्राउज़र के लिए आप खाली इटैलिक टैग वाले पृष्ठ को चिह्नित नहीं करना चाहते हैं, और अंधे के लिए स्क्रीन पाठकों के बारे में, क्या लिंक के अंदर उन आइकन नहीं होने चाहिए TEXT कहो। इसलिए <span> एक बेहतर विकल्प है क्योंकि आप फ़ॉन्ट-आकार को शून्य बना सकते हैं और साथ ही आइकन भी रख सकते हैं।
user1712691

1
@ user1712691 यह आम मिथक है कि <b>और <i>के साथ बदल दिया गया <strong>और <em>क्रमशः। लेकिन सच यह है, <b>और <i>पदावनत नहीं किया जाता है, और नए अर्थ अर्थों पर लिया गया है। अधिक जानने के लिए आधिकारिक चश्मा पढ़ें ।
छुरी
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.