2012-05-09 23 views
90

मैं साइट बनाने के लिए ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं, और इसकी बहुत सारी कार्यक्षमता <a> में चीजों को लपेटने पर निर्भर करती है, भले ही वे जावास्क्रिप्ट निष्पादित करने जा रहे हों। मुझे href="#" रणनीति के साथ समस्याएं आई हैं जो बूटस्ट्रैप के दस्तावेज़ों की सिफारिश करता है, इसलिए मैं एक अलग समाधान खोजने की कोशिश कर रहा था।href विशेषता के बिना <a> (एंकर टैग) का उपयोग करने के लिए मान्य?

लेकिन फिर मैंने href विशेषता को पूरी तरह हटाने की कोशिश की। मैं <a class='bunch of classes' data-whatever='data'> का उपयोग कर रहा हूं, और जावास्क्रिप्ट बाकी को संभाल रहा है। और यह काम करता है।

फिर भी कुछ मुझे बता रहा है कि मुझे यह नहीं करना चाहिए। सही? मेरा मतलब है, तकनीकी रूप से <a> किसी चीज़ का लिंक होना चाहिए, लेकिन मुझे पूरा यकीन नहीं है कि क्यों यह एक समस्या है। या यह है?

उत्तर

156

<a> nchor तत्व बस एक लंगर है कुछ सामग्री से या उससे। मूल रूप से नामित एंकरों (<a name="foo">) और लिंक किए गए एंकर (<a href="#foo">) के लिए HTML विनिर्देशन की अनुमति है।

नामित लंगर प्रारूप कम सामान्यतः प्रयोग किया जाता है के रूप में टुकड़ा पहचानकर्ता अब (हालांकि पश्च संगतता के लिए आप अभी भी [name] गुण निर्दिष्ट कर सकते हैं) एक [id] विशेषता निर्दिष्ट करने के लिए प्रयोग किया जाता है। An <a> element without an [href] attribute is still valid

जहां तक ​​शब्दों और स्टाइल का संबंध है, <a> तत्व एक लिंक (:link) जब तक यह एक [href] विशेषता है नहीं है। इसका दुष्प्रभाव यह है कि तत्व बिना [href] डिफ़ॉल्ट रूप से टैबबिंग ऑर्डर में नहीं होगा।

असली सवाल यह है कि <a> तत्व अकेले <button> का एक उचित प्रतिनिधित्व है। अर्थात् स्तर पर, link और button के बीच एक अलग अंतर है।

एक बटन ऐसा कुछ है जो क्लिक होने पर कार्रवाई होने का कारण बनता है।

एक लिंक एक बटन है जो वर्तमान दस्तावेज़ में नेविगेशन में बदलाव का कारण बनता है। जो नेविगेशन होता है वह खंड पहचानकर्ता (#foo) के मामले में दस्तावेज़ के भीतर जा सकता है या यूआरएल (/bar) के मामले में एक नए दस्तावेज़ में जा सकता है।

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

आप शब्दों और एक <a> तत्व (या <span>, या <div>) का उपयोग कर एक बटन के रूप की पहुंच के बारे में चिंतित हैं, तो आप निम्न विशेषताओं को जोड़ना चाहिए:

<a role="button" tabindex="0" ...>...</a> 

button role उपयोगकर्ता बताता है कि विशेष तत्व को अंतर्निहित तत्व के जो भी अर्थशास्त्र के लिए ओवरराइड के रूप में एक बटन के रूप में माना जा रहा है।

<span> और <div> तत्वों के लिए, आप अंतरिक्ष के लिए जावास्क्रिप्ट कुंजी श्रोताओं को जोड़ने के लिए या दर्ज click घटना ट्रिगर कर सकते हैं। <a href> और <button> तत्व डिफ़ॉल्ट रूप से ऐसा करते हैं, लेकिन गैर-बटन तत्व नहीं होते हैं। कभी-कभी click को एक अलग कुंजी पर ट्रिगर करने के लिए यह अधिक समझ में आता है। उदाहरण के लिए, किसी वेब ऐप में "सहायता" बटन F1 तक बाध्य हो सकता है।

+0

'href =" # "मैंने सुना है। 'जावास्क्रिप्ट: शून्य (0)' मैंने सुना है। मैंने अब तक कभी नहीं सुना है, लेकिन ऐसा लगता है कि यह सबसे ज्यादा समझ में आता है। यह मानक है और अधिकांश ब्राउज़रों में काम करता है, है ना? – Zacqary

+0

@Zacqary, '[role =" बटन "] 'कुछ भी ठोस नहीं करता है, आपको अभी भी क्लिक ईवेंट सुनने की आवश्यकता है (लेकिन आप जेएस बटन बनाने के लिए वैसे भी ऐसा करेंगे)। इसका उपयोग सहायक नेविगेशन (उर्फ स्क्रीन रीडर) के लिए किया जाना है ताकि स्क्रीन रीडर तत्व को अपने मूल अर्थपूर्ण मूल्य के बजाय बटन के रूप में प्रस्तुत करना जानता हो। '[Tabindex]' जोड़ना तत्व को टैबबिंग ऑर्डर में जोड़ता है। विशेष परिस्थितियों में आप वास्तव में टैबबिंग ऑर्डर में बटन नेविगेट करने की आवश्यकता नहीं चाहते हैं, इसलिए यह एक वैकल्पिक विशेषता है। जिन तत्वों को पहले से ही बटन हैं, उन्हें '[role = "बटन"]' की आवश्यकता नहीं है क्योंकि यह अनावश्यक है। – zzzzBov

+0

क्या यह वैध HTML है बिना href के नाम और बिना नाम के एंकर टैग है? हमारे ऐप में हमारे पास कुछ डिलीट लिंक हैं जो अक्षम हैं (इसलिए कोई href विशेषता नहीं है), लेकिन फिर भी उपयोगकर्ता को दिखाया गया है। –

20

मुझे लगता है कि आप यहां अपना उत्तर पा सकते हैं: अगर आप href के साथ कोई संबंध नहीं आपरेशन करना चाहते Is an anchor tag without the href attribute safe?

इसके अलावा, आप इसे पसंद का उपयोग कर सकते हैं:

<a href="javascript:void(0);">something</a> 
+2

वास्तव में 'जावास्क्रिप्ट: अनिर्धारित होना चाहिए' – rybo111

+2

@ rybo111 आप सही हैं लेकिन मैं अभी भी शून्य (0) पसंद करता हूं; मूल रूप से क्योंकि यह बेहतर दिखता है। मैं अपने ग्राहकों को "अपरिभाषित" के रूप में देखने के लिए पसंद नहीं करता ;-) – Alex

+4

'text'? – diynevala

4

हां, विशेषता के बिना एंकर टैग का उपयोग करने के लिए यह मान्य है।

a तत्व कोई href विशेषता है, तो तत्व जहां एक लिंक अन्यथा रखा हो सकता है किया गया है, अगर यह प्रासंगिक हो गया था, बस तत्व की सामग्री से मिलकर के लिए एक प्लेसहोल्डर का प्रतिनिधित्व करता है।

हाँ, आप class और अन्य विशेषताओं, उपयोग कर सकते हैं, लेकिन आप target, download, rel, hreflang, और type उपयोग नहीं कर सकते।

target, download, rel, hreflang, और type विशेषताओं छोड़े गए किया जाना चाहिए अगर href विशेषता मौजूद नहीं है।

के लिए के रूप में "क्या मुझे?" हिस्सा है, पहले प्रशस्ति पत्र देखें: "जहां एक लिंक अन्यथा अगर यह प्रासंगिक किया गया था रखा गया है हो सकता है"। तो मैं पूछूंगा कि "अगर मेरे पास कोई जावास्क्रिप्ट नहीं था, तो क्या मैं इस टैग को लिंक के रूप में उपयोग करूंगा?"। अगर उत्तर हाँ है, तो हां, आपको<a>href के बिना उपयोग करना चाहिए। यदि नहीं, तो मैं अभी भी इसका उपयोग करूँगा, क्योंकि बढ़त केस अर्थशास्त्र से उत्पादकता मेरे लिए अधिक महत्वपूर्ण है, लेकिन यह मेरी व्यक्तिगत राय है।

साथ ही, आपको अलग behaviour और styling (जैसे कोई रेखांकन, कोई सूचक कर्सर, नहीं एक :link) के लिए बाहर देखना चाहिए।

स्रोत: W3C HTML5 Recommendation

4

यह वैध है। उदाहरण के लिए, आप मॉडलों को दिखाने के लिए इसका उपयोग कर सकते हैं (या ऐसी ही चीजें जो data-toggle और data-target विशेषताओं का जवाब देती हैं)।

कुछ की तरह:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a> 

यहाँ मैं फ़ॉन्ट भयानक आइकन है, जो बजाय एक a टैग एक button के रूप में बेहतर है का उपयोग करें, एक मॉडल को दिखाने के लिए। साथ ही, role="button" सेटिंग को पॉइंटर को एक्शन प्रकार में बदल देता है। href या role="button" के बिना, कर्सर पॉइंटर बदलता नहीं है।

संबंधित मुद्दे