क्या Href विशेषता के बिना एंकर टैग सुरक्षित है?


232

क्या एंकर टैग को hrefविशेषता को शामिल किए बिना उपयोग करना ठीक है , और इसके बजाय जावास्क्रिप्ट क्लिक इवेंट हैंडलर का उपयोग करना है? तो मैं hrefपूरी तरह से छोड़ दूँगा , यह भी खाली नहीं है ( href="")।


1
ऑन्कलिक घटना अभी भी हालांकि ट्रिगर करती है? मैं स्पैन / डिव के बजाय एंकर टैग का उपयोग करना चाहता हूं क्योंकि यह एकमात्र उचित टैग है जो CSS का समर्थन करता है: IE में मंडराना
जॉन

3
@ मर्टिन एंकरों को कीबोर्ड के माध्यम से एक्सेस और सक्रिय किया जा सकता है। नियमित SPAN तत्व नहीं कर सकते। यहाँ देखें: jsfiddle.net/simevidas/4DTxv/2
Vidime Vidas


2
HTML5 में, बिना href विशेषता के एंकर प्लेसहोल्डर हाइपरलिंक हैं: dev.w3.org/html5/markup/a.html
इग्नासियो लागो

1
क्या आप वाकई इसके बजाय एक बटन नहीं चाहते हैं? इसका मतलब यह होगा कि टैबिंग आदि काम करता है, और यदि आवश्यक हो तो लिंक की तरह दिखने के लिए आप अपने बटनों को स्टाइल कर सकते हैं। मैं IE में होवर के बारे में नहीं जानता।
रॉबी_सी

जवाबों:


217

HTML5 में, aएक hrefविशेषता के बिना एक तत्व का उपयोग करना मान्य है। इसे "प्लेसहोल्डर हाइपरलिंक" माना जाता है।

उदाहरण:

<a>previous</a>

W3c एंकर टैग संदर्भ पृष्ठ पर "प्लेसहोल्डर हाइपरलिंक" देखें : https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element

और यहाँ विकी पर भी उल्लेख किया गया है: https://www.w3.org/wiki/Elements/a

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

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

यह सभी देखें:


3
"प्लेसहोल्डर लिंक" की परिभाषा क्या है?
गय्यूम फॉक्स

14
ध्यान दें कि एक के बिना ले लो शैली स्वचालित रूप से तत्व को नहीं जोड़ा जाएगा। hrefcursor: pointer
ल्यूक

38

यह ठीक है, लेकिन एक ही समय में कुछ ब्राउज़र धीमा हो सकता है।

http://webdesignfan.com/yslow-tutorial-part-2-of-3-reducing-server-calls/

मेरी सलाह का उपयोग <a href="#"> </a> है

यदि आप JQuery का उपयोग कर रहे हैं, तो यह भी याद रखें:

.click(function(event){
    event.preventDefault();
    // Click code here...
});

7
मैं href = "#" का उपयोग नहीं कर सकता क्योंकि मैं ajax बुकमार्किंग का उपयोग कर रहा हूं जिसमें हैश बदलना शामिल है, मैं क्या कर सकता हूं?
जॉन

5
जावास्क्रिप्ट का उपयोग करने के बजाय: शून्य (0); Href के अंदर मैं जावास्क्रिप्ट का उपयोग करता हूं:; यह लिखने के लिए कम है।
सहयोगी

16
प्रदर्शन जुर्माना केवल तभी लागू होता है जब आप वास्तव में एक खाली href विशेषता निर्दिष्ट करते हैं। प्रश्न बताता है कि कोई भी href विशेषता बिल्कुल नहीं है।
पीट बी

18
दरअसल, लेख के अनुसार (और यह समझ में आता है) संभावित प्रदर्शन जुर्माना केवल खाली src विशेषताओं के लिए लागू होता है । यह खाली href विशेषताओं के बारे में प्रदर्शन-वार के बारे में कुछ नहीं कहता है।
bergie3000

1
नमस्कार @ गुन्नार, लिंक अब गया लगता है। क्या आपके पास दावे के लिए एक और संदर्भ है?
user31782

25

संक्षिप्त उत्तर: नहीं।

लंबा जवाब:

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

दूसरा। जब आपके पास जावास्क्रिप्ट नहीं चलता है, तो आपके पास एक विकल्प होना चाहिए (क्योंकि यह सर्वर से लोड करने के लिए धीमा था, एक इंटरनेट कनेक्शन गिरा दिया गया था (जैसे चलती ट्रेन पर मोबाइल सिग्नल), जेएस बंद हो गया है, आदि)।

विनीत जेएस द्वारा प्रगतिशील वृद्धि का उपयोग करें


समस्या यह है, मुझे कुछ चाहिए जो मैं एक क्लिक घटना को jQuery के "क्लिक" विधि के साथ संलग्न कर सकता हूं, जो माउस के ऊपर रोल करने पर एक लिंक की तरह हाइलाइट और रेखांकित भी हो जाता है। और क्या, एक href- कम एंकर टैग के अलावा कोई सीएसएस के साथ पूरा कर सकते हैं? (यानी के रूप में है कि मूल रूप से जोड़ने के बिना है, जबकि jQuery के माध्यम से एक प्रत्यक्ष क्लिक समारोह असाइनमेंट की सादगी बनाए रखने)।
त्रिवेंको

@ ट्रायनको - एक लिंक का उपयोग करें, लेकिन इसे ठीक से करें। उत्तर की अंतिम पंक्ति देखें।
क्वेंटिन

5
Tabindex 'एक' टैग पर HTML4 के बाद से मान्य किया गया है (कम से कम) w3schools.com/tags/att_global_tabindex.asp
technoTarek

@technoTarek - हां, लेकिन hrefयह अनिवार्य था (जब तक कि यह एक नामांकित एंकर नहीं था, जिस स्थिति में टैबइंडेक्स का कोई मतलब नहीं था)। tabindexटैब ऑर्डर में अपरिहार्य तत्वों को जोड़ने का उपयोग HTML 5 में एक नया नवाचार है
क्वेंटिन

4
यह केवल गलत है। चाहे आप उस समय HTML के लिए एक पुराने चश्मे का संदर्भ दे रहे थे, मैं नहीं कह सकता, लेकिन HTML5 कल्पना के अनुसार यह वास्तव में aएक hrefविशेषता के बिना एक टैग होने के लिए पूरी तरह से वैध है ।
माइकल

23

यदि आपको बैकवर्ड कम्पैटिबिलिटी के लिए href का उपयोग करना है, तो आप भी उपयोग कर सकते हैं

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

# के बजाय, यदि आप विशेषता का उपयोग नहीं करना चाहते हैं


1
मुझे एक <a> टैग की आवश्यकता थी जो फ़ंक्शन को छोड़कर सभी में एक लिंक की तरह व्यवहार करता था। इसने मेरे लिए चाल चली।
जद एस

13

टैग एक href विशेषता के बिना उपयोग करने के लिए ठीक है। यहाँ कई जवाबों के विपरीत, वास्तव में एक एंकर बनाने के लिए मानक कारण हैं जब कोई href नहीं होता है। शब्दार्थ, "क" का अर्थ है एक लंगर या एक कड़ी। यदि आप उस अर्थ का अनुसरण करने के लिए इसका उपयोग करते हैं, तो आप ठीक हैं।

एक टैग के बिना टैग का एक मानक उपयोग नामित लिंक बनाने के लिए है। यह आपको नाम = ब्लाह के साथ एक एंकर का उपयोग करने की अनुमति देता है और बाद में आप वर्तमान पृष्ठ के नामित अनुभाग से लिंक करने के लिए href = # ब्लाह के साथ एक एंकर बना सकते हैं। हालाँकि, इसे हटा दिया गया है क्योंकि आप उसी तरीके से आईडी का उपयोग भी कर सकते हैं। उदाहरण के रूप में, आप आईडी = हेडर के साथ हेडर टैग का उपयोग कर सकते हैं और बाद में आप एंकर को href = # हेडर की ओर इशारा कर सकते हैं।

मेरी बात, हालांकि, नाम संपत्ति का उपयोग करने का सुझाव नहीं है। केवल एक उपयोग मामला प्रदान करने के लिए जहां आपको एक href की आवश्यकता नहीं है, और इसलिए यह तर्क देने की आवश्यकता नहीं है कि यह क्यों आवश्यक है।


2
मुझे लगता है कि सवाल क्या पूछने की कोशिश कर रहा था और अन्य उत्तर क्या संबोधित कर रहे हैं, क्या यह hrefएक <a>तत्व के लिए विशेषता को छोड़ना सुरक्षित है जो एक इंटरैक्टिव तत्व (यानी लिंक) के रूप में उपयोग किया जा रहा है । जैसा कि आप उल्लेख करते हैं, एक hrefविशेषता के बिना यह काफी सरल है ... एक लिंक नहीं है, बस एक लंगर है, जो पूरी तरह से एक अलग चीज है।
BoltClock

1
हां, लेकिन - केवल जोर देने के लिए - इन उपयोग मामलों में <a> टैग अभी भी मान्य है।
5

9

<a>बिना href के एक्सेसिबिलिटी के नजरिए से टैब-सक्षम नहीं है, सभी लिंक टैब-सक्षम होने चाहिए, इसलिए यदि आपके पास href नहीं है, तो tabindex = '0 "जोड़ें।


1
या एक बटन का उपयोग करें यदि यह पुनर्निर्देशन के बजाय इन-पेज कार्रवाई करने जा रहा है।
साइमनडेवर

8

<a>जब बहु स्तरीय मेनू का उपयोग कर "href" बिना टैग को सुविधाजनक हो सकता है और आप अगले स्तर का विस्तार करने की जरूरत है लेकिन यह है कि मेनू लेबल एक सक्रिय लिंक होने के लिए नहीं करना चाहती। मुझे इस तरह से इसका उपयोग करने में कभी कोई समस्या नहीं हुई।


1
क्या आपने कीबोर्ड के साथ उस मेनू को एक्सेस करने की कोशिश की है?
ऐज

मुझे अभी पता चला है कि IE पर, यदि आप कुछ लिंक पर होवर करते हैं और एक बिना href के एक एंकर है, तो नीचे दिए गए URL वाला छोटा पॉपअप गायब होने के बजाय पिछले यूआरएल को दिखाता है। एंकर हालांकि क्लिक करने योग्य नहीं है, इसलिए यह बड़ा मुद्दा नहीं है, लेकिन मेरे लिए एक तलाक के बजाय जाने के लिए पर्याप्त है।
एंड्रयू

1

कुछ ब्राउज़रों में आप समस्याओं का सामना करेंगे यदि आप एक href विशेषता नहीं दे रहे हैं। मेरा सुझाव है कि आप अपना कोड कुछ इस तरह लिखें:

<a href="#" onclick="yourcode();return false;">Link</a>

आप अपने स्वयं के फ़ंक्शन या लॉजिक के साथ योरकोड () को बदल सकते हैं, लेकिन रिटर्न को गलत जोड़ना याद रखें; अंत में बयान।


मैं Backbone.Rjs के साथ Backbone.js का उपयोग कर रहा हूं और #सूचकांक पृष्ठ के लिए है। मेरे कुछ नौसिखियों के लिंक के लिए मैं एक मार्ग को ट्रिगर नहीं करना चाहता, #जो कि आपके a href="#"द्वारा उपयोग किए जाने पर होता है। <a href="#" onclick="return false;"मार्ग का उपयोग बंद होने से ट्रिगर किया जा रहा है, लेकिन क्लिक इवेंट अभी भी मेरे हैंडलर तक बुलबुले बनाता है (जो कि jQuery और Backbone.Radio के माध्यम से हुक किए गए DOM घटनाओं का उपयोग करता है)। धन्यवाद @ shashwat13 :)
डेविड विलियमसन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.