SRC और HREF के बीच अंतर

172

SRCऔर HREFविशेषताओं छवि के तौर पर कुछ बाहरी संस्थाओं, एक सीएसएस फ़ाइल, एक HTML फ़ाइल, किसी भी अन्य वेब पेज या किसी JavaScript फ़ाइल शामिल करने के लिए किया जाता है।

क्या एक स्पष्ट अंतर है SRCऔर HREF? कहाँ या कब उपयोग करें SRCया HREF? मुझे लगता है कि वे परस्पर विनिमय नहीं कर सकते।

मैं नीचे कुछ उदाहरण दे रहा हूँ जहाँ इन विशेषताओं का उपयोग किया जाता है:

CSS फ़ाइल को संदर्भित करने के लिए: href="cssfile.css"लिंक टैग के अंदर।
जेएस फ़ाइल को संदर्भित करने के लिए: src="myscript.js"स्क्रिप्ट टैग के अंदर।
एक छवि फ़ाइल को संदर्भित करने के लिए: src="mypic.jpg"एक छवि टैग के अंदर।
किसी अन्य वेबपेज को संदर्भित करने के लिए: href="http://www.webpage.com"एंकर टैग के अंदर।

html

— Vijey
स्रोत

आपके इनपुट के लिए हर एक को धन्यवाद। इसलिए ऐसा लगता है कि इन दोनों के बीच कोई स्पष्ट अंतर नहीं है। मैं अधिक प्रतिक्रिया प्राप्त करने के लिए कुछ और समय की प्रतीक्षा करना चाहूंगा। ओड का अवलोकन मुझे कुछ हद तक स्वीकार्य लगता है।

— विजयी

2 के बीच एक अंतर है। मैंने उस विवरण को समझाने के लिए विवरण में अपना उत्तर लिखा है।

— १५

233

नोट: @ जॉन-यिन का जवाब चश्मा में परिवर्तन पर विचार करने के लिए अधिक उपयुक्त है।

हाँ। Src और href के बीच एक अंतर है और इनका उपयोग परस्पर नहीं किया जा सकता है। हम संदर्भित तत्वों और बाहरी संसाधन के बीच संबंध स्थापित करने के लिए href करते समय प्रतिस्थापित तत्वों के लिए src का उपयोग करते हैं ।

href (हाइपरटेक्स्ट रेफरेंस) विशेषता एक वेब संसाधन के स्थान को निर्दिष्ट करती है, जो वर्तमान तत्व (एंकर के मामले में a) या वर्तमान दस्तावेज़ (मामले में link) और गंतव्य एंकर या इस विशेषता द्वारा परिभाषित संसाधन के बीच एक संबंध या संबंध को परिभाषित करता है। जब हम लिखते हैं:

<link href="style.css" rel="stylesheet" />

ब्राउज़र समझता है कि यह संसाधन एक स्टाइलशीट है और ~~प्रसंस्करण~~पृष्ठ के पार्सिंग को रोका नहीं गया है (क्योंकि पेज को पेंट करने और रेंडर करने के लिए ब्राउज़र को शैली के नियमों की आवश्यकता होती है, तब रेंडर किया जा सकता है)। यह टैग के अंदर सीएसएस फ़ाइल की सामग्री को डंप करने के समान नहीं हैstyle । (इसलिए अपने HTML दस्तावेज़ में स्टाइलशीट संलग्न करने के linkबजाय उपयोग करना उचित है @import।)

src (स्रोत) विशेषता तत्व की परिभाषा के स्थान पर वर्तमान दस्तावेज़ में संसाधन को एम्बेड करती है। उदाहरण के लिए। जब ब्राउज़र मिल जाए

<script src="script.js"></script>

पृष्ठ को लोड करने और संसाधित करने को तब तक रोका जाता है जब तक कि ब्राउज़र फ़ाइल को प्राप्त, संकलित और निष्पादित नहीं करता है। यह scriptटैग के अंदर js फ़ाइल की सामग्री को डंप करने के समान है । ऐसा ही हाल imgटैग का भी है। यह एक खाली टैग और सामग्री है, जिसे इसके अंदर आना चाहिए, यह srcविशेषता द्वारा परिभाषित किया गया है। ब्राउज़र लोड होने तक रोक देता है जब तक कि वह छवि को लोड नहीं करता है और लोड नहीं करता है। [ऐसा ही मामला है iframe]

यही कारण है कि नीचे ( </body>टैग से पहले ) सभी जावास्क्रिप्ट फ़ाइलों को लोड करने की सलाह दी जाती है

अद्यतन : यह कैसे HTML 5 चश्मा के अनुसार लागू किया गया है के बारे में अधिक जानकारी के लिए @ जॉन-यिन का जवाब देखें ।

— apnerve
स्रोत

4

इस Apnerve के लिए धन्यवाद। यह मेरे लिए खबर थी।

— कायट नोव

ये टैग किस हद तक गति को प्रभावित करते हैं?

— एक्सपिनिन्जा

4

@expiredninja srcआमतौर पर फ़ाइल को क्रमिक रूप से hrefलोड करता है जबकि इसे समानांतर में लोड करता है। तो, कथित लोड समय बढ़ जाता है जब संसाधनों को क्रमिक रूप से लोड किया जाता है।

— apnerve

तो Google PageSpeed बाह्य CSS संदर्भों को अवरुद्ध करने की बात क्यों करता है? Developers.google.com/speed/docs/insights/OptimizeCSSDelivery

— फ्रीक

1

@ फ्रिक हां। बाहरी सीएसएस संदर्भ ब्लॉक प्रतिपादन और नहीं पार्स करने अधिकांश आधुनिक ब्राउज़र में FOUC (unstyled सामग्री का फ्लैश) से बचने के लिए।

— शाम

59

HTML 5 बाहर आने से पहले apnerve का जवाब सही था, अब यह थोड़ा और जटिल है।

उदाहरण के लिए, scriptतत्व, HTML 5 विनिर्देश के अनुसार , दो वैश्विक विशेषताएँ हैं जो यह बदलती हैं कि srcविशेषता कैसे कार्य करती है: asyncऔर defer। इन परिवर्तनों को स्क्रिप्ट (बाहरी इनलाइन या बाहरी फ़ाइल से आयात) को कैसे निष्पादित किया जाना चाहिए।

इसका मतलब है कि इन विशेषताओं का उपयोग करके तीन संभावित मोड चुने जा सकते हैं:

जब asyncविशेषता मौजूद है, तो जैसे ही यह उपलब्ध होगा, स्क्रिप्ट को एसिंक्रोनस रूप से निष्पादित किया जाएगा।
जब asyncविशेषता मौजूद नहीं है, लेकिन deferविशेषता मौजूद है, तब पृष्ठ निष्पादित होने पर स्क्रिप्ट निष्पादित हो जाती है।
जब न तो विशेषता मौजूद होती है, तो उपयोगकर्ता द्वारा पेज को जारी रखने से पहले स्क्रिप्ट को तुरंत लाया और निष्पादित किया जाता है।

जानकारी के लिए कृपया HTML 5 अनुशंसा देखें

मैं सिर्फ एक नए उत्तर के साथ अद्यतन करना चाहता था जो भी कभी-कभी इस विषय पर जाता है। कुछ उत्तरों की जाँच की जानी चाहिए और स्टैकओवरफ़्लो और हम में से हर एक द्वारा संग्रहीत किया जाना चाहिए।

— जॉन यिन
स्रोत

1

इसमें एक बड़ा अंतर है कि <a> 'href' का उपयोग कैसे करता है और <लिंक rel = "स्टाइलशीट"> कैसे करता है। <लिंक> को डाउनलोड करने के लिए संदर्भित-संसाधन की आवश्यकता होती है, इसलिए यह अनिवार्य रूप से उपयोगकर्ता के लिए प्रस्तुत पृष्ठ का हिस्सा बन जाता है, जबकि <a> अपने लक्ष्य को डाउनलोड करने के लिए तब तक कारण नहीं देता जब तक आप लिंक पर क्लिक नहीं करते। तो मैं कहूंगा कि <link> कम से कम स्टाइल-शीट के मामले में SHOULD (यदि यह हो सकता है) 'href' के बजाय 'src' का उपयोग कर सकता है। या इससे भी बेहतर <style> को 'src'-Feature JUST LIKE <script> करना चाहिए।

— पानू

17

मुझे लगता है कि <src>कुछ संसाधनों को पेज पर जोड़ा <href>जाता है और यह केवल एक संसाधन के लिए लिंक प्रदान करने के लिए है (केवल पेज पर संसाधन को जोड़े बिना)।

— जकी
स्रोत

6

सरल परिभाषा;

SRC : (Source). To specify the origin of (a communication); document:     

HREF : (Hypertext Reference). A reference or link to another page, document...

— Joberror
स्रोत

1

तो एक संदर्भ मूल निर्दिष्ट नहीं करता है?

— ब्रोडेव

4

SRC ( S ou rc e) - मैं इस संसाधन को अपने लिए लोड करना चाहता हूं।

उदाहरण के लिए:

Absolute URL with script element: <script src="http://googleapi.com/jquery/script.js"></script>   

Relative URL with img element : <img src="mypic.jpg">

HREF ( H ypertext REF erence) - मैं किसी और के लिए इस संसाधन का उल्लेख करना चाहता हूं।

उदाहरण के लिए:

Absolute URL with anchor element: <a href="http://www.google.com/">Click here</a>

Relative URL with link element: <link href="mystylesheet.css" type="text/css">

के सौजन्य से

— Premraj
स्रोत

3

H REF : क्या वर्तमान पृष्ठ के लिए सूचना के लिए एक REF स्तंभ है अर्थात पृष्ठ शैली या किसी अन्य पृष्ठ के लिंक के लिए css जानकारी। पेज पार्स करना बंद नहीं किया गया है।

SRC : चित्र या जावास्क्रिप्ट के रूप में पृष्ठ पर जोड़ा / लोड होने के लिए एक फिर से SOURCE है। पृष्ठ पार्सिंग कोडित विशेषता के आधार पर बंद हो सकती है। यही कारण है कि एंडिंग बॉडी टैग से ठीक पहले स्क्रिप्ट जोड़ना बेहतर है ताकि पेज रेंडरिंग आयोजित न हो।

— user3338350
स्रोत

2

यदि आप HTML4 की बात कर रहे हैं, तो इसकी विशेषताओं की सूची आपको सूक्ष्मता के साथ मदद कर सकती है। वे विनिमेय नहीं हैं।

— oeuftete
स्रोत

2

W3 से:

जब एक तत्व का href गुण सेट होता है, तो तत्व एक स्रोत एंकर को एक लिंक के लिए परिभाषित करता है जिसे उपयोगकर्ता द्वारा वेब संसाधन को पुनः प्राप्त करने के लिए सक्रिय किया जा सकता है। स्रोत एंकर ए उदाहरण का स्थान है और गंतव्य एंकर वेब संसाधन है।

स्रोत: http://www.w3.org/TR/html401/struct/links.html

यह विशेषता छवि संसाधन के स्थान को निर्दिष्ट करती है। व्यापक रूप से मान्यता प्राप्त छवि प्रारूपों के उदाहरणों में GIF, JPEG और PNG शामिल हैं।

स्रोत: http://www.w3.org/TR/REC-html40/struct/objects.html

— सरफराज
स्रोत

2

एक सरल परिभाषा

SRC: यदि कोई संसाधन शरीर टैग (छवि, स्क्रिप्ट, iframe, फ्रेम के लिए) के अंदर रखा जा सकता है
HREF: यदि किसी संसाधन को बॉडी टैग के अंदर नहीं रखा जा सकता है और केवल (html, css के लिए) लिंक किया जा सकता है

— kums
स्रोत

2

आप को याद रखना चाहिए जब हर कोई उपयोग करने के लिए और है कि यह है href लिंक के साथ प्रयोग किया जाता है

<a href="#"></a>
<link rel="stylesheet" href="style.css" />

src स्क्रिप्ट और छवियों के साथ प्रयोग किया जाता है

<img src="the_image_link" />
<script type="text/javascript" src="" />

यूआरएल आम तौर पर सीएसएस में कुछ शामिल करने के लिए, उदाहरण के लिए एक पृष्ठभूमि छवि को जोड़ने के लिए प्रयोग किया जाता है

selector { background-image: url('the_image_link'); }

— webNeat
स्रोत

2

HTML 5.1 ducumentation (1 नवंबर 2016) से गुजरने के बाद:

भाग 4 (HTML के तत्व)

अध्याय 2 (दस्तावेज़ मेटाडेटा)

धारा 4 (लिंक तत्व) में कहा गया है कि:

लिंक का गंतव्य hrefविशेषता द्वारा दिया गया है , जो मौजूद होना चाहिए और इसमें रिक्त स्थानों से घिरा एक वैध गैर-खाली URL होना चाहिए। यदि hrefविशेषता अनुपस्थित है, तो तत्व एक लिंक को परिभाषित नहीं करता है।

इसमें srcविशेषता नहीं है ...

चुड़ैल तार्किक है क्योंकि यह एक कड़ी है।

अध्याय 12 (स्क्रिप्टिंग)

खंड 1 (स्क्रिप्ट तत्व) में कहा गया है कि:

क्लासिक स्क्रिप्ट या तो इनलाइन एम्बेड की जा सकती हैं या उन्हें srcविशेषता का उपयोग करके किसी बाहरी फ़ाइल से आयात किया जा सकता है , जो निर्दिष्ट होने पर उपयोग करने के लिए बाहरी स्क्रिप्ट संसाधन का URL देता है। यदि srcनिर्दिष्ट किया गया है, तो यह रिक्त स्थानों से घिरा एक वैध गैर-खाली URL होना चाहिए। इनलाइन स्क्रिप्ट तत्वों की सामग्री, या बाहरी स्क्रिप्ट संसाधन, को क्लासिक स्क्रिप्ट के लिए जावास्क्रिप्ट विनिर्देशन स्क्रिप्ट उत्पादन की आवश्यकताओं के अनुरूप होना चाहिए।

यह भी hrefविशेषता का उल्लेख नहीं करता है ...

यह इंगित करता है कि स्क्रिप्ट टैग का उपयोग करते समय हमेशा srcविशेषता का उपयोग करें !!!

अध्याय 7 (एंबेडेड सामग्री)

धारा 5 (img तत्व)

छवि द्वारा दिए गए srcऔर srcsetगुण, और किसी भी पिछले भाई स्रोत तत्व के srcsetगुण यदि माता-पिता एक है pictureतत्व, एम्बेड की गई सामग्री है।

यह भी hrefविशेषता का उल्लेख नहीं करता है ...

यह इंगित करता है कि imgटैग का उपयोग करते समय srcविशेषता का उपयोग किया जाना चाहिए ...

W3C अनुशंसा के लिए संदर्भ लिंक

— गल रत्ज़किन
स्रोत

1

वे विनिमेय नहीं हैं - प्रत्येक को विभिन्न तत्वों पर परिभाषित किया गया है, जैसा कि यहां देखा जा सकता है ।

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

— Oded
स्रोत

1

नहीं, उनके समान अर्थ नहीं हैं और यह असंगतता नहीं है। srcटैग पृष्ठ के लिए संसाधन कहते हैं, जबकि hrefसिर्फ संसाधन के लिए एक लिंक प्रदान करता है और दस्तावेज़ के साथ एक रिश्ता स्थापित करता है।

— एपर्नेव

1

उनके समान अर्थ नहीं हैं। 'src' एक संसाधन को इंगित करता है जो ब्राउज़र को वर्तमान पृष्ठ के भाग के रूप में प्राप्त करना चाहिए। यदि उपयोगकर्ता अनुरोध करता है, तो HREF एक संसाधन को लाया जाना है।

— लोर्ने का मार्किस
स्रोत

3

जरूरी नहीं:<link href="foo.css" rel="stylesheet" type="text/css">

— rolvaro González

@EJP सही है सिवाय इसके कि hrefयदि कोई संसाधन उपयोगकर्ता-एजेंट से अनुरोध करता है तो उसे लाया जाना चाहिए । स्टाइलशीट को वर्तमान दस्तावेज़ के भाग के रूप में नहीं लाया गया है।

— 14

0

मैं सहमत हूं कि Apnerve भेद पर क्या कहता है। लेकिन सीएसएस के मामले में यह अजीब लगता है। जैसा कि css भी ब्राउजर द्वारा क्लाइंट को डाउनलोड किया जाता है। यह एंकर टैग की तरह नहीं है जो किसी विशिष्ट संसाधन की ओर इशारा करता है। इसलिए href का उपयोग करना मुझे अजीब लगता है। भले ही उस पृष्ठ के बिना पृष्ठ के साथ लोड न होने पर भी वह पूर्ण न दिखे और इसलिए उसका संबंध ही नहीं बल्कि संसाधन की तरह है जो बदले में छवियों जैसे कई अन्य संसाधनों को संदर्भित करता है।

— जीत
स्रोत

जब आपको लगता है कि दस्तावेज़ CSSका एक हिस्सा है HTML, तो आप आगे बढ़ने और नियम के styleसाथ टैग का उपयोग कर सकते हैं @import। इसके प्रदर्शन पर परिणाम हो सकते हैं लेकिन इस परिदृश्य में उचित समझ में आता है।

— apnerve

0

src का उपयोग उस संसाधन को पेज में जोड़ने के लिए किया जाता है, जबकि उस पेज से किसी विशेष संसाधन से लिंक करने के लिए href का उपयोग किया जाता है।

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

जब आप अपने वेबपेज में उपयोग करते हैं, तो यह स्थान पर संसाधन सम्मिलित करने के लिए ब्राउज़र को बताता है। तो अब ब्राउज़र को js फाइल लाना है और फिर लोड करना है। जब तक ब्राउज़र लोडिंग प्रक्रिया को पूरा नहीं करता, तब तक पेज रेंडरिंग प्रक्रिया रुकी हुई है। यही कारण है कि YUI आपके जेएस फाइलों को आपके वेब पेज के बहुत नीचे लोड करने की सलाह देता है।

— ललित भाकुनी
स्रोत