جلسه هفتم: تگ a در HTML | آموزش کامل لینک‌ها
به جلسه هفتم دوره آموزش HTML تو آوای وب خوش اومدی! جایی که قراره تگ <a> رو مثل یه حرفه‌ای بترکونی! حالا وقتشه با تگ <a> به صفحه‌ات بال و پر بدی مثل یه پل جادویی که کاربراتو به هر جا می‌خوای می‌بره! تگ <a> قلب تعامل وبـه لینک می‌سازه، تجربه کاربری رو بهتر می‌کنه، و اگه درست استفاده بشه، سئو رو می‌ترکونه. تو این مقاله، از صفر تا صد تگ رو با مثالای عملی، نکات حرفه‌ای، و پروژه‌های خفن یاد می‌گیری. آماده‌ای؟ بزن بریم لینکای دنیا رو فتح کنیم!
آنچه در این مقاله می‌خوانید :
🧩 تگ a چیه و چرا باید ازش استفاده کنی؟
تگ <a> مخفف “Anchor” هست و برای ساخت لینک استفاده میشه یه چیزی که وب رو به هم وصل می‌کنه! با این تگ می‌تونی کاربراتو به یه بخش دیگه تو صفحه‌ات، یه صفحه دیگه تو سایتت، یا حتی یه سایت دیگه بفرستی. تازه، می‌تونی باهاش تماس تلفنی راه بندازی، ایمیل بفرستی، یا فایل دانلود کنی یه ابرقهرمان واقعی تو HTML! چرا مهمه؟
- کاربرا رو تو سایتت نگه می‌داره.
- به گوگل می‌گه سایتت چه جوری به بقیه وصله.
- با یه کلیک، دنیا رو به هم ربط می‌ده!
بدون تگ <a>، وب فقط یه مشت صفحه جدا از همه، بیا باهاش غوغا کنیم!
🧱 ساختار تگ a : ساده اما پرقدرت
تگ <a> یه تگ باز و بسته داره و پر از اتریبیوته که کارشو خفن می‌کنه:
<a href="link address"> متن لینک<a/>“متن لینک” همون چیزیه که کاربر می‌بینه و روش کلیک می‌کنه. بیایم یه مثال بزنیم:
<a href="http://last.test/">آوای وب</a>اینجا با کلیک رو “آوای وب”، می‌ری به سایت ما به همین راحتی!
📦 اتریبیوت‌های تگ <a>: ابزارای جادوییت
تگ <a> بدون اتریبیوتاش مثل ماشین بدون بنزینه بیایم همشو با هم بشکافیم:
✏️ اتریبیوت href : مقصد لینک
href (مخفف Hypertext Reference) می‌گه لینک کجا بره مثل آدرس! کاربردهاشو ببینیم:
✨ لنگر داخل صفحه: با id که یاد گرفتی، به یه بخش خاص تو صفحه برو:
<a href="#test">پرش به تست</a>
<h2 id="test">بخش تست</h2>کلیک کنی، صفحه می‌ره به اون بخش، عالی برای منوها!
✨ صفحه داخلی: به یه صفحه دیگه تو سایتت لینک بده:
<a href="contact.html">تماس با ما</a>کلیک کنی، صفحه می‌ره به صفحه تماس با ما.
✨ سایت خارجی: کاربراتو به یه جای دیگه بفرست:
این لینک دهی برای هدایت کاربر به سایت مورد نظر استفاده می‌شود، تقریبا مشابه مثال بالا اما این بار آدرس کامل سایت مورد نظر را وارد میکنیم به مثال زیر دقت کنید:
<a href="https://shahramnajafi.com">شهرام نجفی</a>با کلیک بر روی این لینک کاربر به سایت شخصی شهرام نجفی هدایت میشه.
⚠️ نکته:
شاید تو بعضی سایت‌ها دیدید که بعد از رفتن به یک صفحه به یک بخش خاصی از صفحه منتقل می‌شین یا به اصطلاح صفحه به اون بخش اسکرول کرده برای این کار کافیه که بعد از اضافه کردن لینک، id اون بخش مورد نظر را هم به ادامه اون لینک اضافه کنی، به مثال زیر دقت کن:
<a href="contact.html#test">تماس با ما </a>
<a href="https://google.com#test"> سایت گوگل </a>در هر دو مثال بالا بلافاصله بعد از لینک مرتبط، آی‌دی بخش مورد نظر هم اضافه شده که باعث میشه کاربر بعد از هدایت به صفحه مورد نظر به بخش مورد نظر که با ID مشخص شده هدایت بشه.
📞 شماره‌گیری: با tel: تماس راه بنداز:
اگه href با tel: شروع بشه، یه اتفاق خفن می‌افته با کلیک رو لینک، دستگاهت خودش شماره رو می‌گیره! تو موبایل که غوغا می‌کنه، حتی تو لپ‌تاپ و تبلت هم اگه اسکایپ یا فیس‌تایم داشته باشی، کار می‌کنه. بیا این مثال رو ببین:
<a href="tel:01010101"> تماس بگیرید </a>کلیک کنی، بیشتر دستگاها یه پیام می‌دن که «مطمئنی می‌خوای زنگ بزنی؟ بعدش زنگ می‌ره!
💬 لینک برای ارسال SMS
وقتی href با sms: شروع بشه، یه جادوی دیگه داریم کلیک کنی، دستگاهت آماده میشه SMS بفرسته! فقط تو دستگاهایی که پیامک دارن کار می‌کنه، ولی خیلی باحاله. اینو چک کن:
<a href="sms:01010101"> ارسال اس‌ام‌اس </a>📧 لینک برای ارسال ایمیل
اگه href با mailto: باشه، یه پل مستقیم به کاربرات می‌سازی! کلیک کنن، برنامه ایمیلشون باز میشه و می‌تونن سریع بهت ایمیل بزنن. این مثال رو ببین:
<a href="mailto:info@avaywerb.com"></a>دیگه لازم نیست آدرس کپی کنن همه‌چیز آماده‌ست! می‌خوای کاربرات راحت‌تر بهت برسن؟ این راهشـه مخصوصاً برای سوالا و نظراتشون غوغا می‌کنه.
موضوع و متن پیام:
می‌تونی موضوع و متن ایمیل رو هم خودت بذاری مثل یه پیام آماده:
<a href="mailto:info@avaywerb.com?subject=موضوع مورد نظر&body=پیام مورد نظر"></a>با این کد، موضوع و محتوا پیش‌فرض پر میشه کاربرات فقط کلیک می‌کنن و می‌فرستن. خفن‌تر از این نمی‌شه!
✏️ اتریبیوت target : کجا باز بشه؟
target می‌گه لینکت کجا بره مثل یه کنترل از راه دور! چهار تا گزینه باحال داره:
✨ blank
با blank_ لینک تو یه پنجره جدید باز میشه عالی برای بیرون سایت:
<a href="http://last.test/" target="_blank"> سایت آوای وب </a>کلیک کنی، تو تب جدید می‌ره کاربرات سایتت رو گم نمی‌کنن!
✨ self
با self_ لینک تو همون پنجره باز میشه پیش‌فرض و تمیز:
<a href="http://last.test/" target="_self"> سایت آوای وب </a>صفحه جدید جای الان رو می‌گیره برای داخل سایت باحاله!
✨ parent
parent_ لینک رو تو پنجره والد باز می‌کنه اگه فریم داری بترکونش:
<a href="http://last.test/" target="_parent"> سایت آوای وب </a>✨ top
top_ لینک رو تو بالاترین پنجره می‌بره فریما رو می‌شکنه:
<a href="http://last.test/" target="_top"> سایت آوای وب </a>هر جا باشی، به صفحه اصلی می‌ره غوغا می‌کنه!
✏️ اتریبیوت hreflang
اتریبیوت hreflang در تگ a به مرورگر و موتورهای جستجو اطلاع می‌ده که صفحه‌ای که لینک به آن اشاره داره، برای کدام زبان یا منطقه مناسبه. این اتریبیوت معمولاً برای لینک‌هایی استفاده میشه که به نسخه‌های متفاوت یک صفحه وب در زبان‌ها یا مناطق مختلف اشاره داره.
مثال:
<a href="https://www.example.com/page" hreflang="en"> انگلیسی </a>اینجوری همه می‌فهمن مقصد چه زبانیه سئو رو هم می‌ترکونه!
✏️ اتریبیوت download
با download لینک رو به دانلود فایل می‌بره مثل جادو:
مثال
<a href="https://example.com/images/image.gif" download> دانلود عکس </a>کلیک کنی، فایل دانلود میشه به همین راحتی!
✏️ اتریبیوت rel
rel می‌گه این لینک چه ربطی به صفحه‌ات داره بیا با هم مقادیرش رو ببینیم:
✨ nofollow
با nofollow به گوگل می‌گی دنبالم نیا، برای تبلیغات یا لینکای مشکوک:
<a href="https://youtube.com" rel="nofollow"> یوتیوب </a>رتبه‌ات رو حفظ می‌کنه حرفه‌ای کار کن!
✨ noopener
مقدار noopener امنیت رو می‌بره بالا به موتورهای جستجو می‌گه که صفحه جدیدی که از طریق این لینک باز میشه، ارجاعی به صفحه اصلی نداشته باشه. این می‌تونه جلوی حملات جاوااسکریپت را که توسط صفحات هدف (Target) ایجاد شدن رو بگیره.
<a href="https://example.com" rel="noopener"> سایت مثال </a>وقتی یک موتور جستجو لینکی را می‌بینه و وارد اون میشه، معمولاً از محیطی که این لینک رو باز کرده، خارج میشه. بنابراین، استفاده از “noopener” در لینک‌ها می‌تونه مفید باشد تا از احتمال ایجاد مشکلات در فرآیند ایندکس کردن توسط موتورهای جستجو پیشگیری بشه.
✨ noreferrer
noreferrer نمی‌ذاره مقصد بفهمه از کجا اومدی:
<a href="https://example.com" rel="noreferrer"> سایت مثال </a>هویتت مخفی می‌مونه مثل یه جاسوس وب!
✨ external
مقدار external به مرورگر می‌گه که لینک به یک منبع خارجی اشاره داره. این می‌تونه برای لینک‌هایی استفاده بشه که به صفحات خارج از دامنه سایت شما اشاره دارن.
<a href="https://example.com" rel="external"> سایت مثال </a>✨ author
author نشون می‌ده کی نویسنده‌ست:
<a href="https://shahramnajafi.com" rel="author"> شهرام نجفی </a>سئو رو قوی‌تر می‌کنه اسم نویسنده رو بترکون!
✨ alternate
استفاده از مقدار alternate به موتورهای جستجو اطلاع می‌ده که لینک به یک نسخه دیگه با زبانی دیگه یا جایگزین از صفحه اصلی موجوده.
<a href="https://example.com/alternate-version" rel="alternate"> سایت مثال </a>برای زبانای دیگه یا نسخه چاپی باحاله گوگل عاشقشه!
✨ bookmark
bookmark برای لنگرای خفنه، استفاده از مقدار “bookmark” در اتریبیوت rel به مرورگر و موتورهای جستجو اطلاع می‌ده که لینک به یک نشان‌گذاری یا علامت‌گذاری اشاره داره.
<a href="#test" rel="bookmark"> رفتن به بخش مورد نظر </a>کاربرا سریع می‌پرن به اون بخش غوغا می‌کنه!
✨ help
help به صفحه کمک یا منبع لینک می‌ده:
<a href="https://support.example.com/" rel="help">پشتیبانی و راهنما</a>کاربراتو راهنمایی کن بهترین حس رو بهشون بده!
✨ license
license میخواد بگه که این لینک به مجوز یا لایسنس محتوای صفحه اشاره داره! اگه سایتت یه سری قوانین استفاده، کپی‌رایت، یا مجوز قانونی داره، با این مقدار بهش لینک می‌دی. گوگل و کاربرا می‌فهمن که این صفحه چه جوری اجازه استفاده داره هم حرفه‌ایه، هم شفاف! بیا یه مثال ببینیم:
<a href="http://last.test//license" rel="license">مجوز استفاده</a>✨ search
search به صفحه جستجو می‌ره:
<a href="https://www.example.com/search.html" rel="search"> جستجو </a>کاربرا و گوگل رو به جستجو می‌بره خفنه!
✨ next
next به مرورگر و موتورهای جستجو اطلاع می‌ده که صفحه‌ی مقصد لینک، صفحه‌ی بعدی یک سری صفحات مرتبطه. مانند نتایج جستجو یا صفحات فهرست.
<a href="https://www.example.com/page2" rel="next"> صفحه بعد </a>✨ prev
prev به مرورگر و موتورهای جستجو اطلاع می‌دهد که صفحه‌ی مقصد لینک، صفحه‌ی قبلی یک سری صفحات مرتبط است. مانند نتایج جستجو یا صفحات فهرست.
<a href="https://www.example.com/page1" rel="prev"> صفحه قبل</a>✨ tag
tag به موتورهای جستجو و برنامه‌های خواننده RSS اطلاع می‌دهد که لینک مورد نظر به برچسب‌های مرتبط با محتوای صفحه اشاره داره.
<a href="https://www.example.com/tags/technology" rel="tag"> تکنولوژی </a>در این مثال، لینک به صفحه‌ای اشاره داره که تمام محتواهای مرتبط با برچسب “تکنولوژی” در وبسایت “example.com” نمایش داده میشه.
✨ sponsored
sponsored به موتورهای جستجو اطلاع می‌ده که لینک مورد نظر توسط یک تبلیغ‌دهنده یا اسپانسر پرداخت شده.
<a href="https://www.example.com/advertise" rel="sponsored"> تبلیغ </a>✨ UGC
UGC یا (User Generated Content) به موتورهای جستجو اطلاع می‌ده که محتوای لینک مرتبط با محتوای تولیدی کاربره. مثل نظرات، پست‌ها تو انجمن‌ها.
<a href="https://example.com/user-post" rel="UGC"> پست ارسالی کاربر </a>⚠️ اشتباهات رایج: گند نزن!
بعضی وقتا تازه‌کارا با تگ <a> خرابکاری می‌کنن:
- لینک شکسته:
hrefرو اشتباه ننویس مثلاً<a href="htp://google.com">. blank_بی‌جا: هر لینکی رو تو پنجره جدید باز نکن کاربرا اذیت می‌شن.- متن خالی:
<a href="#"></a>بدون توضیح نذار همیشه معنی‌دار باشه.
💡 نکات حرفه‌ای: مثل یه خفن کار کن
- لنگراتو کوتاه و معنی‌دار نگه دار مثل
#aboutنه#this-is-a-long-id. - برای لینکای خارجی همیشه
rel="noopener"بذار امنیتت می‌ره بالا. - با
<a>و id منوهای چسبنده بساز کاربرا عاشقشن! - سرعت سایتت رو با لینکای بهینه بالا ببر.
🏁 جمع‌بندی: تگ a، پل موفقیتت
تو این جلسه، تگ <a> رو از صفر تا صد یاد گرفتی از لینکای ساده تا کاربردای خفن مثل ایمیل و دانلود. حالا که لینک‌سازی رو بلدی، برو به جلسه بعدی و مسیر رو کامل‌تر کن. با آوای وب، هر قدم یه پله‌ست به سمت بهترین شدن ما تا آخر خط باهاتیم! در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.
💬 ایده‌هات رو فریاد بزن!
نظرت درباره تگ <a> چیه؟ دلت میخواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!
شهرام نجفی
همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.
برای نوشتن دیدگاه باید وارد بشوید.