Links & Navigation

লিংক ও নেভিগেশন

Read: ~22 min Beginner 10 practice problems Live preview runner

1. The "Hyper" in Hypertext

HTML stands for HyperText Markup Language — and the hyper part refers exactly to what this module is about: text that links to other text. Without links, the web would just be a pile of disconnected documents. The <a> (anchor) tag is what turns separate pages into one connected, navigable web.

HTML মানে HyperText Markup Language — এবং hyper অংশটিই ঠিক এই মডিউলের বিষয়বস্তু বোঝায়: এমন টেক্সট যা অন্য টেক্সটের সাথে সংযুক্ত। লিংক ছাড়া ওয়েব হতো শুধু বিচ্ছিন্ন কিছু ডকুমেন্টের স্তূপ। <a> (anchor) ট্যাগই আলাদা আলাদা পেজগুলোকে একটি সংযুক্ত, নেভিগেশনযোগ্য ওয়েবে পরিণত করে।

2. The <a> Tag & href

The anchor tag wraps around clickable text (or an image) and points somewhere using its href (hypertext reference) attribute: <a href="about.html">About Us</a>. Clicking anywhere on "About Us" navigates the browser to about.html. An anchor can link to another page, a section of the same page, an email address (mailto:), a phone number (tel:), or a file to download.

Anchor ট্যাগ ক্লিকযোগ্য টেক্সট (বা ছবি) মুড়িয়ে রাখে এবং তার href (hypertext reference) অ্যাট্রিবিউট দিয়ে কোথাও নির্দেশ করে: <a href="about.html">About Us</a>। "About Us"-এর যেকোনো জায়গায় ক্লিক করলে ব্রাউজার about.html-এ চলে যায়। একটি anchor অন্য পেজে, একই পেজের একটি সেকশনে, একটি ইমেইল ঠিকানায় (mailto:), একটি ফোন নাম্বারে (tel:), বা ডাউনলোডযোগ্য ফাইলের সাথে লিংক হতে পারে।

links.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Links Demo</title></head>
<body>
  <h1>Contact Options</h1>
  <p><a href="about.html">Read our About page</a></p>
  <p><a href="mailto:hello@example.com">Email us</a></p>
  <p><a href="tel:+8801000000000">Call us</a></p>
</body>
</html>

3. Relative vs Absolute Paths

An absolute path is a full URL including the domain, like https://abcltech.com/about.html — you always need this for linking to a different website. A relative path describes where a file is relative to the current page, like about.html (same folder), ../index.html (one folder up), or images/logo.png (a subfolder). For links within your own site, relative paths are almost always the better choice.

অ্যাবসোলিউট পাথ মানে ডোমেইনসহ একটি সম্পূর্ণ URL, যেমন https://abcltech.com/about.html — অন্য একটি ওয়েবসাইটে লিংক করতে হলে এটিই লাগবে। রিলেটিভ পাথ বলে দেয় ফাইলটি বর্তমান পেজের সাপেক্ষে কোথায় আছে, যেমন about.html (একই ফোল্ডার), ../index.html (এক ফোল্ডার উপরে), বা images/logo.png (একটি সাব-ফোল্ডার)। নিজের সাইটের ভেতরের লিংকের জন্য প্রায় সবসময় রিলেটিভ পাথই ভালো পছন্দ।

Figure 4.1 — ফোল্ডার গঠন অনুযায়ী রিলেটিভ পাথ।

Key insight Relative paths (../about.html) are usually better than absolute paths, because they keep working if the domain ever changes — moving your whole site to a new domain does not break a single internal link.

রিলেটিভ পাথ (../about.html) সাধারণত অ্যাবসোলিউট পাথের চেয়ে ভালো, কারণ ডোমেইন পরিবর্তন হলেও এগুলো কাজ করতে থাকে — পুরো সাইট নতুন ডোমেইনে সরালেও একটি ইন্টারনাল লিংকও ভাঙে না।

4. target="_blank" & rel

By default, clicking a link navigates away from the current page. Adding target="_blank" opens the link in a new tab instead — useful for links to external sites, so visitors do not lose your page. Whenever you use target="_blank", also add rel="noopener noreferrer": this is a security best practice that prevents the newly opened page from gaining any control over your original tab.

ডিফল্টভাবে, লিংকে ক্লিক করলে বর্তমান পেজ থেকে সরে যায়। target="_blank" যোগ করলে লিংকটি নতুন ট্যাবে খোলে — বাইরের সাইটের লিংকের জন্য উপযোগী, যাতে ভিজিটর আপনার পেজ হারিয়ে না ফেলে। target="_blank" ব্যবহার করলে সাথে rel="noopener noreferrer"ও যোগ করুন — এটি একটি নিরাপত্তা রীতি, যা নতুন খোলা পেজকে আপনার আসল ট্যাবের উপর কোনো নিয়ন্ত্রণ পাওয়া থেকে আটকায়।

Attribute	Meaning	বাংলায়
`target="_blank"`	Opens the link in a new browser tab.	লিংকটি নতুন ব্রাউজার ট্যাবে খোলে।
`rel="noopener"`	Stops the new tab from accessing your page via `window.opener`.	নতুন ট্যাবকে `window.opener` দিয়ে আপনার পেজে প্রবেশ করা থেকে আটকায়।
`rel="noreferrer"`	Also hides which page the visitor came from.	ভিজিটর কোন পেজ থেকে এসেছে তাও লুকিয়ে রাখে।
`rel="nofollow"`	Tells search engines not to pass ranking credit through this link.	সার্চ ইঞ্জিনকে বলে এই লিংক দিয়ে র‍্যাঙ্কিং ক্রেডিট না পাঠাতে।

5. Anchor Links Within a Page

You can link directly to a specific spot on the same page. First give an element an id, like <h2 id="pricing">, then link to it with a hash: <a href="#pricing">Jump to Pricing</a>. Clicking it instantly scrolls the browser to that element — no page reload needed. This is exactly how "back to top" buttons and table-of-contents links work.

একই পেজের একটি নির্দিষ্ট জায়গায় সরাসরি লিংক করা যায়। প্রথমে একটি এলিমেন্টকে id দিন, যেমন <h2 id="pricing">, তারপর হ্যাশ দিয়ে লিংক করুন: <a href="#pricing">Jump to Pricing</a>। ক্লিক করলেই ব্রাউজার সেই এলিমেন্টে স্ক্রল করে চলে যায় — পেজ রিলোডের প্রয়োজন নেই। "back to top" বাটন ও সূচিপত্র লিংক ঠিক এভাবেই কাজ করে।

anchors.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Same-Page Anchors</title></head>
<body>
  <p><a href="#pricing">Jump straight to Pricing ↓</a></p>
  <h2>Introduction</h2>
  <p>Welcome to our page.</p>
  <h2 id="pricing">Pricing</h2>
  <p>Our course is completely free.</p>
</body>
</html>

6. Building a Nav Bar

A navigation bar is simply a group of links, conventionally wrapped in a <nav> element and organized as a list of links (<ul> of <li>, each holding an <a>). Wrapping links in a list is not required for them to work, but it is the semantically correct structure — it tells assistive technology "this is a set of related navigation choices," and CSS can then turn that list into a horizontal menu.

একটি নেভিগেশন বার আসলে লিংকের একটি গ্রুপ, সাধারণত <nav> এলিমেন্টে মোড়ানো থাকে এবং একটি লিংক-লিস্ট হিসেবে সাজানো থাকে (<ul>-এর ভেতরে <li>, প্রতিটিতে একটি <a>)। লিংক কাজ করার জন্য লিস্টে মোড়ানো বাধ্যতামূলক নয়, কিন্তু এটিই সিমান্টিকভাবে সঠিক কাঠামো — এটি assistive technology-কে জানায় "এটি সম্পর্কিত নেভিগেশন অপশনের একটি সেট," এবং পরে CSS দিয়ে এই লিস্টকে একটি হরাইজন্টাল মেনুতে রূপান্তর করা যায়।

navbar.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Nav Bar Demo</title></head>
<body>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="https://abcltech.com" target="_blank" rel="noopener noreferrer">ABCL TECH ↗</a></li>
    </ul>
  </nav>
  <h1>Welcome</h1>
</body>
</html>

Site nav bars
প্রতিটি ওয়েবসাইটের হেডারে থাকা লিংক তালিকা।

Table of contents
লম্বা আর্টিকেলে সেকশনে জাম্প করার লিংক।

Social/footer links
ফুটারে থাকা যোগাযোগ ও সোশ্যাল লিংক।

7. Glossary (শব্দকোষ)

Term	Meaning	বাংলায়
Anchor / `<a>`	The HTML tag used to create a hyperlink.	হাইপারলিংক তৈরি করতে ব্যবহৃত HTML ট্যাগ।
`href`	The attribute holding the link's destination.	লিংকের গন্তব্য ধারণকারী অ্যাট্রিবিউট।
Relative path	A path described from the current file's location.	বর্তমান ফাইলের অবস্থান থেকে বর্ণিত পাথ।
Absolute path	A full URL including protocol and domain.	প্রোটোকল ও ডোমেইনসহ একটি সম্পূর্ণ URL।
Fragment / hash link	An `#id` link that jumps within the same page.	একই পেজের মধ্যে জাম্প করা `#id` লিংক।

8. Practice Problems

Every problem has a Show Answer button. Try each one yourself first.

প্রতিটি প্রশ্নে Show Answer বাটন আছে। প্রথমে নিজে চেষ্টা করুন, তারপর উত্তর মিলিয়ে নিন।

Write a link whose visible text is "Visit Google" and points to https://www.google.com.

এমন একটি লিংক লিখুন যার দৃশ্যমান টেক্সট "Visit Google" এবং যা https://www.google.com-এ নিয়ে যায়।
✨ Show Answer (উত্তর দেখুন)
ans1.html
```
<a href="https://www.google.com">Visit Google</a>
```
You are on page /blog/post1.html and want to link back to /index.html. Write the relative href.

আপনি /blog/post1.html পেজে আছেন এবং /index.html-এ লিংক করতে চান। রিলেটিভ href লিখুন।

✨ Show Answer (উত্তর দেখুন)

Answer: <a href="../index.html">Home</a> — ../ moves up one folder from /blog/ to the site root.

<a href="../index.html">Home</a> — ../ দিয়ে /blog/ থেকে এক ফোল্ডার উপরে সাইট রুটে যাওয়া যায়।
Write a link to an external site that opens safely in a new tab.

একটি বাইরের সাইটের লিংক লিখুন যা নিরাপদভাবে নতুন ট্যাবে খুলবে।
✨ Show Answer (উত্তর দেখুন)
ans3.html
```
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Docs</a>
```
Explain why rel="noopener noreferrer" should accompany target="_blank".

target="_blank"-এর সাথে rel="noopener noreferrer" কেন থাকা উচিত, ব্যাখ্যা করুন।

✨ Show Answer (উত্তর দেখুন)

Answer: Without it, the newly opened page could access window.opener and manipulate or redirect your original tab — a real security risk. rel="noopener noreferrer" blocks that access and also hides the referring URL.

এটি না থাকলে নতুন খোলা পেজ window.opener-এর মাধ্যমে আপনার আসল ট্যাব নিয়ন্ত্রণ বা রিডাইরেক্ট করতে পারে — একটি বাস্তব নিরাপত্তা ঝুঁকি। rel="noopener noreferrer" এই প্রবেশাধিকার বন্ধ করে এবং রেফারিং URLও লুকিয়ে রাখে।
Write a "Back to top" link that jumps to an element with id="top" at the start of the page.

এমন একটি "Back to top" লিংক লিখুন যা পেজের শুরুতে id="top" থাকা একটি এলিমেন্টে জাম্প করবে।
✨ Show Answer (উত্তর দেখুন)
ans5.html
```
<h1 id="top">My Page</h1>
<p>... lots of content ...</p>
<a href="#top">Back to top</a>
```
Build a nav bar with three links: Home, Services, Contact — using a semantic nav + list structure.

তিনটি লিংক দিয়ে একটি নেভ বার বানান: Home, Services, Contact — সিমান্টিক nav + list গঠন ব্যবহার করে।
✨ Show Answer (উত্তর দেখুন)
ans6.html
```
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>
```
Write a mailto link that pre-addresses an email to support@example.com.

support@example.com ঠিকানায় প্রি-অ্যাড্রেসড একটি mailto লিংক লিখুন।
✨ Show Answer (উত্তর দেখুন)
ans7.html
```
<a href="mailto:support@example.com">Email Support</a>
```
Explain the difference between a relative path and an absolute path in one or two sentences.

রিলেটিভ পাথ ও অ্যাবসোলিউট পাথের মধ্যে পার্থক্য এক বা দুই বাক্যে ব্যাখ্যা করুন।

✨ Show Answer (উত্তর দেখুন)

Answer: A relative path points to a file based on the current page's location (e.g. ../about.html), while an absolute path is a complete URL with protocol and domain (e.g. https://abcltech.com/about.html) that works regardless of where it is used.

রিলেটিভ পাথ বর্তমান পেজের অবস্থানের ওপর ভিত্তি করে একটি ফাইল নির্দেশ করে (যেমন ../about.html), আর অ্যাবসোলিউট পাথ প্রোটোকল ও ডোমেইনসহ একটি সম্পূর্ণ URL (যেমন https://abcltech.com/about.html), যা যেখানেই ব্যবহার করা হোক না কেন কাজ করে।
Fix this broken link that is missing quotes around its href value: <a href=about.html>About</a>

href মানের চারপাশে quotation চিহ্ন অনুপস্থিত থাকা এই ভাঙা লিংকটি ঠিক করুন: <a href=about.html>About</a>
✨ Show Answer (উত্তর দেখুন)
ans9.html
```
<a href="about.html">About</a>
```
Write a small page with a table of contents at the top linking to two sections lower on the same page.

একটি ছোট পেজ লিখুন যার উপরে একটি সূচিপত্র আছে, যা একই পেজের নিচের দুটি সেকশনে লিংক করে।
✨ Show Answer (উত্তর দেখুন)
ans10.html
```
<h1>Guide</h1>
<ul>
  <li><a href="#intro">Introduction</a></li>
  <li><a href="#setup">Setup</a></li>
</ul>
<h2 id="intro">Introduction</h2>
<p>Welcome to the guide.</p>
<h2 id="setup">Setup</h2>
<p>Follow these steps to get started.</p>
```

Summary — Module 04

The <a> tag and its href attribute connect pages together. Prefer relative paths within your own site and absolute paths for external destinations. Use target="_blank" with rel="noopener noreferrer" for external links you want opened in a new tab, and #id fragment links to jump within the same page. A nav bar is just a semantically wrapped list of links.

<a> ট্যাগ ও তার href অ্যাট্রিবিউট পেজগুলোকে একসাথে সংযুক্ত করে। নিজের সাইটের ভেতরে রিলেটিভ পাথ এবং বাইরের গন্তব্যের জন্য অ্যাবসোলিউট পাথ ব্যবহার করুন। নতুন ট্যাবে খুলতে চাইলে target="_blank"-এর সাথে rel="noopener noreferrer" ব্যবহার করুন, এবং একই পেজের মধ্যে জাম্প করতে #id ফ্র্যাগমেন্ট লিংক ব্যবহার করুন। নেভ বার আসলে সিমান্টিকভাবে মোড়ানো একটি লিংক-লিস্ট।

Next Module → Images & Media — img, figure, video, audio দিয়ে পেজে প্রাণ সঞ্চার করা।

Previous: Text Content & Semantic Basics Next: Images & Media