مرجع عناصر HTML : عنصر <a>
عنصر <a> HTML (یا عنصر لنگر)، با ویژگی href خود، یک پیوند به صفحات وب، فایلها، آدرسهای ایمیل، مکانهای موجود در همان صفحه یا هر چیز دیگری که یک URL میتواند به آن آدرس دهد، ایجاد میکند.
محتوای درون هر <a> باید مقصد پیوند را نشان دهد. اگر ویژگی href وجود داشته باشد، فشردن کلید enter در حالی که روی عنصر <a> فوکوس کردهاید، آن را فعال میکند.
ویژگیهای این عنصر شامل ویژگیهای سراسری است.
-
مشخص میکند که میخواهید مرورگر یک هدر ارسال کند. در سمت سرور، این برای فعال کردن ارسال یک هدر در پاسخ، برای ثبت یک منبع انتساب مبتنی بر ناوبری، استفاده میشود.
مرورگر دادههای منبع مرتبط با منبع انتساب مبتنی بر ناوبری (همانطور که در هدر پاسخ ارائه شده است) را هنگامی که کاربر روی لینک کلیک میکند، ذخیره میکند. برای جزئیات بیشتر به API گزارشدهی انتساب مراجعه کنید.
دو نسخه از این ویژگی وجود دارد که میتوانید تنظیم کنید:
- ، یعنی فقط نام . این مشخص میکند که میخواهید هدر به همان سروری ارسال شود که ویژگی href به آن اشاره میکند. این زمانی خوب است که شما ثبت منبع انتساب را در همان سرور مدیریت میکنید.
- مقداری که شامل یک یا چند URL باشد، برای مثال:
این در مواردی مفید است که منبع درخواستی روی سروری که شما کنترل میکنید نیست، یا فقط میخواهید ثبت منبع انتساب را روی سرور دیگری انجام دهید. در این حالت، میتوانید یک یا چند URL را به عنوان مقدار مشخص کنید. هنگامی که درخواست منبع رخ میدهد، هدر علاوه بر مبدا منبع، به URL(های) مشخص شده در ارسال میشود. سپس این URLها میتوانند با برای تکمیل ثبت پاسخ دهند.
مشخص کردن چندین URL به این معنی است که میتوان چندین منبع انتساب را روی یک ویژگی ثبت کرد. برای مثال، ممکن است کمپینهای مختلفی داشته باشید که میخواهید موفقیت آنها را اندازهگیری کنید، که شامل تولید گزارشهای مختلف روی دادههای مختلف است.
عناصر نمیتوانند به عنوان محرکهای انتساب استفاده شوند، فقط منابع.
- دانلود
باعث میشود مرورگر URL لینک شده را به عنوان یک دانلود در نظر بگیرد. میتواند با یا بدون مقدار نام فایل استفاده شود:
- بدون مقدار، مرورگر یک نام فایل/افزونه پیشنهاد میدهد که از منابع مختلف تولید شده است:
سربرگ HTTP مربوط به
بخش پایانی در مسیر URL
نوع رسانه (از سربرگ ، شروع ، یا برای )
- نام فایل: تعریف یک مقدار، آن را به عنوان نام فایل پیشنهاد میدهد. کاراکترهای / و \ به زیرخط (_) تبدیل میشوند. سیستمهای فایل ممکن است کاراکترهای دیگر را در نام فایلها ممنوع کنند، بنابراین مرورگرها در صورت لزوم نام پیشنهادی را تنظیم میکنند.
دانلود فقط برای URL های با مبدا یکسان یا طرحهای و کار میکند.
نحوه برخورد مرورگرها با دانلودها بسته به مرورگر، تنظیمات کاربر و سایر عوامل متفاوت است. ممکن است قبل از شروع دانلود از کاربر سوال شود، یا فایل به طور خودکار ذخیره شود، یا ممکن است به طور خودکار باز شود، چه در یک برنامه خارجی و چه در خود مرورگر.
اگر سربرگ Content-Disposition اطلاعات متفاوتی از ویژگی دانلود داشته باشد، رفتار حاصل ممکن است متفاوت باشد:
اگر سربرگ نام فایل را مشخص کند، نسبت به نام فایل مشخص شده در ویژگی دانلود اولویت دارد.
اگر سربرگ حالت inline را مشخص کند، کروم و فایرفاکس این ویژگی را اولویتبندی کرده و آن را به عنوان دانلود در نظر میگیرند. نسخههای قدیمی فایرفاکس (قبل از ۸۲) سربرگ را اولویتبندی کرده و محتوا را به صورت inline نمایش میدهند.
- href
آدرس اینترنتی که هایپرلینک به آن اشاره میکند. لینکها محدود به آدرسهای اینترنتی مبتنی بر HTTP نیستند - آنها میتوانند از هر طرح URL پشتیبانی شده توسط مرورگرها استفاده کنند:
شماره تلفنها با - charset
اشاره به کدگذاری کاراکتر URL لینکشده.
این ویژگی منسوخ شده است و نباید توسط نویسندگان استفاده شود. از هدر در URL لینکشده استفاده کنید.
- coords
با ویژگی shape استفاده میشود. فهرستی از مختصات که با کاما از هم جدا شدهاند.
- name
برای تعریف یک مکان هدف احتمالی در یک صفحه لازم بود. در ، id و name هر دو میتوانستند در <a> استفاده شوند، مادامی که مقادیر یکسانی داشته باشند.
به جای آن از ویژگی سراسری id استفاده کنید.
- rev
یک لینک معکوس مشخص کرد؛ نقطه مقابل ویژگی rel. به دلیل گیجکننده بودن بسیار منسوخ شده است.
- shape
شکل ناحیه هایپرلینک در یک نقشه تصویر.
به جای آن از عنصر برای نقشههای تصویر استفاده کنید.
متن لینک ضعیف و غیرقابل دسترسی
محتوای داخل یک لینک باید نشان دهد که لینک به کجا میرود، حتی اگر خارج از متن باشد.
متاسفانه یک اشتباه رایج این است که فقط کلمات "اینجا کلیک کنید" یا "اینجا" را لینک کنید:
متن لینک قوی و قابل دسترسی
خوشبختانه، این یک راه حل آسان است، و در واقع کوتاهتر از نسخه غیرقابل دسترسی است!
نرمافزارهای کمکی، میانبرهایی برای فهرست کردن تمام لینکهای یک صفحه دارند. با این حال، متن لینک قوی برای همه کاربران مفید است - میانبر «فهرست کردن تمام لینکها» نحوه مرور سریع صفحات توسط کاربران بینا را شبیهسازی میکند.
عناصر لنگر اغلب به عنوان دکمههای جعلی مورد سوءاستفاده قرار میگیرند، به این صورت که href آنها را روی # یا تنظیم میکنند تا از رفرش شدن صفحه جلوگیری شود و سپس به رویدادهای کلیک آنها گوش میدهند.
این مقادیر href جعلی باعث ایجاد رفتار غیرمنتظره هنگام کپی/کشیدن لینکها، باز کردن لینکها در یک تب/پنجره جدید، بوکمارک کردن یا هنگام بارگیری، خطا یا غیرفعال شدن جاوا اسکریپت میشوند. آنها همچنین معانی نادرستی را به فناوریهای کمکی مانند صفحهخوانها منتقل میکنند.
به جای آن از استفاده کنید. به طور کلی، فقط باید از یک هایپرلینک برای پیمایش به یک URL واقعی استفاده کنید.
لینکهای خارجی و لینک دادن به منابع غیر HTML
لینکهایی که با استفاده از در یک تب/پنجره جدید باز میشوند، یا لینکهایی که به یک فایل دانلود اشاره میکنند، باید نشان دهند که پس از دنبال کردن لینک چه اتفاقی خواهد افتاد.
افرادی که دچار مشکلات بینایی کم هستند، با کمک فناوری خواندن صفحه نمایش پیمایش میکنند یا مشکلات شناختی دارند، ممکن است وقتی یک تب، پنجره یا برنامه جدید به طور غیرمنتظره باز میشود، گیج شوند. نرمافزارهای قدیمیتر خواندن صفحه نمایش حتی ممکن است این رفتار را اعلام نکنند.
لینکی که یک برگه/پنجره جدید باز میکند
اگر از یک آیکون برای نشان دادن رفتار لینک استفاده میشود، مطمئن شوید که دارای ویژگی alt برای توصیف هدف آن باشد. در صورتی که آیکون وجود نداشته باشد، محتوای ویژگی alt همچنان رفتار لینک را منتقل میکند.
لینک پرش، لینکی است که در اسرع وقت در محتوای قرار میگیرد و به ابتدای محتوای اصلی صفحه اشاره میکند. معمولاً CSS لینک پرش را تا زمانی که فوکوس روی آن انجام نشود، از صفحه پنهان میکند.
عناصر تعاملی، مانند لینکها، باید فضایی به اندازه کافی بزرگ فراهم کنند که فعال کردن آنها آسان باشد. این به افراد مختلفی کمک میکند، از جمله افرادی که مشکلات کنترل حرکتی دارند و افرادی که از ورودیهای غیردقیق مانند صفحه لمسی استفاده میکنند. حداقل اندازه ۴۴×۴۴ پیکسل CSS توصیه میشود.
لینکهای متنی در محتوای نثر از این الزام معاف هستند، اما همچنان ایده خوبی است که مطمئن شوید متن کافی برای فعال شدن آسان، هایپرلینک شده است.
درک معیار موفقیت ۲.۵.۵: اندازه هدف
اندازه هدف و ۲.۵.۵
آزمون سریع: اهداف لمسی بزرگ
عناصر تعاملی، مانند لینکها، که در مجاورت بصری نزدیک قرار میگیرند، باید دارای فاصله باشند تا از هم جدا شوند. فاصلهگذاری به افرادی که مشکلات کنترل حرکتی دارند کمک میکند، زیرا در غیر این صورت ممکن است به طور تصادفی محتوای تعاملی اشتباه را فعال کنند.
فاصلهگذاری ممکن است با استفاده از ویژگیهای CSS مانند حاشیه ایجاد شود.
لرزش دست و مشکل دکمههای غولپیکر
لینک دادن به URL های نسبی
لینک دادن به یک عنصر در همان صفحه
شما میتوانید از یا قطعه خالی () برای پیوند به بالای صفحه فعلی، همانطور که در مشخصات HTML تعریف شده است، استفاده کنید.
شما میتوانید این خاصیت را با لینک عادی ترکیب کنید و به شکل استفاده کنید که ابتدا به صفحه مدنظر ناوبری میکند و سپس به عنصر با آیدی مدنظر اسکرول میکند.
لینک دادن به یک آدرس ایمیل
برای ایجاد لینکهایی که در برنامه ایمیل کاربر باز میشوند تا به او اجازه ارسال پیام جدید را بدهند، از طرح استفاده کنید:
لینک دادن به شماره تلفنها
رفتار با توجه به قابلیتهای دستگاه متفاوت است:
دستگاههای تلفن همراه به صورت خودکار شماره را شمارهگیری میکنند.
اکثر سیستمعاملها برنامههایی دارند که میتوانند تماس برقرار کنند، مانند اسکایپ یا فیستایم.
وبسایتها میتوانند با تماس تلفنی برقرار کنند، مانند .
سایر رفتارها شامل ذخیره شماره در مخاطبین یا ارسال شماره به دستگاه دیگر است.
برای نحو، ویژگیهای اضافی و سایر جزئیات مربوط به طرح به RFC 3966 مراجعه کنید.
استفاده از ویژگی دانلود برای ذخیره <canvas> به عنوان PNG
برای ذخیره محتوای عنصر به عنوان تصویر، میتوانید لینکی ایجاد کنید که در آن ، دادههای بوم به عنوان یک URL دادهای باشد که با جاوا اسکریپت ایجاد شده و ویژگی دانلود، نام فایل PNG دانلود شده را ارائه میدهد:
نمونه برنامه نقاشی با لینک ذخیره
عناصر میتوانند پیامدهایی برای امنیت و حریم خصوصی کاربران داشته باشند. برای اطلاعات بیشتر به سربرگ Referer: نگرانیهای حریم خصوصی و امنیتی مراجعه کنید.
استفاده از بدون و وبسایت را در برابر حملات سوءاستفاده از API آسیبپذیر میکند، اگرچه توجه داشته باشید که در نسخههای جدیدتر مرورگر، تنظیم به طور ضمنی همان محافظتی را که تنظیم ارائه میدهد، فراهم میکند. برای جزئیات بیشتر به سازگاری مرورگر مراجعه کنید.
| مشخصه | توضیحات |
|---|
| دسته بندی محتوا | Flow content, phrasing content, interactive content, palpable content. |
| محتوای مجاز | شفاف، با این تفاوت که هیچ زیرمجموعهای نمیتواند محتوای تعاملی یا یک عنصر <a> باشد، و هیچ زیرمجموعهای نمیتواند ویژگی tabindex مشخصی داشته باشد. |
| حذف تگ | هیچکدام، هر دو تگ شروع و پایان اجباری هستند. |
| والدین مجاز | هر عنصری که محتوای جریانی (flow content) را میپذیرد، اما سایر عناصر <a> را نمیپذیرد. |
| نقش ضمنی ARIA | وقتی ویژگی href وجود دارد، link، در غیر این صورت generic است |
آدرسهای ایمیل با
پیامهای متنی SMS با
کد قابل اجرا با
در حالی که مرورگرهای وب ممکن است از طرحهای URL دیگری پشتیبانی نکنند، وبسایتها با
میتوانند
علاوه بر این، سایر ویژگیهای URL میتوانند بخشهای خاصی از منبع را پیدا کنند، از جمله:
بخشهایی از یک صفحه با قطعات سند
بخشهای متنی خاص با قطعات متنی
قطعاتی از فایلهای رسانهای با قطعات رسانهای
- hreflang
اشاره به زبان انسانی URL لینک شده. هیچ قابلیت داخلی ندارد. مقادیر مجاز همان ویژگی سراسری lang هستند.
- interestfor
عنصر
را به عنوان یک فراخواننده علاقهمندی تعریف میکند. مقدار آن، شناسه عنصر هدف است که به نوعی (معمولاً نمایش داده شده یا پنهان شده) تحت تأثیر قرار میگیرد، زمانی که علاقه به عنصر فراخواننده نشان داده میشود یا از بین میرود (برای مثال، با نگه داشتن/برداشتن آن از حالت شناور یا فوکوس/تار کردن آن). برای جزئیات و مثالهای بیشتر به استفاده از فراخوانندههای علاقه مراجعه کنید.
- ping
فهرستی از URLها که با فاصله از هم جدا شدهاند. هنگامی که لینک دنبال میشود، مرورگر درخواستهای POST را با بدنه PING به URLها ارسال میکند. معمولاً برای ردیابی.
- referrerpolicy
هنگام دنبال کردن لینک، چه مقدار از ارجاعدهنده ارسال شود.
: هدر ارجاعدهنده ارسال نخواهد شد.
: هدر ارجاعدهنده بدون TLS (HTTPS) به مبدا ارسال نمیشود.
: ارجاعدهنده ارسال شده به مبدا صفحه ارجاعدهنده محدود خواهد شد: طرح، میزبان و پورت آن.
: ارجاعدهندهای که به سایر مبدأها ارسال میشود، محدود به طرح، میزبان و پورت خواهد بود. پیمایشها در همان مبدأ همچنان شامل مسیر خواهند بود.
: یک ارجاعدهنده برای همان مبدأ ارسال میشود، اما درخواستهای
حاوی هیچ اطلاعاتی در مورد ارجاعدهنده نخواهند بود.
: فقط مبدأ سند را به عنوان ارجاعدهنده ارسال کنید زمانی که سطح امنیت پروتکل ثابت بماند (HTTPS→HTTPS)، اما آن را به مقصدی با امنیت کمتر ارسال نکنید (HTTPS→HTTP).
(پیشفرض): هنگام انجام درخواست
، یک URL کامل ارسال کنید، فقط زمانی که سطح امنیت پروتکل ثابت بماند، مبدأ را ارسال کنید (HTTPS→HTTPS) و هیچ هدری را به مقصدی با امنیت کمتر ارسال نکنید (HTTPS→HTTP).
: ارجاعدهنده شامل مبدأ و مسیر خواهد بود (اما نه قطعه، رمز عبور یا نام کاربری). این مقدار ناامن است، زیرا مبداها و مسیرها را از منابع محافظتشده توسط TLS به مبداهای ناامن نشت میدهد.
- rel
رابطه URL لینکشده به عنوان انواع لینک جداشده با فاصله.
- target
محل نمایش URL لینکشده، به عنوان نام یک زمینه مرور (یک تب، پنجره یا
). کلمات کلیدی زیر معانی خاصی برای محل بارگذاری URL دارند:
: زمینه مرور فعلی. (پیشفرض)
: معمولاً یک تب جدید، اما کاربران میتوانند مرورگرها را طوری پیکربندی کنند که به جای آن یک پنجره جدید باز کنند.
: زمینه مرور والد زمینه مرور فعلی. اگر والدی وجود نداشته باشد، مانند
عمل میکند.
: بالاترین زمینه مرور. به طور خاص، این به معنای "بالاترین" زمینهای است که جد زمینه مرور فعلی است. اگر جد نداشته باشد، مانند
عمل میکند.
: به فریمهای محصور شدهی جاسازی شده اجازه میدهد تا در فریم سطح بالا حرکت کنند (یعنی، برخلاف سایر مقاصد رزرو شده، فراتر از ریشه فریم محصور شده حرکت کنند). توجه داشته باشید که اگر این مورد خارج از متن فریم محصور شده استفاده شود، پیمایش همچنان موفقیتآمیز خواهد بود، اما مانند یک کلمه کلیدی رزرو شده عمل نخواهد کرد.
تنظیم
روی عناصر
به طور ضمنی همان رفتار rel را مانند تنظیم
ارائه میدهد که window.opener را تنظیم نمیکند.
- type
اشاره به فرمت URL پیوند شده با نوع
. هیچ قابلیت داخلی ندارد.
