Href = "#" क्या है और इसका उपयोग क्यों किया जाता है?

Question

कई वेबसाइटों पर मुझे ऐसे लिंक दिखाई देते हैं जो हैं href="#"। इसका क्या मतलब है? इसका क्या उपयोग है?

Answer 1

हाइपरलिंक्स के बारे में:

एंकर टैग का मुख्य उपयोग - <a></a>- हाइपरलिंक के रूप में है । मूल रूप से इसका मतलब है कि वे आपको कहीं ले जाते हैं। हाइपरलिंक्स को hrefसंपत्ति की आवश्यकता होती है , क्योंकि यह एक स्थान निर्दिष्ट करता है।

हैश:

एक हैश - #एक हाइपरलिंक के भीतर एक HTML एलिमेंट आईडी निर्दिष्ट करता है जिसमें विंडो को स्क्रॉल किया जाना चाहिए।

href="#some-id"वर्तमान पृष्ठ जैसे तत्व पर स्क्रॉल करेगा <div id="some-id">।

href="https://stackoverflow.com//site.com/#some-id"site.comउस पेज पर आईडी पर जाना और स्क्रॉल करना होगा ।

शीर्ष तक स्क्रॉल करें:

href="#"एक आईडी नाम निर्दिष्ट नहीं करता है, लेकिन उसका एक स्थान होता है - पृष्ठ का शीर्ष। एंकर पर क्लिक करने href="#"से स्क्रॉल स्थिति शीर्ष पर चली जाएगी।

इस डेमो को देखें।

यह w3 प्रलेखन के अनुसार अपेक्षित व्यवहार है ।

हाइपरलिंक प्लेसहोल्डर:

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

लंगर टैग के बारे में:

एक और सवाल जो आप सोच रहे होंगे, "क्यों न सिर्फ href प्रॉपर्टी को छोड़ दिया जाए?"। एक आम प्रतिक्रिया जो मैंने सुनी है वह यह है कि hrefसंपत्ति की आवश्यकता है, इसलिए यह "लंगर" पर मौजूद होना चाहिए। यह गलत है! hrefसंपत्ति वास्तव में एक हाइपरलिंक होने के लिए एक लंगर के लिए केवल आवश्यक है! इसे w3 से पढ़ें। तो, क्यों न सिर्फ इसे प्लेसहोल्डर्स के लिए छोड़ दिया जाए? तत्व के लिए ब्राउजर डिफ़ॉल्ट शैलियों को प्रस्तुत करता है और एंकर टैग की डिफ़ॉल्ट शैली को बदल देगा जिसमें href प्रॉपर्टी नहीं है। इसके बजाय, इसे नियमित पाठ की तरह माना जाएगा। यह तत्व के संबंध में ब्राउज़र के व्यवहार को भी बदल देता है। Href प्रॉपर्टी के बिना एंकर पर मँडराते समय स्टेटस बार (स्क्रीन के नीचे) प्रदर्शित नहीं होगा। यह सुनिश्चित करने के लिए कि एक हाइपरलिंक के रूप में व्यवहार किया जाता है, एंकर पर प्लेसहोल्डर href मान का उपयोग करना सबसे अच्छा है।

इस प्रदर्शन शैली और व्यवहार के अंतर को देखें।

Comments

पूरा जवाब। लेकिन, आपके उत्तर में टर्म टेम्प्लेट पूर्वावलोकन का क्या अर्थ है ?

— ओवरएक्सचेंज

@overexchange उदाहरण के लिए, इस पेज और उस पर लिंक देखें: ironsummitmedia.github.io/startbootstrap-creative बस HTML पृष्ठों है कि सीएसएस / HTML, वर्डप्रेस विषयों, आदि का एक सेट प्रदर्शित करने के लिए होती हैं, लेकिन असली पृष्ठ नहीं हैं, इसलिए लिंक को कहीं भी जाने की आवश्यकता नहीं है।

— m59

@Yeung हैश को बदलना (जो # के बाद url का हिस्सा है) सर्वर को कॉल नहीं करता है। आप जावास्क्रिप्ट के साथ पृष्ठ को बदल देंगे। इस विषय पर बहुत कुछ कहा जा सकता है और यह इस पद के दायरे से परे है।

— 18:59 पर m59

इसके अलावा, यादृच्छिक tidbit, एंड्रॉइड ब्राउज़र (ब्राउज़र, क्रोम, आदि) किसी भी चीज़ पर क्लिक करने की घटनाओं को स्वीकार नहीं करेंगे, लेकिन एंकर टैग। तो कहते हैं कि आप .click()एक पर jQuery की विधि का उपयोग करना चाहते हैं <div></div>, यह काम नहीं करेगा। या तो एक लंगर पर होना चाहिए या आपको touchघटनाओं का उपयोग करना होगा।

— स्टेनली

@QHarr मैं सकारात्मक नहीं हूँ, लेकिन यह होना चाहिए क्योंकि एक खाली "#" किसी भी चीज़ को संदर्भित नहीं करता है, इसलिए इसे छोड़ने के समान है, और इसे छोड़ने से केवल पृष्ठ का उल्लेख होता है, और पृष्ठ शुरू होते हैं शीर्ष जब तक अन्यथा नहीं बताया गया। दूसरे शब्दों में, शायद इसका मतलब यह नहीं है कि "ऊपर की ओर स्क्रॉल करें", इसका मतलब केवल कुछ भी नहीं है "अर्थात इस पृष्ठ पर जाएं", जिसका अर्थ है पृष्ठ के शीर्ष पर जाना।

— m59

Answer 2

"#" प्रतीक को किसी चीज़ के लिए href के रूप में रखने का अर्थ है कि यह एक अलग URL पर नहीं, बल्कि उसी पृष्ठ पर किसी अन्य आईडी या नाम टैग की ओर इंगित करता है। उदाहरण के लिए:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

हालांकि, अगर कोई आईडी या नाम नहीं है, तो यह "नहीं कहां" है।

इसी तरह का एक और प्रश्न HTML एंकर ने 'नाम' या 'आईडी' के साथ पूछा है ?

Comments

आईडी वाला एक तत्व - इसका नाम लंगर नहीं होना चाहिए (और वास्तव में नामांकित लंगर थोड़ी देर के लिए हटा दिया गया है)।

— ऊद

मैं यहाँ आया क्योंकि <a href="#">...</a>"कहीं नहीं जा रहा था" यह पृष्ठ छोड़ कर लोड हो रहा था site.com/#। वो कैसे संभव है?

— doug65536 12

@ doug65536 सबसे अधिक संभावना यह है कि एक onclickघटना हैंडलर उस तत्व से बंधा हुआ था, जिससे एक जावास्क्रिप्ट फ़ंक्शन को उस पृष्ठ पर पुनः निर्देशित किया जा सकता है।

— जटेट

Answer 3

यह एक ऐसा लिंक है जो अनिवार्य रूप से कहीं भी लिंक करता है (यह URL पर "#" जोड़ता है)। इसका उपयोग कई अलग-अलग कारणों से किया जाता है। उदाहरण के लिए, यदि आप किसी प्रकार के जावास्क्रिप्ट / jQuery का उपयोग कर रहे हैं और वास्तविक HTML को कहीं भी लिंक नहीं करना चाहते हैं।

इसका उपयोग पेज एंकर के लिए भी किया जाता है, जिसका उपयोग पेज के एक अलग हिस्से को रीडायरेक्ट करने के लिए किया जाता है।

Comments

बस जोड़ने के लिए, यह कहीं भी एक कड़ी नहीं है ... एक स्क्रॉल पृष्ठ पर यह आपको शीर्ष पर ऑटो-स्क्रॉल करेगा।

— मिसको

Answer 4

दुर्भाग्य से, सबसे आम उपयोग <a href="#">आलसी प्रोग्रामर्स द्वारा किया जाता है, जो क्लिक करने योग्य गैर-हाइपरलिंक जावास्क्रिप्ट-कोडेड तत्व चाहते हैं जो एंकर की तरह व्यवहार करते हैं, लेकिन उन्हें अपने गैर-हाइपरलिंक तत्वों के लिए एक वर्ग में जोड़ने cursor: pointer;या :hoverशैलियों के लिए तर्क नहीं दिया जा सकता है और इसके अतिरिक्त हैं सेट hrefकरने के लिए बहुत आलसी javascript:void(0);।

इसके साथ समस्या यह है कि एक <a href="#" onclick="some_function();">या किसी अन्य अनिवार्य रूप से एक जावास्क्रिप्ट त्रुटि के साथ समाप्त होता है, और एक onclick जावास्क्रिप्ट त्रुटि वाला एक लंगर हमेशा इसके बाद समाप्त होता है href। आम तौर पर यह ऊपर पृष्ठ के शीर्ष पर एक कष्टप्रद कूद जा रहा समाप्त होता है, लेकिन का उपयोग कर साइटों के मामले में <base>, <a href="#">के रूप में नियंत्रित किया जाता है <a href="[base href]/#">, एक अप्रत्याशित नेविगेशन में जिसके परिणामस्वरूप। यदि कोई लॉग करने योग्य त्रुटियां उत्पन्न हो रही हैं, तो आप उन्हें बाद वाले मामले में नहीं देखेंगे जब तक कि आप लगातार लॉग को सक्षम न करें।

यदि एक लंगर तत्व का उपयोग गैर-लंगर के रूप में किया जाता है, तो इसे सुंदर गिरावट के लिए इसका सेट होना चाहिए ।hrefjavascript:void(0);

मैंने अभी दो दिन बर्बाद कर दिए हैं एक यादृच्छिक अप्रत्याशित पृष्ठ को पुनर्निर्देशित किया गया है जिसे केवल पृष्ठ को रीफ्रेश करना चाहिए था, और अंत में इसे एक फ़ंक्शन पर क्लिक किया गया, जिसमें से क्लिक की घटना को उठाया गया था <a href="#">। इसे ठीक करने के #साथ प्रतिस्थापित javascript:void(0);।

पहली बात जो मैं सोमवार कर रहा हूं वह सभी उदाहरणों की परियोजना को शुद्ध कर रहा है <a href="#">।

Comments

"यदि एक लंगर तत्व का उपयोग एक गैर-लंगर के रूप में किया जाता है, तो उसके पास जावास्क्रिप्ट के लिए इसका आर्क सेट होना चाहिए: सुंदर गिरावट के लिए v (0)।" [उद्धरण वांछित]

— वीटो डे टुल्लियो

वाई, के साथ और बिना <base>वास्तव में के लिए एक बड़ा फर्क पड़ता है #। इशारा करने के लिए धन्यवाद!

— लियोन - हान ली

मैंने अभी-अभी दो दिन बर्बाद किए हैं एक यादृच्छिक अप्रत्याशित पृष्ठ को पुनर्निर्देशित किया है जिसे केवल पृष्ठ को रीफ्रेश करना चाहिए था, और अंत में इसे एक समारोह में ट्रैक करके <a href="#"> की क्लिक घटना को बढ़ाता है। जावास्क्रिप्ट के साथ # की जगह: शून्य (0); ठीक कर दिया। - मैंने यही काम किया और अपनी समस्या का समाधान भी किया।

— लिआंग

Answer 5

अव्यवस्थित सूचियों को अक्सर मेनू के रूप में उपयोग करने के इरादे से बनाया जाता है, लेकिन एक liसूची आइटम पाठ है। क्योंकि सूची liआइटम पाठ है, माउस पॉइंटर एक तीर नहीं होगा, बल्कि एक "आई कर्सर" होगा। जब कुछ क्लिक करने योग्य होता है, तो उपयोगकर्ता माउस पॉइंटर के लिए एक इंगित उंगली देखने के आदी होते हैं। टैग के aअंदर एंकर टैग का उपयोग liकरने से माउस पॉइंटर को पॉइंटिंग फिंगर में बदलने का कारण बनता है। मेनू के रूप में सूची का उपयोग करने के लिए इंगित करने वाली उंगली बहुत बेहतर है।

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

यदि सूची मेनू के लिए उपयोग की जा रही है, और लिंक की आवश्यकता नहीं है, तो एक URL को निर्दिष्ट करने की आवश्यकता नहीं है। लेकिन समस्या यह है कि यदि आप hrefविशेषता को छोड़ देते हैं , तो <a>टैग में पाठ को पाठ के रूप में देखा जाता है, और इसलिए माउस पॉइंटर वापस आई-कर्सर में आता है। आई-कर्सर उपयोगकर्ता को लगता है कि मेनू आइटम क्लिक करने योग्य नहीं है। इसलिए, आपको अभी भी एक की आवश्यकता है href, लेकिन आपको कहीं भी लिंक की आवश्यकता नहीं है।

आप मेनू सूची के लिए बहुत सारे divया pटैग का उपयोग कर सकते हैं , लेकिन माउस पॉइंटर भी उनके लिए एक आई-कर्सर होगा।

आप मेनू सूची के लिए एक दूसरे के ऊपर ढेर सारे बटनों का उपयोग कर सकते हैं, लेकिन सूची बेहतर लगती है। और शायद यही कारण है href="#"कि सूची के टैग के अंदर एंकर टैग में कहीं भी उस बिंदु का उपयोग नहीं किया जाता है।

आप सीएसएस में पॉइंटर स्टाइल सेट कर सकते हैं, इसलिए यह एक और विकल्प है। href="#"कहीं नहीं करने के लिए बस कुछ स्टाइल सेट करने के लिए आलसी तरीका हो सकता है।

Answer 6

खाली लिंक के लिए href = "#" का उपयोग करने में समस्या यह है कि यह आपको पृष्ठ के शीर्ष पर ले जाएगा जो वांछित कार्रवाई नहीं हो सकती है। इससे बचने के लिए, पुराने ब्राउज़रों या गैर-HTML5 सिद्धांतों के लिए उपयोग करें

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

Comments

मैंने पाया कि यह समाधान एक परिदृश्य के लिए विशेष उपयोगी है: मेरे आवेदन में, href = '"" का उपयोग लॉगआउट (लॉगिन पृष्ठ पर लाएं) कार्यक्षमता को लागू करने के लिए किया जाता है। यदि मैं अन्य उद्देश्य के लिए href = "#" का उपयोग करता हूं, तो कुछ समय बाद यह मुझे लॉगिन पेज पर ले जाएगा। जब मैं href = "#" को href = "जावास्क्रिप्ट: void (0)" में परिवर्तित करता हूं, तो समस्या हल हो गई है।

— लिआंग

Answer 7

जहां तक ​​मुझे पता है कि आमतौर पर लिंक के लिए एक प्लेसहोल्डर होता है, जिसमें कुछ जावास्क्रिप्ट उनके साथ जुड़े होते हैं। लिंक का मुख्य बिंदु जावास्क्रिप्ट कोड निष्पादित करके परोसा जाता है; जेएस समर्थन वाले ब्राउज़र तब वास्तविक लिंक लक्ष्य को अनदेखा करते हैं। यदि ब्राउज़र जेएस का समर्थन नहीं करता है, तो हैश मार्क अनिवार्य रूप से लिंक को। ऑप में बदल देता है। विनीत जावास्क्रिप्ट भी देखें ।

Answer 8

जैसा कि अन्य जवाबों में से कुछ ने बताया है, aतत्व को एक hrefविशेषता की आवश्यकता होती है और #इसका उपयोग प्लेसहोल्डर के रूप में किया जाता है, लेकिन यह एक ऐतिहासिक कलाकृति भी है।

से मोज़िला डेवलपर नेटवर्क :

href

यह हाइपरटेक्स्ट स्रोत लिंक को परिभाषित करने वाले एंकरों के लिए एकल आवश्यक विशेषता थी, लेकिन अब HTML5 में आवश्यक नहीं है। इस विशेषता को स्वीकार करने से एक प्लेसहोल्डर लिंक बन जाता है। Href विशेषता लिंक लक्ष्य को इंगित करता है, या तो URL या URL टुकड़ा। URL टुकड़ा एक हैश मार्क (#) से पहले का नाम है, जो वर्तमान दस्तावेज़ के भीतर एक आंतरिक लक्ष्य स्थान (एक आईडी) को निर्दिष्ट करता है।

इसके अलावा, HTML5 कल्पना के अनुसार :

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

Answer 9

Href विशेषता किसी लिंक के संसाधन के URL को परिभाषित करती है। अगर एंकर टैग में href टैग नहीं है तो वह हाइपरलिंक नहीं बनेगा। Href विशेषता के निम्नलिखित मान हैं:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>