تگ a در html

از تگ <a> یا Anchor برای پیوند یا لینک دهی به یک صفحه یا فایل در همان صفحه یا صفحات دیگر استفاده می‌شود، تگ a دارای یک Attribute یا ویژگی ضروری به نام href است که مسیر یا پیوند صفحه یا فایل مورد نظر در این ویژگی قرار می‌گیرد. به طور معمول این تگ در تمامی مرورگرها با رنگ آبی و همراه با زیرخط نشان داده می‌شود.

نحوه استفاده از تگ <a>

تگ a دارای بخش پایانی بوده و محتوای داخلی تگ شامل توضیحات، راهنما ( مثال ادامه مطلب ) و یا نام فایل مورد نظر است و مسیر یا پیوند فایل یا صفحه نیز در ویژگی href تگ Anchor قرار می‌گیرد.

 <a href="https://hamgamweb.com">ورود به سایت همگام وب</a> 

attribute یا ویژگی‌های قابل استفاده در تگ‌های <a>

تگ a می‌تواند دارای چندین ویژگی یا attribute باشد که برخی از این ویژگی‌های ضروری و برخی دیگر اختیاری هستند.

href

ویژگی href آدرس صفحه یا فایل را مشخص می کند. استفاده این ویژگی برای تگ <a> ضروری است. همچنین با استفاده از href می‌توانید به id یا شناسه دیگر المنت‌های صفحه آدرسی دهی کنید تا هنگام کلیک بر روی لینک صفحه به بخش مورد نظر اسکرول شود.

<a href="https://hamgamweb.com">ورود به سایت همگام وب</a>  
<a href="https://hamgamweb.com/#top">اسکرول به بالای صفحه</a>

hreflang

ویژگی hreflang زبان صفحه یا فایل پیوند شده را مشخص می کند. این ویژگی فقط در صورتی استفاده می شود که ویژگی href تنظیم شده باشد. مقادیر قابل استفاده در این ویژگی کد دو حرفی زبان است برای مثال fa، en.

<a href="https://hamgamweb.com" hreflang="fa">ورود به سایت همگام وب</a>  

download

ویژگی download مشخص می کند که هدف (آدرس قرار داده شده در ویژگی href) دانلود است و زمانی که کاربر روی لینک کلیک می کند فایل موجود دانلود می شود. این ویژگی میتواند دارای مقدار و یا بدون مقدار باشید، مقدار وارد شده نام فایل دانلود شده است و در صورتی که مقداری وارد نشود مرورگر از روی آدرس نام فایل را تشخیص می‌دهد.

<a href="/images/hamgamweb-logo.jpg" download> 
<a href="/images/hamgamweb-logo.jpg" download="hamgamweb"> 

media

ویژگی media مشخص می کند که سند پیوند داده شده برای چه دستگاهی (مثال آیفون) مناسب یا بهینه شده است. ویژگی media فقط در صورتی کاربرد دارد که تگ <a> دارای ویژگی href باشد.

<a href="page.asp?output=print"
media="print and (resolution:300dpi)">page for print.</a> 

ping

ویژگی ping برای اطلاع دادن به مرجع URL قرار داده شده در href استفاده می‌شود. هنگامی که کاربر روی لینک کلیک می کند، ویژگی ping یک درخواست کوتاه HTTP POST به URL مشخص شده ارسال می کند.

<a href="https://example.com/html" ping="https://example.com/trackpings"> 

referrerpolicy

ویژگی ReferrerPolicy مشخص می کند که وقتی کاربر روی لینک کلیک می کند، چه اطلاعاتی از سمت ارجاع دهنده (شما) ارسال شود، این رویکردها به دلیل حفظ حریم خصوصی کاربران برای درخواست‌های cross-origin استفاده می‌شود. این ویژگی دارای چندین مقدار است که در لیست زیر هریک از مقادیر توضیح داده شده است.

  • no-referrer: هیچ اطلاعات ارجاعی ارسال نمی شود.
  • no-referrer-when-downgrade: پیش فرض اگر سطح امنیتی پروتکل یکسان و یا بالاتر باشد، مبدا، مسیر، و یا رشته پرس و جو را ارسال می کند، http-to-http, https-to-https و http-to-https ارسال می‌شود اما https-to-http ارسال نخواهد شد چرا که سطح امنیتی پروتکل پایین تر است.
  • origin: مبدا (scheme، host و port) سند را ارسال می کند.
  • origin-when-cross-origin: این مقدار origin، path و query string را برای درخواست همان مبدا ارسال می کند. اطلاعات کامل referrer (شما، ارجاع دهنده) برای درخواست‌هایی که از دامنه‌های مشابه صورت می‌گیرند ارسال می‌شود، در غیر این صورت اطلاعات referrer تنها شامل دامنه مبدا است.
  • same-origin: در این حالت، اگر یک درخواست از یک منبع با دامنه مشابه (same-origin) صورت گیرد، اطلاعات کامل referrer به صورت پیشفرض به درخواست مورد نظر اضافه خواهد شد. در غیر این صورت درخواست بدون هیچگونه اطلاعات اضافی ارسال می‌شود.
  • strict-origin-when-cross-origin: این مقدار مشابه no-referrer-when-downgrade بوده با این تفاوت که no-referrer-when-downgrade برای سایت‌هایی که هم از HTTP و HTTPS استفاده می‌کنند مناسب است اما این مقدار برای سایت‌هایی که از دامنه‌های مختلف استفاده می‌کنند، مناسب است.
  • unsafe-url: این مقدار تمامی اطلاعات (origin، path و query string) را بدون در نظر گرفتن امنیت و سطح پروتکل ارسال می‌کند. از این مقدار با دقت استفاده کنید!
 <a href="https://hamgamweb.com" referrerpolicy="no-referrer"> 

rel

ویژگی rel رابطه بین سند یا صفحه جاری و URL یا همان مقدار href را مشخص می کند. این ویژگی فقط در صورتی استفاده می شود که ویژگی href تنظیم شده باشد. موتورهای جستجو می توانند از این ویژگی برای دریافت اطلاعات بیشتر در مورد یک لینک استفاده کنند.

  • nofollow: پیوند به یک سند تأیید نشده (مثال تبلیغات). همچنین nofollow توسط Google استفاده می‌شود تا مشخص کند که ربات‌های جستجوی Google نباید آن پیوند را دنبال کنند.
  • noopener: پیوند به یک صفحه‌ی جدید با یک context جدید و مستقل، بدون اینکه ارتباطی با صفحه‌ی فعلی داشته باشد.
  • noreferrer: جلوگیری از ارسال اطلاعات از صفحه ارجاع دهنده. در این حالت وقتی کاربر روی لینک کلیک می‌کند مشخصات ارجاع دهنده در URL مقصد در دسترس نخواهد بود.
  • external: نشان می دهد که URL ارجاع شده بخشی از همان سایت نیست (پیوند به سایت دیگر است).
  • alternate: پیوند به یک صفحه جایگزین از صفحه فعلی (مثال صفحه چاپ، صفحه ترجمه ترجمه).
  • author: پیوند را به نویسنده صفحه.
  • bookmark: پیوند یا URL دائمی (مورد استفاده برای bookmark)
  • help: پیوند به یک سند راهنما در خصوص صفحه.
  • license: پیوند به اطلاعات مجوز برای صفحه.
  • next: پیوند به صفحه بعدی موضوع.
  • prev: پیوند به صفحه قبلی موضوع.
  • search: پیوند به ابزار جستجو برای سند.
  • tag: پیوند به برچسب (کلمه کلیدی) برای صفحه فعلی.
<a rel="nofollow" href="http://example.com/">Example</a> 

target

ویژگی target مشخص می کند که URL مقصد یا صفحه پیوند شده کجا باز شود.

  • _self: باز شدن در همان frame که روی آن کلیک شده است (پیش فرض).
  • _parent: باز شدن در frame والد.
  • _top: باز شدن در بالاترین و اولین frame والد.
  • _blank: باز شدن در یک پنجره جدید.
  • framename: باز شدن در iframe نامگذاری شده.
<a href="https://hamgamweb.com" target="_blank">HGW</a>
<a href="https://hamgamweb.com" target="showsite">HGW</a>
<iframe src="https://example.com" name="showsite" width="300" height="150"></iframe>

type

ویژگی type در تگ <a> برای تعیین نوع یا فرمت محتوایی که در لینک وجود دارد، استفاده می‌شود، برای مثال فایل‌های PDF، تصاویر، ویدئوها و غیره. اگرچه استفاده از این ویژگی برای تگ a به صورت اختیاری است، اما این اطلاعات به مرورگرها کمک می‌کنند تا بتوانند با استفاده از نرم‌افزار مناسب هر فایل، آن فایل را باز کنند. برای فهرست کامل انواع رسانه های استاندارد به صفحه IANA Media Types مراجعه کنید.

<a href="https://hamgamweb.com" type="text/html">hamgamweb.com</a>
<a href="hamgamweb.com/file.pdf" type="application/pdf">Download PDF</a>  

Global Attributes

تگ <a> از Global Attributes در HTML پشتیبانی می کند.

Event Attributes

تگ <a> از Event Attributes in HTML در HTML پشتیبانی می کند.

ویژگی‌های ظاهری پیشفرض در تگ <a>

اکثر مرورگرها تگ <a> را با مقادیر پیش فرض زیر نمایش می دهند:

a {
  display: inline;
  text-decoration: underline;
}
a:link, a:visited {
  color: (internal value);
  cursor: auto;
}
a:link:active, a:visited:active {
  color: (internal value);
}

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

پروژه محور - ارتباط مستقیم با مدرس