قسمت ۸ – آدرس‌دهی نسبی و مطلق و لینک به بخش‌های صفحه

آدرس دهی نسبی و مطلق دو روش نوشتن مسیر در اتریبیوت‌هایی مثل href و src است: آدرس مطلق (Absolute URL) مسیر کامل را از پروتکل و دامنه می‌نویسد، مثل https://siloow.com/services/، اما آدرس نسبی (Relative URL) مسیر را نسبت به مکان فایل فعلی می‌نویسد، مثل images/logo.png. انتخاب درست بین این دو، فرق یک پروژه سالم با پروژه‌ای پر از لینک و تصویر شکسته است.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

در این قسمت یاد می‌گیرید مسیر فایل در html را با ./ و ../ و / درست بنویسید، تفاوت مسیر نسبی و ریشه‌ای را بفهمید و با اتریبیوت id به بخش مشخصی از صفحه لینک بدهید (Anchor Link). این قسمت ادامه قسمت ۷: لینک‌سازی با تگ a در HTML است و اگر هنوز پروژه‌ای در VS Code ندارید، اول قسمت ۲: ساخت اولین صفحه HTML را ببینید.

آدرس دهی نسبی و مطلق چیست؟

آدرس دهی نسبی و مطلق دو شیوه برای گفتن «فایل یا صفحه مقصد کجاست» به مرورگر است. آدرس مطلق یعنی آدرس کامل و مستقل از جای فعلی؛ آدرس نسبی یعنی آدرسی که مرورگر آن را با آدرس صفحه فعلی ترکیب می‌کند تا آدرس کامل ساخته شود.

یک مثال روزمره کمک می‌کند: آدرس مطلق مثل نوشتن «تهران، خیابان ولیعصر، پلاک ۱۰» است که از هر جای ایران معنا دارد. آدرس نسبی مثل گفتن «دو در بالاتر» است که فقط وقتی معنا دارد که بدانیم الان کجا ایستاده‌ایم. مرورگر برای آدرس نسبی همیشه از آدرس صفحه فعلی (یا تگ <base> اگر وجود داشته باشد) به‌عنوان نقطه شروع استفاده می‌کند.

مسیر فایل در html چطور نوشته می‌شود؟

مسیر فایل در html از نام پوشه‌ها و فایل‌ها تشکیل می‌شود که با اسلش (/) از هم جدا شده‌اند؛ ../ یعنی یک پوشه بالاتر، ./ یعنی همین پوشه و اسلش ابتدای مسیر یعنی ریشه دامنه. برای درک بهتر، فرض کنید ساختار پروژه شما این است:

my-site/
├── index.html
├── about.html
├── blog/
│   ├── index.html
│   └── post-1.html
├── images/
│   └── logo.png
└── css/
    └── style.css

حالا ببینید از دو فایل مختلف، مسیر یک تصویر و یک صفحه چطور نوشته می‌شود:

<!-- داخل index.html (در ریشه پروژه) -->
<a href="about.html">درباره ما</a>
<a href="blog/post-1.html">اولین نوشته وبلاگ</a>
<img src="images/logo.png" alt="لوگوی سایت" width="120" height="40">

<!-- داخل blog/post-1.html (یک پوشه پایین‌تر) -->
<a href="../index.html">بازگشت به صفحه اصلی</a>
<a href="index.html">همه نوشته‌های وبلاگ</a>
<img src="../images/logo.png" alt="لوگوی سایت" width="120" height="40">

فایل blog/post-1.html یک پوشه پایین‌تر از ریشه است؛ پس برای رسیدن به images/logo.png باید اول با ../ یک پوشه بالا برود. اگر در فایل وبلاگ همان images/logo.png را بنویسید، مرورگر دنبال blog/images/logo.png می‌گردد و تصویر شکسته نمایش داده می‌شود؛ رایج‌ترین خطای مبتدی‌ها دقیقاً همین است.

نوع مسیر	نمونه	نقطه شروع	کاربرد مناسب
مطلق کامل	https://siloow.com/services/	هیچ؛ مستقل است	لینک به سایت دیگر، کانونیکال، ایمیل‌ها
ریشه‌ای (root-relative)	/css/style.css	ریشه دامنه فعلی	سایت روی سرور با ساختار ثابت
نسبی همین پوشه	about.html یا ./about.html	پوشه فایل فعلی	فایل‌های کنار هم
نسبی زیرپوشه	images/logo.png	پوشه فایل فعلی	منابع داخل زیرپوشه
نسبی پوشه بالاتر	../index.html	یک پوشه بالاتر	برگشت از زیرپوشه
فقط fragment	#faq	همین صفحه	لینک به بخشی از صفحه
وابسته به پروتکل	//cdn.example.com/a.js	پروتکل صفحه فعلی	منسوخ؛ همیشه https بنویسید

تفاوت مسیر نسبی و ریشه‌ای (اسلش اول) چیست؟

مسیر نسبی از پوشه فایل فعلی شروع می‌شود، اما مسیری که با اسلش شروع می‌شود (/) همیشه از ریشه دامنه شروع می‌شود؛ پس /images/logo.png از هر صفحه‌ای در هر عمقی به یک فایل می‌رسد. به این نوع، مسیر ریشه‌ای یا Root-relative می‌گویند.

<!-- آدرس مطلق کامل: برای لینک به سایت دیگر -->
<a href="https://developer.mozilla.org/fa/">MDN فارسی</a>

<!-- مسیر ریشه‌ای (root-relative): از ریشه دامنه فعلی -->
<a href="/services/">خدمات</a>
<link rel="stylesheet" href="/css/style.css">

<!-- مسیر وابسته به پروتکل: دیگر توصیه نمی‌شود -->
<!-- <script src="//cdn.example.com/lib.js"></script> -->

چرا مسیر ریشه‌ای روی کامپیوتر خودتان کار نمی‌کند؟

اگر فایل HTML را مستقیم با دوبار کلیک باز کنید، آدرس صفحه با file:/// شروع می‌شود و «ریشه» یعنی ریشه دیسک کامپیوتر شما، نه پوشه پروژه. به همین دلیل مسیرهای ریشه‌ای در این حالت کار نمی‌کنند. راه‌حل همان افزونه Live Server است که در قسمت ۲ نصب کردید؛ Live Server پروژه را روی یک سرور محلی (مثل http://127.0.0.1:5500/) اجرا می‌کند و اسلش اول به پوشه پروژه اشاره می‌کند.

نکته: در وردپرس و بیشتر CMSها آدرس‌ها پویا ساخته می‌شوند و در قالب نباید مسیر را دستی بنویسید؛ توابعی مثل get_template_directory_uri() و home_url() آدرس درست را می‌سازند. اما فهم آدرس دهی نسبی و مطلق برای پیدا کردن خطای تصویرهای شکسته و فایل‌های CSS که بارگذاری نمی‌شوند، همچنان ضروری است.

لینک داخلی html به بخش‌های صفحه (anchor link) چطور ساخته می‌شود؟

برای لینک به بخشی از همان صفحه، به المان مقصد یک id یکتا بدهید و در href همان id را با علامت # بنویسید. با کلیک روی لینک، مرورگر صفحه را تا آن المان اسکرول می‌کند و آدرس صفحه هم با بخش #id (Fragment) به‌روز می‌شود.

<nav aria-label="فهرست مطالب">
  <ul>
    <li><a href="#what">آدرس‌دهی چیست؟</a></li>
    <li><a href="#relative">آدرس نسبی</a></li>
    <li><a href="#faq">سوالات متداول</a></li>
  </ul>
</nav>

<h2 id="what">آدرس‌دهی چیست؟</h2>
<p>...</p>
<h2 id="relative">آدرس نسبی</h2>
<p>...</p>
<h2 id="faq">سوالات متداول</h2>

این الگو برای فهرست مطالب مقاله‌های طولانی، صفحه‌های سوالات متداول و صفحه‌های تک‌صفحه‌ای (One-page) کاربرد دارد. همان‌طور که در مستندات MDN درباره اتریبیوت id آمده، مقدار id باید در کل سند یکتا باشد و نباید فاصله داشته باشد.

لینک به بخش مشخص یک صفحه دیگر، بالای صفحه و Skip Link

می‌توانید fragment را به انتهای هر آدرسی اضافه کنید تا کاربر مستقیم به بخش مشخصی از صفحه دیگر برسد. مقدار ویژه #top (یا یک # خالی) هم صفحه را به بالا می‌برد. «لینک پرش به محتوا» (Skip Link) هم یک لینک داخلی است که کاربران کیبورد را از منوی طولانی عبور می‌دهد و در قسمت ۲۲ (دسترس‌پذیری) کامل‌تر بررسی می‌شود:

<!-- لینک به بخش مشخصی از صفحه دیگر -->
<a href="/codepress/تگ-a-در-html/#faq">سوالات متداول قسمت ۷</a>

<!-- لینک بازگشت به بالای صفحه -->
<a href="#top">بازگشت به بالا</a>

<!-- لینک پرش به محتوای اصلی (Skip Link) -->
<a href="#main" class="skip-link">پرش به محتوای اصلی</a>
<main id="main">...</main>

id در html چه قوانینی دارد؟

اتریبیوت id در html یک شناسه یکتا برای المان است؛ در هر صفحه فقط یک المان می‌تواند یک id مشخص داشته باشد و مقدار آن نباید فاصله داشته باشد. id حساس به بزرگی و کوچکی حروف است؛ یعنی Faq و faq دو مقدار متفاوت هستند.

• id را یکتا نگه دارید؛ id تکراری هم لینک‌ها و هم جاوااسکریپت و برچسب فرم‌ها را خراب می‌کند.
• به‌جای فاصله از خط تیره استفاده کنید: install-steps.
• id فارسی از نظر HTML مجاز است، اما در آدرس به شکل درصدی (Percent-encoded) دیده می‌شود؛ برای اشتراک‌گذاری راحت‌تر، id لاتین کوتاه انتخاب کنید.
• بهتر است id با عدد شروع نشود، چون استفاده از آن در سلکتور CSS را سخت‌تر می‌کند.
• برای استایل‌دهی تکراری به‌جای id از class استفاده کنید؛ این موضوع را در بخش CSS می‌بینید.

<!-- اشتباه: id تکراری -->
<h2 id="intro">مقدمه</h2>
<h2 id="intro">مقدمه دوم</h2>

<!-- اشتباه: id با فاصله -->
<h2 id="مراحل نصب">مراحل نصب</h2>

<!-- درست: یکتا، بدون فاصله، کوتاه -->
<h2 id="install-steps">مراحل نصب</h2>
<h2 id="مراحل-نصب">مراحل نصب</h2>

اسکرول نرم و هدر چسبان در لینک‌های داخلی

به‌طور پیش‌فرض پرش به بخش مقصد ناگهانی است و اگر سایت هدر چسبان (Sticky) داشته باشد، تیتر مقصد زیر هدر پنهان می‌شود. هر دو مشکل با چند خط CSS حل می‌شوند: scroll-behavior: smooth برای اسکرول نرم و scroll-margin-block-start برای فاصله گرفتن از بالای صفحه. خاصیت منطقی block-start در صفحه‌های راست‌چین و چپ‌چین یکسان کار می‌کند:

html {
  scroll-behavior: smooth;
}

/* فاصله برای هدر چسبان (sticky) */
h2[id] {
  scroll-margin-block-start: 5rem;
}

/* احترام به تنظیم کاهش حرکت کاربر */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

با کوئری prefers-reduced-motion برای کاربرانی که در سیستم‌عامل «کاهش حرکت» را فعال کرده‌اند اسکرول نرم را خاموش می‌کنیم. جزئیات این خاصیت‌ها را در بخش CSS دوره کامل یاد می‌گیرید.

تگ base چیست و چه زمانی نباید از آن استفاده کرد؟

تگ <base> داخل head (که ساختارش را در قسمت ۳: ساختار صفحه HTML دیدید)، آدرس پایه همه آدرس‌های نسبی صفحه را تغییر می‌دهد. یعنی مرورگر به‌جای آدرس صفحه فعلی، از مقدار href تگ base به‌عنوان نقطه شروع استفاده می‌کند.

<head>
  <meta charset="utf-8">
  <base href="https://siloow.com/codepress/">
</head>
<body>
  <!-- این لینک به https://siloow.com/codepress/about/ می‌رود -->
  <a href="about/">درباره کدپرس</a>
</body>

تگ base کمتر استفاده می‌شود و معمولاً توصیه نمی‌شود؛ چون حتی لینک‌های #id را هم نسبت به آدرس base می‌سازد و باعث می‌شود لینک‌های فهرست مطالب شما را به صفحه دیگری ببرند. فقط وقتی از آن استفاده کنید که دلیل مشخصی دارید و همه پیامدهایش را بررسی کرده‌اید.

موقعیت	پیشنهاد	دلیل
لینک به سایت دیگر	آدرس مطلق کامل با https	بدون دامنه، مرورگر مسیر داخلی فرض می‌کند
پروژه تمرینی روی کامپیوتر	مسیر نسبی	بدون سرور هم کار می‌کند
سایت منتشرشده روی دامنه	مسیر ریشه‌ای یا آدرس ساخته‌شده توسط CMS	از هر عمقی درست کار می‌کند
تگ canonical و Open Graph	آدرس مطلق کامل	موتور جستجو و شبکه‌های اجتماعی آدرس کامل لازم دارند
لینک داخل همان صفحه	فقط #id	کوتاه و مستقل از آدرس صفحه

از تجربه تیم siloow: جابه‌جایی سایت و آدرس‌های شکسته

یکی از کارهای تکراری در پشتیبانی سایت‌های وردپرسی، انتقال سایت از دامنه موقت یا زیرپوشه به دامنه اصلی است. در این انتقال‌ها بارها دیده‌ایم که تصویرهای داخل محتوا یا لینک‌های دستی منو با آدرس مطلق دامنه قدیمی (یا حتی http به‌جای https) ذخیره شده‌اند و بعد از انتقال، شکسته‌اند یا هشدار محتوای ناامن (Mixed Content) می‌دهند. در قالب‌های اختصاصی و CMS مستقلی که تیم siloow ساخته است، قاعده را این‌طور گذاشتیم: آدرس منابع قالب همیشه با توابع سیستم ساخته می‌شود، لینک‌های داخلی دستی به‌صورت ریشه‌ای ذخیره می‌شوند و آدرس مطلق کامل فقط برای کانونیکال، نقشه سایت و متا تگ‌های اشتراک‌گذاری استفاده می‌شود. این قاعده ساده، انتقال سایت را بی‌دردسر کرده است. تفاوت این دو دنیا (CMS و کدنویسی اختصاصی) را در مقاله طراحی سایت با وردپرس یا کدنویسی مفصل مقایسه کرده‌ایم.

اشتباهات رایج در آدرس دهی

• استفاده از مسیر کامپیوتر خودتان، مثل C:\Users\...\logo.png، که روی سرور وجود ندارد.
• استفاده از بک‌اسلش (\) به‌جای اسلش (/) در آدرس‌ها.
• تفاوت بزرگی و کوچکی حروف: Logo.png و logo.png روی سرورهای لینوکسی دو فایل متفاوت‌اند.
• فراموش کردن ../ در فایل‌های زیرپوشه.
• نوشتن آدرس سایت دیگر بدون https://.
• فاصله در نام فایل‌ها و پوشه‌ها؛ به‌جای آن از خط تیره استفاده کنید.
• id تکراری یا id با فاصله برای لینک داخلی.

تمرین این قسمت

1. ساختار پوشه‌بندی نمونه این قسمت را در VS Code بسازید و از index.html به about.html و post-۱.html لینک بدهید.
2. در post-۱.html یک لینک بازگشت به صفحه اصلی و یک تصویر از پوشه images با مسیر نسبی بگذارید.
3. یک صفحه طولانی با پنج بخش h2 بسازید و یک فهرست مطالب با لینک‌های #id برای آن بنویسید.
4. یک لینک «بازگشت به بالا» در انتهای صفحه اضافه کنید.
5. همان پروژه را یک بار با دوبار کلیک و یک بار با Live Server باز کنید و رفتار مسیرهای ریشه‌ای را مقایسه کنید.

جمع‌بندی و خلاصه

• آدرس دهی نسبی و مطلق دو روش نوشتن مسیر در href و src است.
• ../ یعنی یک پوشه بالاتر و اسلش اول یعنی ریشه دامنه.
• برای سایت‌های دیگر، کانونیکال و متا تگ‌ها همیشه آدرس مطلق کامل بنویسید.
• لینک داخلی html با #id ساخته می‌شود و id باید یکتا و بدون فاصله باشد.
• با CSS می‌توانید اسکرول نرم و فاصله از هدر چسبان را تنظیم کنید.

قسمت‌های بعدی و قبلی را در صفحه دوره کدپرس ببینید. در قسمت بعد، «قسمت ۹ – درج تصویر با تگ img و متن alt»، از همین مسیرها برای نمایش تصویر استفاده می‌کنیم.

منابع

• MDN: What is a URL?
• MDN: id global attribute
• MDN: The Document Base URL element (base)
• WHATWG URL Standard

سوالات متداول درباره آدرس دهی نسبی و مطلق