Href विशेषता के बिना <a> (एंकर टैग) का उपयोग करने के लिए मान्य है?


152

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

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

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


जवाबों:


245

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

नामित एंकर प्रारूप का आमतौर पर कम उपयोग किया जाता है, क्योंकि टुकड़ा पहचानकर्ता का उपयोग अब एक [id]विशेषता निर्दिष्ट करने के लिए किया जाता है (हालांकि पीछे की संगतता के लिए आप अभी भी [name]विशेषताओं को निर्दिष्ट कर सकते हैं )। एक विशेषता के <a>बिना एक तत्व [href]अभी भी मान्य है

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

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

एक बटन एक ऐसी चीज है, जिस पर क्लिक करने पर कार्रवाई होती है।

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

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

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

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

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

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


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

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

1
@JoshuaMuheim, मुझे आशा है कि आपको कोई आपत्ति नहीं है, लेकिन मैंने आपके प्रश्न को एक अलग स्टैंड-अलोन प्रश्न के रूप में पोस्ट किया है
zzzzBov

बस एक नोट जोड़ना चाहता था कि यदि आप जावास्क्रिप्ट कार्यों के लिए 'बटन' बनाने के लिए इसका उपयोग कर रहे हैं ... पूरी तरह से href विशेषता को हटाने से भी Chrome (और शायद अन्य ब्राउज़र) माउसओवर पर कर्सर बदलना बंद कर देंगे। जाहिर है यह सीएसएस के साथ वापस जोड़ना आसान है - लेकिन सिर्फ एक सिर है।
मीर

@ मीर, यदि आप उपयोग नहीं करने जा रहे हैं, तो आपको [href]संभवतः <span>बटन के लिए उपयोग करना चाहिए ।
zzzzBov

45

मुझे लगता है कि आप यहां अपना जवाब पा सकते हैं: क्या कोई एंकर टैग बिना href विशेषता के सुरक्षित है?

यदि आप href के साथ कोई लिंक ऑपरेशन नहीं करना चाहते हैं, तो आप इसका उपयोग कर सकते हैं जैसे:

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

3
वास्तव में होना चाहिएjavascript:undefined
rybo111

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

9
<a href="javascript:;">text</a>?
डायनेवला

javascript:;IE6 में रोलओवर प्रभाव और यहां तक ​​कि GIF एनिमेशन जैसी चीजों को तोड़ने के लिए उपयोग किया जाता है। और कोई लिंक संचालन के लिए समर्पित HTML तत्व नहीं हैं button। एक ही समय में, AJAX लिंक जैसी चीजें hrefजेएस विफल होने पर फॉलबैक कार्रवाई के लिए अपने एस का उपयोग कर सकती हैं ।
इल्या स्ट्रेल्ट्सिन

14

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

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

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

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

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

इसके अतिरिक्त, आपको अलग-अलग व्यवहार और स्टाइल के लिए देखना चाहिए (जैसे कोई रेखांकन, कोई सूचक कर्सर नहीं, नहीं )।:link

स्रोत: W3C HTML5 अनुशंसा


यह "एज केस शब्दार्थ" के बारे में इतना नहीं है, लेकिन पहुंच के बारे में, यह सुनिश्चित कर रहा है कि विकलांग लोग किसी वेबसाइट की सामग्री का उपयोग और समझ सकते हैं
neiya

3

यह मान्य है। उदाहरण के लिए, आप इसका उपयोग मोडल दिखाने के लिए कर सकते हैं (या इसी तरह की चीजें जो जवाब देती हैं 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", या कर्सर पॉइंटर नहीं बदलता है।


2
आपको इस मामले में एक बटन का उपयोग करना चाहिए। यह शब्दार्थ और पहुँच दोनों दृष्टिकोण से अधिक उपयुक्त है। एंकर आपको कहीं ले जाना चाहिए, एक क्रिया नहीं करना चाहिए। इसके अलावा, आप पूरे लंगर को क्यों छिपा रहे हैं aria-hidden? आइकन, हो सकता है, लेकिन स्क्रीन रीडर उपयोगकर्ताओं को कम अनुभव नहीं होना चाहिए।
isherwood
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.