HTML الدلالي: بنية صفحة يفهمها المتصفح وقارئ الشاشة ومحركات البحث

مقدمة

يمكنك بناء صفحة كاملة من div وspan فقط، وستبدو سليمة بعد إضافة CSS. لكن المتصفح وقارئ الشاشة ومحرك البحث لن يعرفوا أين القائمة الرئيسية، وأين المحتوى، وما العنوان الأهم. HTML الدلالي يستخدم عناصر تحمل معنى، فيستفيد الجميع دون تكلفة إضافية.

أهداف التعلم

• استخدام عناصر الهيكل: header, nav, main, article, section, aside, footer.
• بناء تسلسل عناوين صحيح من h1 إلى h6.
• كتابة نماذج يمكن الوصول إليها مع label.
• ضبط اللغة والاتجاه للمحتوى العربي.

1. هيكل الصفحة

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>مدونة عرب كود — أساسيات HTML</title>
</head>
<body>
  <header>
    <a href="/">عرب كود</a>
    <nav aria-label="التنقل الرئيسي">
      <ul>
        <li><a href="/forum">المنتدى</a></li>
        <li><a href="/codes" aria-current="page">الأكواد</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>أساسيات HTML الدلالي</h1>
      <p>تاريخ النشر: <time datetime="2026-10-23">23 أكتوبر 2026</time></p>
      <section>
        <h2>لماذا الدلالية؟</h2>
        <p>…</p>
      </section>
    </article>
    <aside aria-label="مقالات ذات صلة">…</aside>
  </main>

  <footer><p>© عرب كود</p></footer>
</body>
</html>

• lang="ar" يجعل قارئ الشاشة ينطق بالعربية، وdir="rtl" يضبط الاتجاه.
• main واحد في الصفحة يتيح لمستخدمي لوحة المفاتيح القفز إلى المحتوى.
• aria-current="page" يخبر التقنيات المساعدة بالصفحة الحالية.

2. العناوين ليست أحجام خط

h1 إلى h6 تمثل هرم المحتوى لا حجم النص. صفحة واحدة لها عادة h1 واحد، ثم h2 للأقسام، وh3 داخلها، دون قفز من h2 إلى h4. إن أردت نصاً أكبر استخدم CSS. مستخدمو قارئ الشاشة يتنقلون بين العناوين كفهرس، فالتسلسل الخاطئ يضللهم.

3. الأزرار والروابط

• الرابط (a href) ينقلك إلى عنوان آخر.
• الزر (button) ينفذ إجراء في الصفحة (حفظ، فتح قائمة).

استخدام div onclick كزر يكسر التنقل بلوحة المفاتيح (لا يأخذ التركيز ولا يستجيب لـ Enter وSpace) ويختفي عن قارئ الشاشة. الزر الحقيقي يعطيك كل ذلك مجاناً.

4. النماذج

<form action="/api/search" method="get" role="search">
  <label for="q">ابحث في الأكواد</label>
  <input id="q" name="q" type="search" required minlength="2" autocomplete="off">
  <button type="submit">بحث</button>
</form>

label المرتبط بـ for يجعل النقر على النص يركّز الحقل، ويقرأ قارئ الشاشة اسم الحقل. لا تستخدم placeholder بديلاً عن label لأنه يختفي عند الكتابة.

5. الصور والوسائط

<img src="/img/architecture.webp" alt="مخطط يوضح انتقال الطلب من المتصفح إلى الخادم ثم قاعدة البيانات" width="800" height="450" loading="lazy">

• alt يصف معنى الصورة في سياقها. الصور الزخرفية تأخذ alt="".
• width وheight يحجزان المساحة فيمنعان قفز المحتوى أثناء التحميل (CLS).

تمرين عملي

1. خذ صفحة كتبتها من div فقط وأعد كتابتها بعناصر دلالية.
2. افتح أدوات المطور في Chrome ← تبويب Lighthouse ← فئة Accessibility، وقارن النتيجة قبل وبعد.
3. تنقل في صفحتك باستخدام Tab فقط: هل تستطيع الوصول إلى كل رابط وزر؟ هل التركيز ظاهر؟

أخطاء شائعة

• أكثر من h1 لأغراض شكلية، أو قفز مستويات العناوين.
• div قابل للنقر بدل button.
• إزالة إطار التركيز (outline: none) دون بديل مرئي.
• نسيان lang وdir في المحتوى العربي.

الخلاصة

العناصر الدلالية لا تكلفك شيئاً تقريباً، وتمنحك صفحة أوضح لمحركات البحث، وأسهل لمستخدمي التقنيات المساعدة، وأسهل للصيانة. ابدأ بها دائماً ثم صمّم بـ CSS.

مصادر مقترحة

• توثيق MDN: «HTML elements reference».
• إرشادات WCAG 2.2 (ملخص «How to Meet WCAG»).
• أداة axe DevTools لفحص سهولة الوصول.