লিংক আর path — absolute, relative আর পেজের ভেতরে লাফ

১ · লিংক — যে জিনিসটি ওয়েবকে “ওয়েব” বানায়

পর্ব ০১-এ দেখেছেন, ব্রাউজার একটি ঠিকানা থেকে HTML ফাইল এনে পাতা আঁকে। কিন্তু একটি পাতা থেকে আরেকটিতে যাওয়ার পথ কে দেখায়? সেই কাজ hyperlink-এর, সংক্ষেপে লিংক। “World Wide Web” নামের “Web” মানে মাকড়সার জাল — কোটি কোটি পাতা, একে অপরের সাথে লিংকের সুতায় বাঁধা। লিংক না থাকলে প্রতিটি পাতা হতো একটি বিচ্ছিন্ন দ্বীপ।

HTML-এ লিংক বানায় anchor element — <a>. আর ঠিকানাটি থাকে href attribute-এ (পর্ব ০৩-এ attribute চিনেছেন)। href এসেছে “hypertext reference” থেকে।

<a href="https://www.bangladesh.gov.bd/">বাংলাদেশ জাতীয় তথ্য বাতায়ন</a>

• <a> — একটি inline element (পর্ব ০৪), তাই বাক্যের ভেতরেই বসে। আধুনিক HTML-এ এর ভেতরে পুরো একটি কার্ড, ছবি বা heading-ও রাখা যায় — শর্ত একটাই, ভেতরে আরেকটি লিংক বা বাটন থাকবে না।
• href — কোথায় যাবে। এটি না থাকলে <a> আর লিংক থাকে না: ক্লিক হয় না, কিবোর্ডের Tab দিয়ে সেখানে পৌঁছানোও যায় না।
• ভেতরের লেখা — যা দেখা যায়, যাতে ক্লিক করা হয়, আর screen reader যা পড়ে শোনায়। এটি সাজসজ্জা নয়, লিংকের নাম। অংশ ৭-এ এর গুরুত্ব দেখবেন।

ব্রাউজার নিজে থেকে লিংককে নীল রঙে আর নিচে দাগ দিয়ে দেখায়; ঘুরে আসা লিংক হয় বেগুনি। এই চেহারা CSS দিয়ে বদলানো যায় (:hover, :focus-visible আসছে পর্ব ৩৪-এ), কিন্তু একটি নিয়ম মনে রাখুন: লিংক যেন আশপাশের লেখা থেকে শুধু রঙে নয়, দাগ বা অন্য কোনো চিহ্নেও আলাদা বোঝা যায় — যাঁরা রং ভালো দেখেন না, তাঁদের জন্য।

২ · URL-এর শরীর — scheme, host, path, query, fragment

href-এ যা লেখেন, তা একটি URL (Uniform Resource Locator) — ওয়েবে যেকোনো জিনিসের ঠিকানা। চিঠির খামের ঠিকানার মতোই এর কয়েকটি অংশ আছে: দেশ, জেলা, থানা, বাড়ি নম্বর, প্রাপকের নাম। নিচের ডায়াগ্রামে একটি অনলাইন দোকানের ঠিকানা ভেঙে দেখুন (amardokan.example একটি কাল্পনিক ঠিকানা)।

ব্রাউজার URL-কে ঠিক এভাবেই টুকরো করে পড়ে। JavaScript-এর URL নামের একটি built-in টুল দিয়ে সেটি নিজের চোখে দেখা যায় — JavaScript না জানলেও চলবে, শুধু “চালিয়ে দেখুন” চাপুন আর ফলটি পড়ুন:

// ব্রাউজার একটি URL-কে যেভাবে ভাগ করে পড়ে
const u = new URL('https://shop.amardokan.example:443/products/rice.html?size=5kg&brand=chinigura#reviews');
console.log('protocol :', u.protocol);
console.log('hostname :', u.hostname);
console.log('port     :', JSON.stringify(u.port));
console.log('pathname :', u.pathname);
console.log('search   :', u.search);
console.log('hash     :', u.hash);
console.log('size =', u.searchParams.get('size'));
console.log('href     :', u.href);
// বাংলা বা ফাঁকা জায়গা থাকা ফাইলের নাম ঠিকানায় কেমন হয়?
console.log(new URL('ঈদ অফার.html', u).pathname);

৩ · Absolute, relative আর root-relative path

নিজের সাইটের এক পাতা থেকে আরেক পাতায় লিংক দিতে প্রতিবার পুরো ঠিকানা লেখার দরকার নেই। ঠিকানা লেখার তিনটি উপায় আছে, আর পার্থক্যটা হলো “কোথা থেকে হিসাব শুরু”।

সবচেয়ে বেশি ভুল হয় relative path-এ, তাই একটি ফোল্ডার-গাছ ধরে ধাপে ধাপে দেখি। ধরুন আপনি আছেন blog/posts/eid-recipe.html পাতায়, আর সেখান থেকে নানা ফাইলে লিংক দিচ্ছেন। প্রতি ধাপে বাঁ দিকে উজ্জ্বল লাইনটি হলো যে ফাইলে গিয়ে পৌঁছাল:

1amardokan/          ← সাইটের root ( / )2├── index.html3├── about.html4├── css/5│   └── style.css6├── images/7│   └── logo.png8└── blog/9    ├── index.html10    └── posts/11        ├── eid-recipe.html  ← আপনি12        └── photo.jpg

এবার একই হিসাব ব্রাউজারকে দিয়ে করিয়ে নিই। নিচের কোড প্রতিটি href-কে eid-recipe.html পাতার সাপেক্ষে পুরো ঠিকানায় বদলে দেখায় — শেষ দুটি লাইনে দুটি চমক আছে:

// আপনি আছেন এই পাতায় — প্রতিটি href এর সাপেক্ষে মেলানো হবে
const page = 'https://amardokan.example/blog/posts/eid-recipe.html';
const hrefs = ['photo.jpg', './photo.jpg', '../index.html', '../../about.html',
  '/images/logo.png', '../../../../index.html', '#ingredients', '?lang=en',
  '//cdn.example/app.js', 'blog/posts/photo.jpg', 'C:\\site\\logo.png'];
for (const h of hrefs) {
  console.log(h.padEnd(22), '→', new URL(h, page).href);
}

যে তিনটি ফাঁদে সবাই একবার পড়ে

৪ · পাতার ভেতরে লাফ — fragment, id আর :target

লম্বা একটি পাতা — রেসিপি, নিয়মকানুন, প্রশ্নোত্তর। ওপরে একটি সূচিপত্র থাকলে পাঠক এক ক্লিকে নিজের দরকারি অংশে চলে যেতে পারেন। এর জন্য দুটি জিনিস লাগে: যেখানে পৌঁছাতে চান সেই element-এ একটি id, আর লিংকের href-এ # আর সেই id.

<a href="#steps">রান্নার ধাপে যান</a>
…
<section id="steps"> … </section>

ক্লিক করলে ভেতরে ঠিক কী ঘটে, ধাপে ধাপে দেখুন:

এবার নিজে চালিয়ে দেখুন। নিচের প্রিভিউতে সূচিপত্রের লিংকগুলোতে ক্লিক করুন — প্রিভিউর ভেতরে পাতাটি স্ক্রল হবে, আর পৌঁছানো অংশটি হলুদ হবে:

<!doctype html>
<html lang="bn">
<head>
  <meta charset="utf-8">
  <title>ঈদের সেমাই</title>
  <style>
    section { min-height: 240px; border-top: 1px solid #ccc; }
    :target { background: #fff3b0; }
  </style>
</head>
<body>
  <h1 id="top">ঈদের সেমাই রেসিপি</h1>
  <nav>
    <a href="#ingredients">উপকরণ</a> |
    <a href="#steps">রান্নার ধাপ</a> |
    <a href="#tips">টিপস</a>
  </nav>
  <section id="ingredients"><h2>উপকরণ</h2>
    <p>সেমাই ২০০ গ্রাম, দুধ ১ লিটার, চিনি আর এলাচ</p></section>
  <section id="steps"><h2>রান্নার ধাপ</h2>
    <p>ঘিয়ে সেমাই হালকা ভেজে ফুটন্ত দুধে দিন</p>
    <a href="#top">↑ উপরে ফিরুন</a></section>
  <section id="tips"><h2>টিপস</h2>
    <p>দুধ ঘন হলে নামিয়ে বাদাম ছড়িয়ে দিন</p>
    <a href="#">↑ একদম শুরুতে</a></section>
</body>
</html>

অন্য পাতার নির্দিষ্ট জায়গায়, আর আরও কিছু কৌশল

• অন্য পাতার ভেতরের অংশ: href="faq.html#delivery" — আগে faq.html লোড হবে, তারপর id="delivery"-তে স্ক্রল। এই সাইটের প্রতিটি পর্বের অংশেও এমন লিংক দেওয়া যায় — যেমন links-paths.html#s4.
• ওপরে sticky header থাকলে লাফ দেওয়া heading-টি header-এর নিচে ঢাকা পড়ে। সমাধান CSS-এ: scroll-margin-top: 4rem; — Baseline Widely available, অর্থাৎ সব আধুনিক ব্রাউজারে বহুদিন ধরে চলে। আর মসৃণ স্ক্রলের scroll-behavior: smooth আসবে পর্ব ৪২-এ।
• id-র নিয়ম: পুরো পাতায় একটি id একবারই থাকবে; ভেতরে ফাঁকা জায়গা চলবে না; অর্থবহ, ছোট নাম দিন — delivery-charge, s4.
• লেখার টুকরোয় লাফ (text fragment): #:~:text=ডেলিভারি দিলে ব্রাউজার পাতার ওই শব্দটি খুঁজে হাইলাইট করে, id ছাড়াই। Chrome-এ কোনো লেখা সিলেক্ট করে “Copy link to highlight” চাপলে এমন লিংক তৈরি হয়। এটি তুলনামূলক নতুন ফিচার, প্রধান ব্রাউজারগুলোতে ধাপে ধাপে এসেছে — না চললে সাধারণ লিংকের মতো শুধু পাতাটি খোলে, তাই ক্ষতি নেই।

৫ · বিশেষ লিংক — ইমেইল, ফোন, WhatsApp আর ডাউনলোড

লিংক শুধু পাতায় যায় না। scheme বদলালে লিংক অন্য অ্যাপকেও ডাকতে পারে — ছোট ব্যবসার সাইটে এগুলোই সবচেয়ে বেশি কাজে লাগে।

নিচের প্রিভিউতে একটি দোকানের যোগাযোগ-অংশ। ছোট একটি CSS কৌশল (attr(href)) প্রতিটি লিংকের পাশে তার আসল href-টি ধূসর রঙে দেখিয়ে দিচ্ছে — যাতে লেখা আর ঠিকানা পাশাপাশি দেখা যায়। এখানে ক্লিক নয়, গঠন দেখাই উদ্দেশ্য:

<style>
  a::after { content: "  ⟶ " attr(href); color: #666; font-size: .8em; }
  a[target="_blank"]::after { content: "  ⟶ " attr(href) " (নতুন ট্যাবে)"; }
  a[href^="tel:"]::before { content: "📞 "; }
  li { margin: 6px 0; }
</style>
<h3>রহিম স্টোর — যোগাযোগ</h3>
<ul>
  <li><a href="mailto:info@rahimstore.example?subject=Order%20query">info@rahimstore.example-এ ইমেইল করুন</a></li>
  <li><a href="tel:+8801712345678">ফোন: ০১৭১২-৩৪৫৬৭৮</a></li>
  <li><a href="https://wa.me/8801712345678">WhatsApp-এ মেসেজ দিন</a></li>
  <li><a href="price-list.pdf" download="rahim-store-prices.pdf">দামের তালিকা (PDF, ১২০ KB)</a></li>
  <li><a href="https://www.openstreetmap.org/" target="_blank" rel="noopener noreferrer">ম্যাপে দোকান খুঁজুন</a></li>
</ul>

৬ · নতুন ট্যাবে খোলা আর rel — নিরাপত্তা আর SEO

target="_blank" দিলে লিংক নতুন ট্যাবে খোলে। শুনতে নিরীহ, কিন্তু অনেক বছর ধরে এর ভেতরে একটি নিরাপত্তা-ফাঁক লুকিয়ে ছিল, যার নাম tabnabbing. ধাপে ধাপে দেখুন:

তাহলে noreferrer কেন? ব্রাউজার সাধারণত নতুন সাইটকে জানায় পাঠক কোন পাতা থেকে এসেছেন — একটি Referer header-এ। noreferrer এই তথ্যটি পাঠাতে দেয় না (আর সাথে noopener-এর কাজও করে)। আধুনিক ব্রাউজারের ডিফল্ট নীতিতে অন্য সাইটে এমনিতেই শুধু ডোমেইনটুকু যায়, পুরো ঠিকানা নয়। তাই noreferrer তখনই দিন, যখন সত্যিই চান না অন্য সাইট জানুক আপনি পাঠিয়েছেন — মনে রাখবেন, এতে তাদের পরিসংখ্যানে আপনার সাইট আর দেখা যাবে না।

rel দিয়ে সার্চ ইঞ্জিনকে লিংকের পরিচয় জানানো

Google-এর মতো সার্চ ইঞ্জিন লিংককে একরকম “ভোট” হিসেবে দেখে — অনেক ভালো সাইট যে পাতায় লিংক দেয়, সেটিকে গুরুত্বপূর্ণ ধরে। SEO-র এই জগতে সৎ থাকতে rel attribute দিয়ে লিংকের ধরন জানানো হয়:

একাধিক মান ফাঁকা দিয়ে একসাথে দেওয়া যায়: rel="ugc nofollow". এগুলো ব্রাউজারের আচরণ বদলায় না — ক্লিক করলে লিংক আগের মতোই খোলে; শুধু সার্চ ইঞ্জিনের কাছে একটি ইঙ্গিত। টাকা নিয়ে দেওয়া লিংক না জানালে Google-এর নিয়ম ভাঙে, আর সাইটের র‍্যাংকিং ক্ষতিগ্রস্ত হতে পারে — freelancing-এ “guest post বিক্রি”-র কাজ নেওয়ার আগে এটি জেনে রাখুন। head-এর SEO বিষয়গুলো বিস্তারিত আসছে পর্ব ১৩-এ।

৭ · সবার জন্য লিংক — ভালো লিংক টেক্সট, আর লিংক বনাম বাটন

যাঁরা চোখে দেখেন না, তাঁরা screen reader দিয়ে ওয়েব ব্যবহার করেন — একটি সফটওয়্যার, যা পাতার লেখা জোরে পড়ে শোনায় (Windows-এ ফ্রি NVDA, ফোনে TalkBack বা VoiceOver). পাতা দ্রুত বুঝতে তাঁরা প্রায়ই শুধু লিংকগুলোর একটি তালিকা খোলেন (NVDA-তে Insert+F7). তখন আশপাশের বাক্য থাকে না — থাকে শুধু লিংকের লেখা, অর্থাৎ লিংকের accessible name.

নিচের প্রিভিউতে একই চারটি লিংক দুইভাবে লেখা। ছোট একটি স্ক্রিপ্ট screen reader-এর মতো করে সব লিংকের নাম একটি তালিকায় দেখাবে (প্রিভিউর নিচে):

<p>ঈদ অফার চলছে! <a href="offer.html">এখানে ক্লিক করুন</a></p>
<p>ডেলিভারির নিয়ম জানতে <a href="delivery.html">এখানে ক্লিক করুন</a></p>
<p>ফেরত দেওয়ার নিয়ম — <a href="return.html">আরও পড়ুন</a></p>
<p><a href="cart.html"><svg width="22" height="22"><circle cx="11" cy="11" r="9" fill="teal"/></svg></a></p>
<hr>
<p><a href="offer.html">ঈদ অফারের সব পণ্য দেখুন</a></p>
<p><a href="delivery.html">ঢাকার বাইরে ডেলিভারির খরচ ও সময়</a></p>
<p><a href="return.html">পণ্য ফেরত দেওয়ার নিয়ম</a></p>
<p><a href="cart.html" aria-label="কার্ট দেখুন"><svg width="22" height="22" aria-hidden="true"><circle cx="11" cy="11" r="9" fill="teal"/></svg></a></p>
<script>
  // screen reader-এর "লিংকের তালিকা" যেমন শোনায়
  let k = 1;
  for (const a of document.querySelectorAll('a')) {
    const label = a.getAttribute('aria-label') || a.textContent.trim() || '(নাম নেই!)';
    console.log(k++ + '. ' + label);
  }
</script>

লিংক নাকি বাটন — কাজ দেখে ঠিক করুন

দেখতে একটি নীল লেখা আর একটি ধূসর বাক্স — কিন্তু আসল পার্থক্য চেহারায় নয়, কাজে। লিংক (<a href>) মানে কোথাও যাওয়া — অন্য পাতা, অন্য অংশ, একটি ফাইল। বাটন (<button>) মানে এখানেই কিছু করা — কার্টে যোগ, মেনু খোলা, ফর্ম জমা। ব্রাউজার দুটিকে আলাদা সুবিধা দেয়:

<style>
  .fake { display: inline-block; padding: 2px 8px; background: #ddd; cursor: pointer; }
</style>
<h3>চিনিগুঁড়া চাল — ৫ কেজি, ৳৭৫০</h3>
<p><button type="button" id="add">কার্টে যোগ করুন</button> ← এখানেই একটি কাজ</p>
<p><span class="fake" id="fake">কার্টে যোগ করুন</span> ← নকল বাটন (span)</p>
<p><a href="cart.html">কার্ট পাতায় যান</a> ← অন্য পাতায় যাওয়া</p>
<script>
  let count = 0;
  document.getElementById('add').addEventListener('click', () => {
    count++;
    console.log('আসল বাটন: কার্টে এখন ' + count + 'টি');
  });
  document.getElementById('fake').addEventListener('click', () => {
    console.log('নকল বাটন: মাউসে চলে, কিন্তু কিবোর্ডে পৌঁছানো যায় না');
  });
</script>

৮ · <base>-এর ফাঁদ, ভাঙা লিংক আর লিংক যাচাই

<base> — সাবধানে ধরতে হয় এমন একটি ট্যাগ

<base> ট্যাগটি <head>-এ বসে আর পুরো পাতার জন্য বলে দেয়: “সব relative ঠিকানা এই ঠিকানার সাপেক্ষে হিসাব করো।” শুনতে সুবিধাজনক, কিন্তু এর প্রভাব ঠিক “সব”-এর ওপর:

<head>
  <base href="https://amardokan.example/shop/">
</head>
<body>
  <a href="rice.html">চাল</a>      <!-- → /shop/rice.html (ঠিক যেমন চেয়েছিলেন) -->
  <img src="logo.png" alt="লোগো">  <!-- → /shop/logo.png (হয়তো চাননি!) -->
  <a href="#reviews">রিভিউ</a>   <!-- → /shop/#reviews — অন্য পাতা! -->
</body>

শেষ লাইনটিই সবচেয়ে বড় ফাঁদ: <base> থাকলে পাতার ভেতরের # লিংকও base-এর সাপেক্ষে হিসাব হয়। এই পাতার ঠিকানা যদি /shop/rice.html হয়, #reviews আর একই পাতায় লাফ দেবে না, বরং /shop/ পাতাটি লোড করবে। অংশ ৩-এর JavaScript কোডে দেখেছেন, #ingredients আসলে “ভিত্তি-ঠিকানা + #ingredients”; <base> সেই ভিত্তিটাই বদলে দেয়। আরও তিনটি নিয়ম: পাতায় একটিই <base> থাকবে; সেটি থাকবে URL ব্যবহার করা অন্য সব ট্যাগের আগে; আর <base target="_blank"> দিলে পাতার সব লিংক নতুন ট্যাবে খুলবে। তাই সাধারণ পরামর্শ: খুব নির্দিষ্ট কারণ ছাড়া <base> ব্যবহার করবেন না।

ভাঙা লিংক — কেন হয়, কীভাবে খুঁজবেন

ভাঙা লিংক মানে এমন লিংক, যার ঠিকানায় আর কিছু নেই — সার্ভার উত্তর দেয় 404 Not Found. কারণ প্রায় সবসময় এগুলোর একটি: ফাইলের নাম বা ফোল্ডার বদলানো, বানান বা বড়-ছোট অক্ষরের ভুল, ভুল ../, আর অন্য সাইট তাদের পাতা সরিয়ে বা মুছে ফেলেছে। ভাঙা লিংক পাঠককে বিরক্ত করে, আর সার্চ ইঞ্জিনের চোখে সাইটকে অযত্নের দেখায়।

সবচেয়ে ভালো সমাধান হলো লিংক ভাঙতেই না দেওয়া। কোনো পাতার নাম বদলাতে হলে পুরোনো ঠিকানা থেকে নতুন ঠিকানায় একটি স্থায়ী 301 redirect বসান — cPanel-এর সাইটে .htaccess ফাইলে এক লাইনেই হয় (পর্ব ৫৩)। এই কোর্সের পুরোনো পর্বগুলোর ঠিকানাও এভাবেই নতুন পর্বে পাঠানো হয়।

৯ · AI-এর যুগে — লিংক লিখে দেয় AI, যাচাই করেন আপনি

AI-কে “একটি দোকানের ওয়েবসাইট বানিয়ে দাও” বললে কয়েক সেকেন্ডে ডজনখানেক লিংকসহ পাতা চলে আসে। কিন্তু AI আপনার কম্পিউটারের ফোল্ডার দেখতে পায় না, আপনার সার্ভারও চেনে না। তাই লিংকের ভুলগুলো প্রায়ই একই রকম হয়:

AI-এর দেওয়া লিংক হাতে পেলে — যাচাইয়ের চেকলিস্ট

• প্রতিটি relative path ফোল্ডার-গাছ ধরে মিলিয়েছি, আর DevTools-এর Network-এ একটিও 404 নেই
• বাইরের প্রতিটি লিংক নিজে খুলে দেখেছি — AI-এর বানানো ঠিকানা নেই
• লিংকের লেখাগুলো শুধু নিজেরা পড়েও বুঝি কোনটি কোথায় নেবে; আইকন-লিংকের নাম আছে
• শুধু কিবোর্ড (Tab, Enter, Space) দিয়ে সব লিংক আর বাটন চালাতে পেরেছি
• validator.w3.org-এ পাতাটি দিয়েছি — ডুপ্লিকেট id বা ভুল nesting নেই; আর কোনো দাবি সন্দেহ হলে MDN-এ মিলিয়েছি