ভূমিকা
ওয়েবের মূল শক্তি হলো লিংক — এক পেজ থেকে অন্য পেজে, এক সাইট থেকে অন্য সাইটে, কিংবা ইমেইলে বা পেজেরই নির্দিষ্ট অংশে নেভিগেট করাতে লিংক ব্যবহার করা হয়। HTML-এ লিংক তৈরি করা হয় <a> (anchor) ট্যাগ দিয়ে। এই পোস্টে আমরা লিংকের ধরন, অ্যাট্রিবিউট, উদাহরণ ও ভালো চর্চা দেখবো।
মূল ট্যাগ
মুল ট্যাগ <a> (Anchor)
<a href="URL">লিংক টেক্সট</a>
- href (required) — লিংক গন্তব্য (URL বা URI)।
- লিংক টেক্সট বা এলিমেন্ট যা ক্লিক করলে ভিজিট হবে।
Absolute vs Relative URLs
Absolute URL: পুরো ওয়েব ঠিকানা (প্রটোকল সহ)
Relative URL: একই সাইটের ফাইল রিলেটিভ পাথ
নতুন ট্যাবে খুলতে (Open in new tab)
target="_blank"— নতুন ট্যাবে লোড করে।সিকিউরিটি টিপ: external লিংকে
rel="noopener noreferrer"ব্যবহার করা উচিত — performance ও security এর জন্য।
ই-মেল ও ফোন লিংক
Email (mailto):
Phone (tel):
ডাউনলোড লিংক (Download attribute)
downloadattribute দিলে ব্রাউজার ডাউনলোড ইনিশিয়েট করবে (সাপোর্টেড ফাইল হলে)।
ফ্র্যাগমেন্ট/আনকার লিংক (Page fragments / Internal anchors)
পেজের ভেতরের নির্দিষ্ট জায়গায় লাফ দেওয়ার জন্য
idব্যবহার করুন:
লিংককে বাটন বা ইমেজ বানানো
বাটন স্টাইল লিংক:
ইমেজ লিংক:
অ্যাক্সেসিবিলিটি (Accessibility) টিপস
লিংক টেক্সট স্পষ্ট রাখুন — avoid “click here” বা “read more” একাই; বরং বর্ণনামূলক টেক্সট ব্যবহার করুন।
বদলে বলুন:Download the 2025 Report (PDF)যদি লিংক ইমেজ হয়,
altদিন।নন-টেক্সট লিংকের জন্য
aria-labelব্যবহার করুন, যদি টেক্সট বোঝানো না যায়:
SEO ও UX টিপস
- External লিংকগুলো rel="nofollow" বা rel="ugc" প্রয়োজনে ব্যবহার করুন — তবে সাধারণ রেফারেন্স লিংকের জন্য যাওয়া উচিত নয়।
- আউটবাউন্ড লিংক নতুন ট্যাবে খুললে ইউজার সাইটে বেশি সময় কাটায়। কিন্তু অতিরিক্ত নতুন ট্যাব খুললে কনফিউশন বাড়তে পারে — সুতরাং সিদ্ধান্ত নেবেন কনটেক্সট অনুযায়ী।
- লিংকের টেক্সট (anchor text) সার্চ ইঞ্জিনকে কনটেন্ট সম্পর্কে সংকেত দেয় — স্পষ্ট ও সংক্ষিপ্ত রাখুন।
প্রয়োজনীয় উদাহরণ (Complete examples)
<!-- External link in new tab with security --><!– Internal relative link –>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
<a href=“/blog/html-tutorial”>HTML Tutorial</a><!– Email –>
<a href=“mailto:hello@rezablogbd.com”>Email us</a>
<!– Telephone –>
<a href=“tel:+8801712345678”>Call +8801712345678</a>
<!– Download –>
<a href=“/files/guide.pdf” download>Download Guide (PDF)</a>
<!– Fragment –>
<a href=“#features”>See Features</a>
<!– Accessible icon link –>
<a href=“/profile” aria-label=“Go to your profile”>
<img src=“profile-icon.svg” alt=“”>
</a>
ভালো চর্চা (Best Practices Summary)
- লিংক টেক্সট স্পষ্ট ও বর্ণনামূলক রাখুন।
- External লিংকে rel="noopener noreferrer" ব্যবহার করুন।
- ইমেইল/ফোন লিংক দিলে মোবাইল থেকে সুবিধা হবে।
- Internal ও relative URLs ব্যবহার করুন ডেভেলপমেন্ট ও ডিপ্লয়মেন্ট সহজ করতে।
- SEO ও accessibility মাথায় রেখে লিংক ডিজাইন করুন।
