در HTML میتوانید مقصد یک لینک (یا مقدار خصوصیت href در المان <a>) را به شکلی مشخص کنید که کاربر با کلیک روی لینک به یک بخش (و المان) مشخص در صفحه هدایت شود. این بخش ممکن است ابتدای یک هدینگ، پاراگراف، تصویر و هر نوع المان اچتیامال دیگری داخل صفحه فعلی یا سایر صفحات (حتی از یک سایت دیگر) باشد. به این ترتیب برخلاف لینک های عادی که کاربر با کلیک روی آنها به ابتدای صفحه مقصد هدایت میشود با کمک این لینک ها امکان پرش مستقیم به بخشی دیگر از صفحه موردنظر فراهم میشود.
بیشتر بخوانید: آشنایی با چگونگی ایجاد لینک در HTML و المان <a>
چگونه برای ارجاع به یک المان یا بخشی داخل صفحه، لینک ایجاد کنیم؟
در روشهایی که در ادامه این مطلب با آنها آشنا میشوید برای ایجاد لینک به بخشی از صفحه لازم است المان موردنظر دارای یک آیدی (یا id) مشخص باشد. اگر امکان ویرایش المان های داخل صفحه را دارید میتوانید با تخصیص مقدار مناسبی به خصوصیت id در المان موردنظر، امکان ارجاع به این المان با کمک لینک را فراهم کنید. (البته با کمک Text fragment ها امکان پرش به بخشهایی از متن در صفحه بدون نیاز به id وجود دارد).
نکته 1: معمولا بسیاری از سایت های معتبر برای بخشهای مهم در صفحات سایت، id های مناسبی درنظر میگیرند. این کار امکان ایجاد لینک داخلی و بک لینک به بخشهای اصلی صفحه را فراهم میکند.
نکته 2: برای مشاهده کد HTML هر صفحه وب و پیدا کردن مقدار خصوصیت id (در صورت وجود) میتوانید از گزینه Inspect در منوی راست کلیک و ابزارهای توسعه دهنده (یا Developer Tools) در مرورگرهای رایج کمک بگیرید. این قابلیت، به خصوص برای یافتن مقدار id المان ها در صفحات سایت های دیگر مفید خواهد بود.
در ادامه میتوانید مشابه با حالتهای زیر با دانستن مقدار خصوصیت id المان موردنظر لینکی به آن ایجاد کنید:
پرش به بخشی مشخص داخل همان صفحه
اگر میخواهید داخل یک صفحه وب به المانی دیگر در همان صفحه لینک بدهید کافیست یک علامت # و سپس مقدار id المان مقصد را به عنوان مقدار خصوصیت href در المان <a> درج کنید. در مثال زیر مقدار #about برای خصوصیت href در تگ شروع <a> درج شده است. به این ترتیب کاربر با کلیک روی لینک حاصل در ابتدای صفحه به المانی در همان صفحه که دارای id برابر با about است هدایت میشود.
<a href="#about">Jump to About</a>محتویات کامل بخش <body> صفحه HTML و نتیجه آن را در ادامه مشاهده میکنید (المان مقصد لینک، هدینگی با عنوان About the author میباشد و دارای id برابر با about است):
See the Pen
Link to an element by techdic (@techdic)
on CodePen.
یکی از کاربردهای رایج برای این نوع لینک ها، ایجاد لیست یا فهرست مطالب در صفحهای با محتوای طولانی است. به این ترتیب مخاطب با کلیک روی عنوان هر بخش در این فهرست به بخش مربوطه هدایت میشود.
پرش به بخشی مشخص در صفحه دیگر
مشابه با حالت قبل میتوانید به المانی داخل یک صفحه دیگر نیز لینک ایجاد کنید. کافیست در انتهای مسیر یا نشانی مقصد، پس از علامت # مقدار id المان موردنظر را درج کنید. برای مثال هدینگ “کاربردهای آیدی و خصوصیت id در HTML” در صفحه https://techdic.ir/articles/html-id-attribute با کمک یک المان <h2> مشابه با نمونه زیر ایجاد شده است. (این المان دارای id با مقدار id_attribute_applications می باشد).
<h2 id="id_attribute_applications" style="text-align: justify;">کاربردهای آیدی و خصوصیت id در HTML</h2>
مثال زیر نمونه یک المان <a> را نمایش میدهد که لینکی به همین بخش در صفحه فوق ایجاد میکند:
<a href="https://techdic.ir/articles/html-id-attribute#id_attribute_applications" target="_blank">Read more about id attribute applications</a>
لینک زیر نتیجه المان فوق است. با کلیک روی این لینک به بخش موردنظر در صفحه مقصد هدایت میشوید:
Read more about id attribute applications
بازگشت به فهرست مجموعه آموزشی HTML
