<a href="https://example.com" target="_blank">Visit Example</a>Opening a Page in New Window or Tab, Linking to an Area of Same Page in Hindi
किसी Page को नई Window या Tab में खोलना
HTML में जब हम चाहते हैं कि कोई link click करने पर new tab या window में खुले, तो हम <a> tag में target="_blank" attribute का उपयोग करते हैं।
इस attribute से browser को यह instruction मिलता है कि link को उसी tab में नहीं बल्कि नए tab या window में open करना है।
ऊपर दिए गए code में, जैसे ही user "Visit Example" पर click करेगा, site एक नए tab में खुलेगी और पुराना page वैसा का वैसा बना रहेगा।
यह तरीका उन situations में बहुत useful होता है जब आप चाहते हैं कि user आपकी वेबसाइट छोड़े बिना किसी external resource को देख सके।
साथ ही, security के लिए अक्सर rel="noopener noreferrer" attribute भी target="_blank" के साथ add किया जाता है।
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open Safely</a>- noopener browser को नए tab से current tab को access करने से रोकता है।
- noreferrer browser को referral data भेजने से रोकता है।
इससे आपके site की performance और security दोनों safe रहती हैं, खासकर जब external websites को open किया जा रहा हो।
Linking to an Area of Same Page in HTML - HTML मे Same Page को एक area से link करना
HTML में हम किसी same page के किसी खास हिस्से पर jump करने के लिए link बना सकते हैं। इसे "internal linking" या "anchor link" कहा जाता है।
इस तरह के link में हम page के किसी हिस्से को एक id देते हैं, और फिर link में उस id को reference करते हैं।
<a href="#section2">Go to Section 2</a>ऊपर दिए गए link में #section2 लिखा है, जिसका मतलब है कि user page के उस हिस्से पर पहुंचेगा जिसकी id "section2" है।
अब जहां आपको scroll कराना है, उस element को एक unique id देनी होगी:
<h2 id="section2">This is Section 2</h2>जब user "Go to Section 2" पर click करेगा, तो page सीधे इस heading तक scroll हो जाएगा। यह तरीका long pages या FAQ sections में बहुत useful होता है।
आप page के किसी भी element जैसे <div>, <p>, <h1> आदि को id दे सकते हैं और link से jump करा सकते हैं।
HTML Example
<!DOCTYPE html>
<html>
<head>
<title>Link Example Page</title>
</head>
<body>
<h1>Welcome to My Demo Page</h1>
<!-- Link to open in new tab --<
<p>
Visit
<a href="https://example.com" target="_blank" rel="noopener noreferrer"<
Example.com in new tab
</a>
</p>
<!-- Link to jump to another section in same page -->
<p>
<a href="#about">Jump to About Section</a>
</p>
<!-- Some content to create scrolling -->
<p>This is a Paragraph</p>
<p>This is a Paragraph</p>
<p>This is a Paragraph</p>
<p>This is a Paragraph</p>
<p>This is a Paragraph</p>
<p>This is a Paragraph</p>
<p>This is a Paragraph</p>
<p>This is a Paragraph</p>
<!-- Target section -->
<h2 id="about">About Section</h2>
<p>This is the About section of the same page. You have successfully jumped here using internal link.</p>
<!-- Link to go back to top -->
<p>
<a href="#top">Back to Top</a>
</p>
<!-- Top section ID -->
<div id="top"></div>
</body>
</html>Request
अगर आपको यह article useful या interesting लगा हो, तो please इसे अपने dosto aur family ke साथ जरूर share करें। आपका एक छोटा सा कदम हमें और अच्छा content बनाने के लिए motivate करता है। Thank you!
ध्यान दें कि इस page पर आपको कुछ ads भी देखने को मिल सकते हैं। इसके लिए हम आपसे माफी चाहते हैं। हम इस content को तैयार करने में काफी मेहनत और time लगाते हैं, ताकि आपको valuable जानकारी मिल सके। इन्हीं ads की मदद से हम ये काम continue कर पाते हैं।
आपके support और understanding के लिए दिल से धन्यवाद।
