بوکمارک در HTML
جلسهٔ Link Titles & Targets چگونگی باز شدن لینک را عوض کرد. بوکمارک (لینک fragment) کجای صفحه فرود میآیید را عوض میکند. درسهای بلند، FAQ و مستندات اغلب نیاز به پرش به «قیمت»، «سوالات» یا «بازگشت به بالا» دارند بدون بار کردن سند کاملاً جدید. آن الگو یک id یکتا روی مقصد را با hrefای که با # شروع میشود جفت میکند.
بوکمارک داخلصفحهای چیست؟
شناسهٔ fragment بخشی از URL بعد از # است. در HTML نقطهٔ فرود را با دادن id به یک عنصر میسازید. بعد هر لینکی که href آن #that-id باشد از مرورگر میخواهد به اولین id همخوان روی صفحه اسکرول کند (یا روی صفحهای که قبل از # نام بردهاید اگر مسیر بگذارید).
پاسخ مستقیم
- به مقصد یک
idبدهید، مثلاً<h2 id="pricing">. - با
href="#pricing"لینک بزنید.
#یعنی «این id را پیدا کن».idها روی صفحه باید یکتا باشند. نام کوتاه بدون فاصله را ترجیح دهید:pricing، نهOur Pricing!!.
فهرست مطالب داخل صفحه
یک nav کوچک بالای صفحهٔ بلند دموی کلاسیک مبتدی است: لینکهای fragment بالا، id همخوان روی عنوانهای پایین، بهعلاوهٔ لینک بازگشت.
بوکمارکهای داخل صفحه
html<nav>
<a href="#intro">Intro</a> |
<a href="#pricing">Pricing</a>
</nav>
<h2 id="intro">Intro</h2>
<p>Welcome to the guide.</p>
<h2 id="pricing">Pricing</h2>
<p>Simple plans for learners.</p>
<p><a href="#intro">Back to intro</a></p>خواندن نمونهٔ داخلصفحهای
#introو#pricingلینک fragment هستند، نه فایل جداidهر عنوان باید با fragment بعد از#یکی باشد- nav میتواند هرجا باشد؛ TOC بالای صفحه برای محتوای بلند رایج است
- «Back to intro» نشان میدهد بوکمارک روی همان سند بالا و پایین کار میکند
لینک به بخش صفحهٔ دیگر
میتوانید مسیر نسبی (یا مطلق) را با fragment ترکیب کنید. مرورگر صفحه را بار میکند، بعد اگر id وجود داشته باشد به آن میپرد.
مسیر بهعلاوهٔ fragment
html<p>
<a href="guide.html#pricing">Open pricing in the guide</a>
</p>چه وقت path#id؟
- پرش همان صفحه:
#pricingکافی است - فایل HTML دیگر در پروژه:
guide.html#pricing - مستند بیرونی مورد اعتماد: URL کامل که به
#section-nameختم شود وقتی آن سایت id پایدار دارد
اگرidروی صفحهٔ مقصد نباشد، مرورگر معمولاً صفحه را از بالا باز میکند و fragment ناشناخته را نادیده میگیرد.
عادت نامگذاری id
- یک مقدار id در هر صفحه — هرگز تکراری نکنید
- در صورت امکان با حرف شروع کنید؛ از فاصله و نقطهگذاری عجیب پرهیز کنید
- برای نام چندکلمهای خط تیره بگذارید:
getting-started - اگر صفحات دیگر deep-link میزنند نامها را پایدار نگه دارید
idبرای ماشین و URL است؛ متن قابلدید عنوان میتواند انسانپسند و متفاوت از رشتهٔ id بماند.
بوکمارک در برابر «نشانک» مرورگر
مردم «بوکمارک» را برای ذخیرهٔ صفحه در منوی علاقهمندی مرورگر هم میگویند. این درس یعنی لینک fragment داخل صفحه. علاقهمندی مرورگر از URL سند استفاده میکند (و گاهی fragment اگر کپی کرده باشید). همان واژه، کار روزمرهٔ متفاوت — وقتی به دیگران میآموزید معنی HTML را روشن نگه دارید.
یادداشت دسترسپذیری و UX
لینک پرش وقتی مقصدها landmark واقعیاند (عنوان، section) به کاربران صفحهکلید و خوانندهٔ صفحه کمک میکند در صفحات بلند حرکت کنند. دهها id خالی اسپم نکنید. بعد از پرش مطمئن شوید هدف دیده میشود — هدر چسبان بعداً با CSS میتواند عنوان را بپوشاند؛ فعلاً تأیید کنید بخش درست ظاهر میشود.
تمرین در ویرایشگر
- دو عنوان با
idمتفاوت بسازید. - بالاتر لینکهای fragment با
href="#…"بگذارید. - هر لینک را کلیک کنید و تأیید کنید صفحه به عنوان همخوان میپرد.
- لینک «بازگشت به بالا» به
idروی اولین عنوان یا landmark بالا اضافه کنید. - از فایل دوم با
other.html#introلینک بزنید و پرش بینصفحهای را تأیید کنید. - موقتاً یک id را تکراری کنید، گیجی را ببینید، بعد یکتایی را درست کنید.
اشتباهات رایج
- استفاده از یک
idدوبار روی یک صفحه - فراموش
#درhrefتا مرورگر بهجایش دنبال نام فایل بگردد - گذاشتن فاصله یا نماد عجیب در id
- لینک به idای که وجود ندارد
- قاطی کردن بوکمارک fragment با
target="_blank"(کار متفاوت) - انتظار اینکه
#pricingبهتنهایی بدون مسیر فایل دیگری را باز کند
خلاصه
- بوکمارک همانصفحه از
idبهعلاوهٔhref="#id"استفاده میکند - id باید یکتا، کوتاه و بدون فاصله باشد
- برای صفحات بلند و فهرست مطالب کوچک عالی است
- با
page.html#idبه بخش صفحهٔ دیگر بپرید - fragment گم معمولاً بیصدا شکست میخورد و بالای صفحه میمانید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود