تگ a در HTML چیست و چه کاربردی دارد؟ معروف‌ترین و متداول‌ترین روش لینک دهی در HTML چیست؟ تغییر رنگ “تگ a” به چه صورت است و چگونه می‌توانیم تگ a را استایل دهی کنیم؟ اگر به دنبال پاسخ این سوالات هستید و قصد دارید با خصوصیات یا صفات تگ a در html و کاربرد تگ a در html به صورت جامع و به همراه مثال آشنا شوید این مقاله را به هیچ عنوان از دست ندهید. هم چنین در این مقاله 13 صفت (یا همان ویژگی به انگلیسی attribute گفته می‌شود) پرکاربرد تگ a را با هم بررسی خواهیم کرد.
سرفصل‌های پست
معرفی تگ a
در این مقاله قصد داریم تا شما را با تگ a آشنا کنیم. لینک‌ها با استفاده از تگ <a> ایجاد می شوند. کاربران می‌توانند بر روی هر چیزی که بین این تگ <a> Text </a> قرار گرفته کلیک کنند. شما با استفاده از خاصیت href صفحه‌ای که قصد باز شدن آن را دارید را تعیین میکنید.
متنی که در بین تگ <a> قرار می‌گیرد به عنوان متن لینک شناخته می‌شود. تا جای ممکن به جای اکتفا کردن به متن “اینجا را کلیک کنید”، متن لینک باید برای بازدید کننده موضوع صفحه مقصد را توضیح دهد.
بسیاری از مخاطبان، وبسایت‌ها را برای پیدا کردن لینک‌ها از بین متن‌ها جستجو می‌کنند. متن link شفاف می‌تواند به مخاطبانتان کمک کند تا چیزی که نیاز دارند را پیدا کنند.
این مسئله به آن‌ها نگاه مثبت‌تری نسبت به وبسایت شما میدهد و تشویق می‌شوند تا مدت زمان بیشتری را در وبسایتتان سپری کنند.(همچنین به کسانی که از نرم افزارهای صفحه‌خوان استفاده می‌کنند کمک خواهد کرد.)
برای نوشتن یک متن لینک خوب، می‌توانید به این فکر کنید که کاربران از چه کلماتی برای جستجوی صفحه ای که به آن لینک میکنید استفاده خواهند کرد. به عنوان مثال به جای استفاده از عبارت مکانی برای اقامت بهتر است از چیزی دقیق تر مانند هتل در تهران استفاده کنید.
برای آشنایی کامل با لینک‌ها می‌توانید مقاله ما در رابطه با آشنایی به لینک‌ها و روش‌های لینک‌سازی را بخوانید.
لینک کردن به سایر وبسایت ها
همان طور که در ابتدا شرح داده شد از تگ <a> و خاصیت href برای ساخت پیوند استفاده می‌شود. مقدار خاصیت href در واقع آدرس صفحه‌ای است که می‌خواهید مخاطبان به آنجا منتقل شوند.
هنگامی که شما به یک صفحه از وبسایت دیگر لینک میکنید، مقدار href برابر با آدرس کامل وبسایت خواهد بود که به عنوان آدرس مطلق شناخته می‌شود.
لینک کردن به صفحات داخلی وبسایت
هنگامی که شما به صفحات داخل همان وبسایت لینک میکنید، نیاز نیست نام دامنه را در URL وارد کنید. شما می‌توانید از یک آدرس کوتاه تر که به عنوان آدرس وابسته شناخته می شود استفاده کنید.
اگر همه صفحه وبسایت در یک فولدر هستند، مقدار خاصیت href فقط نام فایل‌های صفحات خواهد بود.
اگر صفحات وبسایت در فولدر‌های جداگانه‌ای هستند، می‌توانید از روش پیچیده‌تری برای لینک‌دهی این صفحات در صفحات مرتبط استفاده کنید که در ادامه به آن اشاره خواهیم کرد.
<p>
<ul>
<li><a href="mizfa.html">خانه</a></li>
<li><a href="about-us.html">درباره ما</a></li>
<li><a href="seo.html">سـئو</a></li>
<li><a href="contact-us.html">تماس با ما</a></li>
</ul>
</p>
آدرس‌های وابسته
آدرس‌های وابسته زمانی قابل استفاده هستند که شما قصد ایجاد پیوند به صفحات وبسایت در داخل وبسایت را دارید. در این نوع لینک‌گذاری نیاز نیست نام دامنه را وارد کنید. آدرس‌های وابسته یک روش کوتاه برای اعلام محل فایل‌ها به مرورگر است تا مرورگر بداند که لینک به صفحه فعلی مرتبط است.
همچنین استفاده از آدرس‌های وابسته زمانی مفید است که شما در حال ساخت یک وبسایت جدید یا یادگیری HTML هستید. زیرا می‌توانید لینک‌های بین صفحات را حتی زمانی که بر روی کامپیوتر هستند ایجاد کنید. از آنجایی که نیاز نیست برای هر لینک نام دامنه را تایپ کنید، بنابراین نوشتن آن ها سریع‌تر هستند.
انواع لینک وابسته
به پوشه یکسان
برای لینک کردن فایل از صفحه‌ای که در همان فولدر قرار دارد کافیست نام فایل را بنویسید.
<a href="seo.html"> SEO </a>
پوشه زیر مجموعه
برای لینک‌کردن به نام یک فولدر زیر مجموعه، باید با اسلش نام فولدر نوشته شود.
<a href="seo/local.html"> Local SEO </a>
لینک سازی پوشه زیر مجموعه” width=”800″ height=”203″>
پوشه نوه
برای لینک دهی به یک پوشه که نوه فولدر فعلی است، باید مانند قسمت قبل با استفاده از اسلش از بیرونی‌ترین پوشه به سمت داخلی‌ترین فولدر آدرس‌دهی کنید.
<a href="seo/local/optimize.html"> Optimizing Website </a>
پوشه والدین
با استفاده از ../ می‌توان از بالاترین پوشه فعلی به صفحه مورد نظر لینک‌دهی کرد.
<a href="../local.html"> Local Seo </a>
پوشه والدین بزرگ
در این حالت شما قصد دارید به یک پوشه بالاتر از پوشه والدین لینک دهید برای این امر از ../../ استفاده کنید.
<a href="../../Optimize.html"> Optimizing Seo </a>
لینک ایمیل
برای ساخت یک لینک که برنامه ایمیل کاربر را اجرا میکند و به ایمیل خاصی اشاره میکند، می توانید از تگ <a> استفاده کنید. اما این بار مقدار خاصیت href با عبارت mailto: آغاز می‌شود و در ادامه آن ایمیلی که قصد ارسال پیام به آن را دارید نوشته می‌شود.
در ظاهر این لینک با یک لینک معمولی به یک صفحه هیچ تفاوتی ندارد اما هنگامی که کاربر روی آن کلیک میکند، برنامه مدیریت ایمیل کاربر باز می‌شود و یک صفحه ارسال ایمیل با آدرس تعیین شده به نمایش در خواهد آمد.
<a href="mailto:info@mizfa.com"> Email </a>
بازکردن لینک ها در پنجره جدید
اگر قصد دارید یک link را در صفحه جدید مرورگر باز کنید، باید از خاصیت target موجود در تگ <a> استفاده کنید. مقدار این خاصیت باید برابر با _blank باشد.
یکی از دلایل مهمی که صاحب وبسایت می‌خواهد لینک در صفحه جدیدی باز شوند این است که آن لینک به وبسایت دیگری اشاره میکند. در این حالت مدیر وبسایت امیدوار است کاربر بعد از بازدید از لینک و صفحه باز شده به صفحه مبدا بازگردد.
<a href="https://mizfa.com/blog" target="_blank"> Mizfa Blog </a>
لینک به بخش خاصی از صفحه فعلی
اگر در بالای یک صفحه طولانی قصد دارید از محتویات آن صفحه لینک‌هایی که به هر یک از بخش های صفحه اشاره دارند ایجاد کنید. یا ممکن است بخواهید در بخش پایین صفحه لینکی برای انتقال کاربر به بالای صفحه قرار دهید تا کاربر مجبور به اسکرول به بالا نباشد، باید از لینک داخل صفحه استفاده کنید.
مثال‌های بالا از مهمترین نمونه های استفاده از این نوع لینک هستند. قبل از اینکه لینک‌بخشی از صفحه را ایجاد کنید، باید نقطه‌هایی که قصد انتقال کاربر به آن‌ها را دارید را مشخص کنید. با استفاده از خاصیت id هر یک از المان‌های html می‌توانید نقاط را تعیین کنید. به عنوان مثال با تعریف id برای تگ‌های <h> می‌توان این بخش ها را از یک دیگر جدا کرد.
مقدار خاصیت id باید با یک حرف یا آندراسکور آغاز شود(نه با عدد یا کاراکتر دیگر) و همچنین در یک صفحه نباید دو المان با id مشابه وجود داشته باشند.
برای لینک‌کردن به یک المان که از خاصیت id استفاده میکند می‌بایست دوباره به سراغ تگ <a> برویم، این بار مقدار خاصیت href با علامت # آغاز می‌شود و سپس مقدار خاصیت id المان مورد نظر.
<h1 id="top"> Seo Terms </h1>
<a href="#local"> Local Seo </a> <br>
<a href="#external"> External Seo </a> <br>
<a href="#optimize"> Optimize Page </a> <br> <br>
<h2 id="local"> Local Seo </h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<h2 id="external"> External Seo </h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<h2 id="optimize"> Optimize Page </h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p> <a href="#top"> Top </a></p>
See the Pen A Tag in HTML by MIZFA.COM (@mizfa) on CodePen.
لینک به بخشی از صفحه دیگر
اگر قصد دارید به بخش خاصی از یک صفحه دیگر لینک دهید، می توانید از تکنیک بالا استفاده کنید. به عبارتی تا زمانی که صفحات دیگر دارای المان‌هایی با خاصیت id یکتا هستند می توانید با تکنیک بالا به بخشی از آن صفحه لینک دهید.
بدین منظور خاصیت href باید شامل آدرس صفحه(آدرس وابسته یا مطلق) و پس از آن علامت # و نام id تعیین شده در صفحه مقصد باشد.
<a href="../image.html/#local"> Local Seo </a>
صفات تگ a
تگ a دارای صفات مختلفی است که مهمترین آن صفت href برای ایجاد پیوند و لینک است. البته فراموش نکنیم که مانند باقی تگ‌های HTML بعضی از صفات موجود در آخرین نسخه HTML یعنی HTML5 پشتیبانی نمی‌شود.
در جدول زیر لیست صفت‌های تگ a را مشاهده می‌نمایید.
| ردیف | صفت ها | مقدار | توضیحات |
| ۱ | charset | char_encoding |
این صفت در HTML5 پشتیبانی نمی‌شود. مجموعه کارکتر‌های مجاز در سند لینک شده را مشخص میکند. |
| ۲ | coords | coordinates |
این صفت در HTML5 پشتیبانی نمی‌شود. مختصات یک لینک را مشخص میکند. |
| ۳ | download | filename |
این صفت در HTML 5 اضافه شده است. با این صفت وقتی کاربر روی لینک کلیک میکند، مرورگر محتویات لینک را دانلود میکند. |
| ۴ | href | URL | آدرس URL لینک را با استفاده از این صفت وارد میکنیم. |
| ۵ | hreflang | language_code | زبان لینک را مشخص میکند. |
| ۶ | media | media_query | با این صفت رسانه یا دستگاه لینک شده را مشخص میکند. |
| ۷ | name | section_name |
این صفت در HTML5 پشتیبانی نمی‌شود. به جای آن از صفت عمومی id استفاده کنید. یک نام اختصاصی برای لینک مشخص میکند. |
| ۸ | ping | list_of_URLs |
یک عملیات ping را برای ردیابی لیستی از لینک‌ها در پس‌زمینه انجام میدهد. |
| ۹ | rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
ارتباط بین صفحه فعلی و پیوند معرفی شده را مشخص میکند. |
| ۱۰ | rev | text |
این صفت در HTML5 پشتیبانی نمی‌شود . ارتباط بین پیوند وارد شده و صفحه فعلی را مشخص میکند. |
| ۱۱ | shape | default rect circle poly |
این صفت در HTML5 پشتیبانی نمی‌شود . شکل یک لینک را مشخص میکند. |
| ۱۲ | target | _blank _parent _self _top framename |
نحوه بازگشایی لینک را مشخص میکند. |
| ۱۳ | type | media_type | نوع رسانه را مشخص میکند. |
صفات عمومی
تگ <a> از صفات عمومی HTML پشتیبانی میکند.
صفات رویدادی
تگ <a> از صفات رویدادی پشتیبانی میکند.
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
با توجه به توضیحات این مقاله و مقاله آشنایی با id ها، یک صفحه HTML بسازید و بخش های مختلفی از صفحه را با معرفی id و لینک سازی به همدیگر وصل کنید.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
ایجاد پیوند یا لینک یکی از مهمترین بخش‌های طراحی یک وب سایت است و شما با لینک‌دهی داخلی و خارجی مسیر کاربران را واضح‌تر میکنید. پس اگر این مقاله را با دقت مطالعه نکردید، پیشنهاد میکنم که یکبار دیگر از ابتدا آن را بررسی کنید تا کاملا این موضوع را یاد بگیرید.
امیدوارم از این قسمت آموزش HTML استفاده لازم را برده باشید. شما می‌توانید از طریق برچسب‌ها مقالات مربوط به لینک‌سازی را دنبال کنید.
دیگر آموزش‌های HTML را در بلاگ میزفا دنبال کنید.
43 پاسخ
من از صفت download استفاده می کنم تو کدم اما کار نمیکنه ، اسکرین شاتشو میفرستم ، اگه ممکنه راهنمایی کنین
ممنون
درود
باید download رو همینطوری خالی بذاری. شما اومدی مقدار به download دادی.
جواب سوال رو با اسکرین شات فرستادم
سلام امیر ممنون از تعداد تعامل بالات. ما داریم یه مقدار دیر جواب این کامنتت رو میدیم و امیدواریم تا الان به مرحله خوبی توی Frontend رسیده باشی.
سلام
مطلب عالی و جالبی بود
لینک هم کاملا درسته و کار میکنه
سلام خوشالیم از حضور شما
سلام و وقت بخیر میشه بفرمایید چرا رنگ متن لینک تحت تاثیر پدر تغییر نمیکنه؟
ببینید به طور کلی تگ a از عناصر بالادستی یا همون به اصلاح پدر خودش ارث بری نمیکنه و برای اینکه اینکار رو بکنه فقط کافیه بنویسید : color:inherit و به تگ a پاسش بدید.
در غیر اینصورت به خاطر خود تگ هستش که رنگ نمیگیره از عنصر بالادستی خودش.
سلام اگر به یک عنوان برای مثال دارای تگ h2 داره، بهتره تگ h2 داخل a باشه یا برعکس؟
سلام
من باشم h2 داخل a میذارم
مثلا مثل این تصویر لینک اون عنصر با https:// شروع میشه.
ولی شما توی مقالتون گفتید که باید نام اون فایل رو برای آدرس دهی بنویسیم.
میشه توضیح بدید؟
سلام محمد، توی دیدگاه قبلیت توضیح دادم، باید از تگ a و خاصیت href استفاده بکنی.
سلام.
ببخشید من یه سوالی داشتم.
اینکه قبل از اینکه فایل های یک وب سایت بر روی سرور برن چجوری لینک سازی شده بودن؟
سلام از تگ a استفاده شده دیگه، از خاصیت href استفاده میشه.
سلام من با استفاده از گرید تویcss به آیتم هام عکس دادم و حالا میخوام توی html به آیتم های html لینک بدم اما لینک روی عکسها اعمال نمیشن اصلا و موس روی اونها تبدیل به دست نمیشه میشه لطفا راهنمایی کنین مشکل از کجاست ممنونم
سلام وقت بخیر
وقتی کدهای شما رو ندیدیم چطوری متوجه بشیم مشکل از کجا هست؟ پیشنهاد میشه کدها رو بفرستید تا بشه دید.
اینجا به کلاس آیتم1 لینک دادم
سلام آیدا، مشکلت اینجاست که تگ a رو داخل div قرار دادی. ببر خارج از div مشکلت حل میشه.
اینجا هم دیسپلی گریده و آیتم 1 عکس داره اما عکس لینک دار نمیشه اون لینکa که توی html میزنم روس عکس اعمال نمیشه
با سلام و احترام
چگونه متوجه شویم بنر یک سایت (که قابلیت لینک شدن دارد)، تگ a دارد یا خیر؟
با تشکر
سلام علی عزیز، با استفاده از inspect elements میتونی چک کنی.
سلام
من تازه میخوام html رو یاد بگیرم و میخواستم بدونم لینک کردن به ایمیل در چه مواقعهای به کارمون میاد؟ چطور میشه که ایمیلی برای ما ارسال مشه و اگه میشه یک سایتی که این کار رو کرده معرفی کنید.
سلام محمد.
ما اصولا ایمیل ها رو لینک دار میکنیم تا اگر کسی تمایل داشت از طریق ایمیل ما با در تماس باشه بتونه با زدن روی ایمیل مستقیم وارد بخش نرم افزارهای ایمیل بشه. اصولا در صفحه تماس با ما و یا قسمت هایی که حس میکنیم کاربران کارمون دارن ایمیل هامون رو لینک دار میکنیم.
ممنونم بابت توضیح تون اقای آریافر
این سایت های کلاه برداری که اطلاعات کارت رو میدزدن هم از این روش استفاده میکنن؟
خیر ربطی نداره.
شما اگر موقع پرداخت به ادرس سایت دقت کنید و دقیقا دقیقا آدرس shaparak.ir داخلش داشته باشه دیگه نیازی نیست نگران دزدیدن اطلاعات کارت ها باشید.
خیلی خیلی ممنونم بابت جواب دادن❤❤??
سلام مطالب سایت عالیه بنده تازه برنامه نویسی رو شروع کردم و چند وقتیه به یک مشکل خوردم راستش این مشکل بعضی وقتا برام پیش میاد و راحل های زیادی رو رفتم ولی جواب نداد بنده وقتی کد رو مینویسم برای اجراش روی مرورگر حرکات ناخوانا مثل حروف چینی میاد یا خود تگ ها نمایش داده میشه و باید کل صفحه رو پاک کنم و دوباره هم کدهارو بنویسم تا اجرا بشن
مثلا خروجی کدها توی مرورگر مطالب زیر هستش در واقع خود کدهایی ک من نوشتم رو میاره و یسری حروف ناخوانا ممنون میشم راهنماییم کنید
البته اینایی ک پایین هست ی بخش کوچیکش کپی کردم برای شما و همش نیست
�!DOCTYPE HTML> Header { Width:100%; Height:60px; Background-color:#bcffc6; Text-align:center; Position:fixed; Top:0px; Right:0.5px; } .link { Color:#343434; Font-size:x-large; Text-decoration:none; Border-bottom:1px dashed; Border-color:#bcffc6; } #menu { Width:85%; Height:0 auto; Paddسلام وحید
چون شما دارید از blog دات آر آی استفاده میکنید، این سایت یک سری ساختارهای منحصربه فرد داره و باید براساس قوانین اونجا جلو بری. پیشنهاد میشه راهنمای این وبلاگ رو بخون.
سلام آقای آریافر راستش این مشکل عدم اجرا شدن کدها توی بلاگ بیان فقط از طریق گوگل کروم هستش قبلا اینطور نبود یعنی درست کار می‌کرد ولی الان با کروم کار نمیکنه و باید سامانه مدیریتی بیان رو توی فایرفاکس باز کنم و از اونجا کدها و کپی کنم بدون مشکل بالا میاره میخام بپرسم راحل چیه آیا کدی هست ک من به کدها اضافه کنم تا مرورگر کروم هم بشه کدهارو وارد کرد درضمن خروجی کدها توی هردو مرورگر یکی هست و مشکلی نداره و بالا میاره فقط کدها توی کروم وقتی وارد میشه به شکل حروف ناخوانا میاد و نمیشه اوکی رو زد تو بیان تا تایید بشن و حتما باید از فایرفاکس استفاده کرد
منتظر راهنمایی خوبتون هستم:)
سلام وحید عزیز، پیشنهاد میکنم با پشتیبانی خود بلاگ بیان در ارتباط باشی چون اون ها بهتر از بقیه میتونن کمکت کنن و اگر تغییری در ساختار کد هاشون قرار داده باشن میتونن مطلعت کنن.
موفق باشی.
سلام
من مطالب رو کامل خوندم ولی جواب سوالم رو نگرفتم
یک قالب دارم که میخام یک لینک براش بسازم که مثلا وقتی طرف از مرورگر فایرفاکس وارد سایت شد مثلا زده (سایت را به مرورگر کروم باز کنید/کلیک کنید) بعد طرف بزنه روی لینک و سایت از طریق مرورگر کروم براش باز بشه امکان داره بگید باید چیکار کنم
خیلی سادست میخام ی نوشته بنویسم لینک دارش کنم که تا بازدید کننده کلیک کرد روش سایت از طریق مرورگر کروم براش باز بشه
ممنون
سلام وحید عزیز.
اول که پیامت رو خوندم گفتم شاید در سطح دانش من نیست که این کار رو انجام بدم که مثلا با فایرفاکس که پس از کلیک بر روی لینک با مرورگر کروم صفحه باز بشه ، برای همین تحقیق کردم و مراجع مختلفی رو بررسی کردم و متاسفانه نتونستم بازم نتیجه ای پیدا کنم که چطور این کار رو انجام بدی. فکر نکنم با استفاده از مرورگر فایرفاکس بتونی لینکی ایجاد بکنی که داخل کروم باز بشه. اگر هم بشه در سطح دانش من نیست متاسفانه. تنها راهنمایی ای که میتونم بهت بکنم اینه که با استفاده از جاوا اسکریپت نوع مرورگر رو تشخیص بدی و بهشون اطلاع بدی که برای باز شدن این لینک باید از مرورگر کروم استفاده کنند ولی اینکه بعد از کلیک کروم باز بشه رو من نمیتونم راهنماییت کنم.
درمورد مقادیر صفت type یه مثال میزنین بی زحمت
سلام احسان جان،
مثلا کد زیر یک نمونه از مدیا تایپ های قابل استفاده هستش.
همچنین اگر Media Type های دیگر رو هم میخوای در رابطشون بدونی میتونی داخل وب سایت iana در موردشون بخونی.
موفق باشی
سلام برای من یه آدرسی فرستادن هرجور میخوا وارد شوم نمی‌شود باید چیکار کنم من را راهنمایی کنید. متشکرم. آدرس این هست.
a href=’/findmelink’ target=’_blank’
سلام مهراد. این ادرسی که فرستادی اشتباه هست
سلام برای من یه آدرسی فرستادن هرجور میخوا وارد شوم نمی‌شود باید چیکار کنم من را راهنمایی کنید. متشکرم.این آدرس چیست.
سلام مهراد جان. من لینک رو بررسی کردم. لینک رو بهت اشتباه دادن. درواقع این لینک هست findmelink
ولی خب لینک اشتباه هست و کامل نیست. میخوای همین عبارت بالا رو در گوگل سرچ کن ببین چی پیدا میکنی.
ممنون آقای اریافر متشکرم ازاینکه کمکم کردید
خواهش میکنم. امیدوارم براتون مفید بوده باشه.
مفید که واقع نشود. چون گوگل برای من html
میاره ومن اصلا نمیدونم چی برنامه ی هست. این برنامه چی هست
ممنونم بابت این مقاله مفید و کامل
سلام دوست من، ممنونم از پیامتون و خوشحالم مقاله براتون مفید بوده. برای اطلاع از آخرین آموزش های منتشر شده در میزفا میتونید در خبرنامه میزفا عضو بشید. موفق باشید… ?