HTML (<a>) হাইপারলিংক এলিমেন্টের বেসিক শিখুন যা ওয়েবে ইন্টারঅ্যাক্টিভ লিংক ডিফাইন করতে ব্যবহৃত হয়।
HTML-এ, <a> ট্যাগ লিংক/হাইপারলিংক এলিমেন্ট ডিফাইন করতে ব্যবহৃত হয়:
<a>লিংক এলিমেন্ট</a>লিংক এলিমেন্টকে এ্যাঙ্কর এলিমেন্টও বলা হয়।
লিংক vs হাইপারলিংক:
- একটি লিংক হলো একটি অ্যাড্রেস যা ইন্টারনেট上的 একটি লোকেশন নির্দিষ্ট করে।
- একটি হাইপারলিংক হলো একটি লিংকের ধরন যাতে ক্লিক করলে কিছু এক্টিভেট হয় বা কোনো ডেস্টিনেশন যেমন ওয়েবসাইট-এ যাওয়া যায়।
কনভারসেশনে অধিকাংশ লোক "হাইপারলিংক" এবং "লিংক" একই অর্থে ব্যবহার করে।
'a' এলিমেন্ট কীভাবে ব্যবহার করবেন
<a> এলিমেন্টটি বেশ কিছু অ্যাট্রিবিউট নেয়, যার মধ্যে সবচেয়ে গুরুত্বপূর্ণ হচ্ছে href অ্যাট্রিবিউট, যা ব্যবহারকারী ক্লিক করলে লিংক (URL) ডেস্টিনেশন প্রদান করে।
এখানে একটি লিংকের উদাহরণ যা ক্লিক করলে TechStacker-এর ফ্রন্ট পেজে নিয়ে যাবে:
<a href="https://techstacker.com">TechStacker-এর ফ্রন্ট পেজে যান।</a>উপরের লিংকটিতে এই বিল্ডিং ব্লকগুলো আছে:
- ওপেনিং লিংক ট্যাগ
<a> - অ্যাট্রিবিউট নাম:
href - অ্যাট্রিবিউট ভ্যালু:
"https://techstacker.com"(লিংক URL/ডেস্টিনেশন) - লিংক টেক্সট
TechStacker-এর ফ্রন্ট পেজে যান।(ব্যবহারকারীর কাছে দৃশ্যমান) - ক্লোজিং লিংক ট্যাগ
</a>
উপরের লিংকটি রিয়েল লাইফে কেমন দেখাবে:
TechStacker-এর ফ্রন্ট পেজে যান।
অ্যাবসোলিউট vs রিলেটিভ URLs
অ্যাট্রিবিউট ভ্যালু (লিংক/URL ডেস্টিনেশন) হতে পারে অ্যাবসোলিউট বা রিলেটিভ URL পাথ। আগের উদাহরণটি একটি অ্যাবসোলিউট URL:
<a href="https://techstacker.com">TechStacker-এর ফ্রন্ট পেজে যান।</a>এটি একটি রিলেটিভ URL যা এই ওয়েবসাইটের একটি আর্টিকেলে নিয়ে যায়:
<a href="/html-tags-vs-html-elements-difference" >HTML Tags vs. HTML Elements.</a >উसी আর্টিকেলের একটি অ্যাবসোলিউট URL:
<a href="https://techstacker.com/html-tags-vs-html-elements-difference" >HTML Tags vs. HTML Elements.</a >দেখুন অ্যাবসোলিউট URL-টিতে রিলেটিভ URL-এর চেয়ে বেশি ইনফরমেশন আছে:
- এতে প্রোটোকল আছে (
https) - একটি ডোমেইন নেম
techstacker.com - একটি স্লাগ
/html-tags-vs-html-elements-difference
রিলেটিভ URL-এ শুধু স্লাগ থাকে।
তাহলে কখন কোনটি ব্যবহার করবেন?
- আপনার নিজের ওয়েবসাইটের কন্টেন্টে লিংক করার সময় রিলেটিভ URLs ব্যবহার করুন।
- অন্য ওয়েবসাইটের কন্টেন্টে লিংক করার সময় অ্যাবসোলিউট URLs ব্যবহার করুন।
রিলেটিভ URLs শুধু তখন ব্যবহার করতে পারবেন যখন কন্টেন্ট একই সার্ভার-এ থাকে যেখানে আপনার ওয়েবসাইট হোস্টেড। অন্যথায় অ্যাবসোলিউট URLs ব্যবহার করুন।
যদি HTML ট্যাগ এবং HTML এলিমেন্টের পার্থক্য নিয়ে বিভ্রান্ত হন, তবে HTML Tags vs. HTML Elements আর্টিকেলটি পড়তে পারেন।
এখন আরেকটি কমন এবং গুরুত্বপূর্ণ অ্যাট্রিবিউট আছে, বিশেষ করে SEO-এর জন্য।
target অ্যাট্রিবিউট
লিংক এলিমেন্টের আরেকটি কাজের অ্যাট্রিবিউট হচ্ছে target অ্যাট্রিবিউট, যা নির্দিষ্ট করে ব্যবহারকারী ক্লিক করলে লিংক কোথায় খুলবে।
আপনি যদি এই লিংকে ক্লিক করেন:
<a href="https://techstacker.com/">ফ্রন্ট পেজের লিংক</a>তাহলে আপনি TechStacker-এর ফ্রন্ট পেজে একই ব্রাউজার ট্যাব/উইন্ডোতে যাবেন যেখানে আপনি এখন আছেন। এর মানে যদি আপনি অন্য ওয়েবসাইটে লিংক দেন, তবে ইউজার আপনার ওয়েবসাইট থেকে সরিয়ে আপনার লিংক করা ওয়েবসাইটে চলে যাবে (যা আপনি চাইতে পারেন বা নাও পারেন)।
এটি হয় কারণ ডিফল্টভাবে <a> এলিমেন্টের target অ্যাট্রিবিউট থাকে যার ভ্যালু _self — মানে এটি লিংকটি একই উইন্ডোতে খোলে যেখানে ইউজার আছে।
তাই এই লিংক এলিমেন্ট:
<a href="https://techstacker.com/"></a>ব্রাউজার/কম্পিউটার এটি এভাবে পড়ে:
<a href="https://techstacker.com/" target="_self"></a>যা বিভ্রান্তিকর হতে পারে, কারণ আপনি সেটি দেখতে পান না (এখন জানেন)।
আপনি যদি চান আপনার লিংকগুলো নতুন ব্রাউজার ট্যাবে খুলে, তবে ডিফল্ট _self ভ্যালুকে _blank ভ্যালু দিয়ে ওভাররাইড করতে পারেন:
<a href="https://youtube.com" target="_blank" rel="noopener" >এই লিংকে ক্লিক করলে YouTube নতুন ট্যাবে খুলবে</a >কখন কোনটি ব্যবহার করবেন
সিম্পল উত্তর: আপনি যদি ইউজারকে আপনার ওয়েবসাইট থেকে সরিয়ে নিতে না চান (যেমন SEO-এর জন্য), তবে target="_blank" ব্যবহার করুন।
অন্যথায় কিছু করবেন না, আপনার লিংক ডিফল্টভাবে একই ব্রাউজার উইন্ডোতে খুলবে (via _self ভ্যালু)।
হেডিংকে লিংক হিসেবে ব্যবহার করা
অনেক HTML এলিমেন্ট লিংক হিসেবে ব্যবহার করা যায়, হেডিংসহ। এটা খুব কমন। আপনি শুধু যে এলিমেন্টকে লিংক বানাতে চান সেটিকে লিংক ট্যাগ <a></a> দিয়ে র্যাপ করুন:
<a href="/html-for-beginners"> <h3>HTML for Beginners</h3> </a>ইমেজকে লিংক হিসেবে ব্যবহার করা
লিংক এলিমেন্ট ইমেজকেও লিংক বানাতে পারে, যেমন থাম্বনেইল বা আর্টিকেল বা প্রোডাক্ট পেজের জন্য। সেটি করতে আপনার ইমেজ এলিমেন্ট <img > লিংক এলিমেন্ট <a></a> দিয়ে র্যাপ করুন:
<a href="/tags/html"> <img src="../../thumbnails/html.png" /> </a>উপরের উদাহরণে ইউজার ইমেজে ক্লিক করলে এই HTML আর্টিকেল সেকশনে যাবে।
রিয়েল লাইফে কেমন দেখাবে (ক্লিক করে দেখুন):
