وثائق HTML قابلة للتشغيل: الروابط (a href)

Q: كيف أنشئ رابطًا في HTML؟

استخدم عنصر الربط: Example . href هي الوجهة، والنص بين الوسمين هو ما ينقر عليه القارئ.

Q: كيف أربط بجزء محدد من الصفحة؟

أعطِ العنصر الهدف id، ثم اربط به بعلامة #: FAQ و FAQ . ومن صفحة أخرى أضف # إلى العنوان: .

Q: لماذا يذهب الرابط إلى صفحة خاطئة عندما أكتب www؟

من دون https:// يعامل المتصفح www.example.com كمسار نسبي في موقعك، فيذهب الرابط إلى شيء مثل yoursite.com/www.example.com. اكتب المخطط دائمًا في الروابط الخارجية: href="https://www.example.com".

Q: هل يمكن أن يحتوي وسم a على div؟

نعم. في HTML5 يمكن لـ أن يحيط بمحتوى كتلي مثل وعنوان وفقرة، وهكذا تُبنى روابط البطاقات الكاملة. لكنه لا يمكن أن يحتوي على رابط آخر أو زر أو أي عنصر تفاعلي آخر.

كيف تنشئ رابطًا في HTML

الرابط عنصر ربط <a> يحمل السمة href. href هي المكان الذي يذهب إليه الرابط، والمحتوى بين الوسمين هو ما ينقر عليه القارئ.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

تعرض المتصفحات الروابط باللون الأزرق وبخط تحتها وتغيّر المؤشر إلى يد. السطر الأخير يوضح أهمية href: من دونها يصبح <a> نصًا عاديًا. لا يقبل التركيز، ولا يُنقر، ولا يُنسَّق كرابط.

الروابط المطلقة والنسبية

قيمة href تحدد أين يذهب الرابط. الأشكال الرئيسية:

`href`	يذهب إلى
`https://example.com/page`	عنوان مطلق: هذا العنوان بالضبط
`/about`	`about` في جذر الموقع الحالي
`about.html`	`about.html` في المجلد نفسه الذي فيه الصفحة الحالية
`../index.html`	`index.html` في المجلد الأعلى بمستوى واحد
`#pricing`	العنصر الذي يحمل `id="pricing"` في هذه الصفحة
`/help#faq`	القسم `faq` في صفحة أخرى من هذا الموقع
`mailto:hi@example.com`	رسالة بريد جديدة في تطبيق البريد لدى القارئ
`tel:+15551234567`	مكالمة هاتفية، على الأجهزة القادرة على ذلك

استخدم العناوين المطلقة للمواقع الأخرى والمسارات النسبية إلى الجذر (/about) داخل موقعك: فهي تظل تعمل عندما تنتقل الصفحة التي تحتويها إلى مجلد آخر.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

السطر الأخير هو أشيع خطأ في الروابط. من دون https:// يقرأ المتصفح www.wikipedia.org كاسم ملف في المجلد الحالي.

لروابط البريد الإلكتروني والهاتف صفحتها الخاصة: روابط البريد الإلكتروني في HTML.

الربط بقسم من الصفحة

أي عنصر يحمل id يصلح هدفًا. اربط به بـ # متبوعة بقيمة id، وسينتقل المتصفح إليه. انقر الروابط في المعاينة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

بعض التفاصيل:

يجب أن يتطابق id تمامًا، بما في ذلك حالة الأحرف. href="#FAQ" لا يجد id="faq".
href="#top" وhref="#" ينتقلان إلى أعلى الصفحة حتى لو لم يحمل أي عنصر id بقيمة top.
المحدد :target ينسّق القسم الذي يشير إليه العنوان حاليًا. يظهر التمييز في صفحة حقيقية، أما المعاينة فتنتقل من دون أن يتغير عنوانها، لذلك لا يظهر التمييز فيها.
للربط بقسم في صفحة أخرى، أضف # إلى عنوان تلك الصفحة: <a href="/docs/html/table#caption">.

روابط الأقسام تحت ترويسة ثابتة

الترويسة اللاصقة أو الثابتة تغطي أعلى القسم الذي تنتقل إليه. scroll-margin-top على الأهداف يترك لها مساحة، وscroll-behavior: smooth يجعل الانتقال متحركًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

احذف سطر scroll-margin-top وانقر Two مرة أخرى: سينتهي العنوان مختبئًا خلف الترويسة الداكنة.

روابط التنزيل

السمة download تطلب من المتصفح حفظ الملف بدلًا من فتحه. قيمتها، إن أعطيتها قيمة، هي اسم الملف المقترح:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

لا تعمل download إلا مع الملفات الموجودة على المصدر نفسه للصفحة (المخطط والمضيف والمنفذ نفسها) ومع عناوين data: وblob:. أما الملف على مصدر آخر، حتى لو كان نطاقًا فرعيًا، فتتجاهلها المتصفحات وتنتقل إليه كرابط عادي. ويمكن للخادم فرض التنزيل لأي ملف عبر الترويسة Content-Disposition: attachment.

نص رابط له معنى

مستخدمو قارئات الشاشة يتنقلون غالبًا في الصفحة من رابط إلى رابط، فلا يسمعون إلا نص الرابط. عبارات مثل «انقر هنا» و«اقرأ المزيد» لا تخبرهم بشيء.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

السمة title تُظهر تلميحًا عند مرور المؤشر، لكنها لا تظهر على الشاشات اللمسية ولا لمعظم مستخدمي لوحة المفاتيح، لذلك لا تضع فيها أي شيء مهم.

جعل بطاقة كاملة رابطًا

يمكن لـ <a> أن يحيط بمحتوى كتلي: العنوان والصورة والفقرة يمكن أن تكون كلها رابطًا واحدًا. هكذا تُبنى البطاقات القابلة للنقر.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block تجعل الصندوق كله قابلًا للنقر، لا النص وحده. أبقِ محتوى البطاقة قصيرًا، لأن قارئ الشاشة يقرؤه كله كاسم للرابط. ولا تضع بداخلها رابطًا آخر أو زرًا أبدًا: العناصر التفاعلية لا يمكن أن تتداخل داخل <a>.

سمات أخرى لوسم a

السمة	وظيفتها
`href`	الوجهة. من دونها لا يكون `<a>` رابطًا
`target`	أين يُفتح، و`target="_blank"` يفتحه في تبويب جديد، راجع فتح الرابط في تبويب جديد
`rel`	العلاقة بالهدف: `noopener` أو `nofollow` أو `sponsored` أو `ugc`
`download`	حفظ الملف بدلًا من فتحه
`hreflang`	لغة الصفحة المرتبطة، كتلميح
`referrerpolicy`	مقدار ما يُرسَل من العنوان الحالي كمُحيل

أخطاء شائعة

غياب المخطط في رابط خارجي. href="www.site.com" مسار نسبي. اكتب https://.
<a href="#"> لإجراء JavaScript. ينتقل إلى أعلى الصفحة ويضيف # إلى العنوان. إذا كان النقر لا يذهب إلى أي مكان، فاستخدم <button>.
رابط داخل رابط، أو زر داخل رابط. كلاهما HTML غير صالح: <a> الثاني يجعل المحلل يغلق الأول مبكرًا، والنقر على زر داخل رابط ليس له هدف واضح.
المسافات في أسماء الملفات. href="my file.html" يعمل عادةً لأن المتصفح يرمّز المسافة، لكن my-file.html يغنيك عن المسألة كلها.
«انقر هنا» كنص للرابط. صِف الوجهة بدلًا من ذلك.
اختلاف حالة الأحرف في id. #Pricing وid="pricing" مختلفان.

الأسئلة الشائعة

كيف أنشئ رابطًا في HTML؟

استخدم عنصر الربط: <a href="https://example.com">Example</a>. href هي الوجهة، والنص بين الوسمين هو ما ينقر عليه القارئ.

ماذا يعني href؟

اختصار Hypertext reference أي مرجع النص التشعبي. تحمل العنوان الذي يشير إليه الرابط: عنوانًا كاملًا، أو مسارًا في الموقع نفسه مثل /about، أو قسمًا من الصفحة مثل #pricing، أو مخططًا مثل mailto:.

كيف أربط بجزء محدد من الصفحة؟

أعطِ العنصر الهدف id، ثم اربط به بعلامة #: <h2 id="faq">FAQ</h2> و<a href="#faq">FAQ</a>. ومن صفحة أخرى أضف # إلى العنوان: <a href="/help#faq">.

لماذا يذهب الرابط إلى صفحة خاطئة عندما أكتب www؟

من دون https:// يعامل المتصفح www.example.com كمسار نسبي في موقعك، فيذهب الرابط إلى شيء مثل yoursite.com/www.example.com. اكتب المخطط دائمًا في الروابط الخارجية: href="https://www.example.com".

هل يمكن أن يحتوي وسم a على div؟

نعم. في HTML5 يمكن لـ <a> أن يحيط بمحتوى كتلي مثل <div> وعنوان وفقرة، وهكذا تُبنى روابط البطاقات الكاملة. لكنه لا يمكن أن يحتوي على رابط آخر أو زر أو أي عنصر تفاعلي آخر.

مفاهيم ذات صلة