HTML الدلالي: هيكل له معنى ونماذج ووصول للجميع
درس 2 من 8
2HTML الدلالي: هيكل له معنى ونماذج ووصول للجميع
الصورة الكبيرةHTML ليس «نص بألوان». هو هيكل يقول للمتصفح وللقارئ الصوتي ولمحرك البحث: هذا رأس الصفحة، هذه قائمة التنقّل، هذا المحتوى الأساسي، هذا زر. CSS وJavaScript يأتيان فوقه، وكلما كان الهيكل أصح كان عملهما أسهل.
ماذا تشاهد في الرسم: هيكل صفحة دلالية من الأعلى للأسفل. كل صندوق عنصر له معنى، والقارئ الصوتي يقفز بينها كما تقفز أنت بعينك.
خارطة هذا الجزء
المفاهيم بالترتيب، اضغط أيًّا منها للقفز إليه:
طريقان إلى نفس الفكرة
فكّر في HTML كهيكل بيت قبل الدهان: أين الباب، أين الغرف، أين الممر. لو بنيت كل شيء بجدار واحد (div) سيضيع الضيف، ولو وضعت لافتة «مطبخ» و«غرفة نوم» يعرف طريقه حتى في الظلام. القارئ الصوتي، وهو برنامج يقرأ الصفحة بصوت عالٍ للمكفوفين، هو ذلك الضيف في الظلام. ومحرك البحث ضيف آخر يقرأ اللافتات ليعرف عمّ تتكلم صفحتك.
العناصر الدلالية تُنتج شجرة إمكانية الوصول (accessibility tree) بأدوار ضمنية: <nav> دوره navigation و<main> دوره main، فتظهر كمعالم (landmarks) يقفز بينها القارئ الصوتي. <button> يأخذ التركيز ويستجيب لـ Enter وSpace بلا JavaScript. النماذج تملك تحقّقًا مدمجًا (required، type=email، pattern، min/max) وواجهة Constraint Validation مع أشباه الأصناف :invalid و:user-invalid. <picture> وsrcset/sizes يتركان المتصفح يختار الصورة المناسبة، وloading="lazy" يؤجّل ما تحت الطيّة، وwidth/height يمنعان قفز التخطيط (CLS). ARIA تكمّل الدلالة ولا تستبدلها: «القاعدة الأولى لـ ARIA ألّا تستخدمها» إن وُجد عنصر أصلي.
قبل أن تبدأ
📄أول صفحة ويب
تعرف الوسم والعنصر والخاصية وهيكل الملف.
📨HTTP
تعرف أن النموذج يرسل طلبًا للخادم.
🧰محرّر
VS Code مع إضافة Live Server، أو الملعب الحي داخل الدرس.
الفكرة الجوهرية
1هيكل الصفحة الدلالي
بدل <div class="top"> اكتب <header>. العناصر الأساسية: header رأس الصفحة أو القسم، وnav روابط التنقّل الرئيسية، وmain المحتوى الأساسي (واحد فقط في الصفحة)، وarticle محتوى مستقل يُفهم وحده (منشور، بطاقة منتج)، وsection قسم له عنوان، وaside محتوى جانبي، وfooter ذيل الصفحة. وdiv يبقى صندوقًا بلا معنى، تستخدمه حين تحتاج غلافًا للتنسيق فقط.
صفحة بهيكل دلالي
الشكل يشبه صفحة divs تمامًا، لكن المعنى مختلف. افتح أدوات المطوّر ثم تبويب Accessibility وسترى المعالم: banner وnavigation وmain وcontentinfo.
رتّب العناوين h1 إلى h6 دون قفز (لا تنتقل من h2 إلى h4). كثير من مستخدمي القارئ الصوتي يتنقّلون في الصفحة بالعناوين فقط، فهي فهرسها.
2النماذج: أنواع الحقول والتسميات
النموذج form يجمع ما يكتبه المستخدم ويرسله. كل حقل يحتاج label مربوطًا به عبر for الذي يساوي id الحقل: الضغط على النص يركّز الحقل، والقارئ الصوتي يقرأ اسمه. وname هو اسم القيمة حين تصل للخادم. نوع الحقل type يغيّر لوحة المفاتيح على الجوال ويفعّل تحقّقًا مناسبًا.
نموذج طلب بكل أنواع الحقول
اضغط على كلمة «شوفان» نفسها: يُختار الزر لأن الـ label يغلّفه. أزرار الاختيار (radio) التي تشترك في نفس name لا يُختار منها إلا واحد.
placeholder بدل label. النص الرمادي يختفي بمجرد الكتابة فينسى المستخدم ماذا كان الحقل، والقارئ الصوتي قد لا يقرؤه. الـ placeholder مثال للصيغة، والـ label اسم الحقل.3التحقّق المدمج: المتصفح يفحص قبل الإرسال
بلا سطر JavaScript واحد، يمنع المتصفح إرسال نموذج فيه أخطاء ويظهر رسالة: required إلزامي، وtype="email" يجب أن يكون بريدًا، وminlength/maxlength طول النص، وmin/max للأرقام والتواريخ، وpattern نمط (تعبير نمطي) يجب أن يطابقه النص. وCSS يستطيع أن يلوّن الحقل الخاطئ بـ :user-invalid.
جرّب أن تخطئ عمدًا
اضغط «سجّل» والحقول فارغة، ثم اكتب بريدًا بلا @، ثم رقم جوال من 9 أرقام. كل رسالة تراها كتبها المتصفح وحده.
required من أدوات المطوّر. تحقّق المتصفح لراحة المستخدم، وتحقّق الخادم للأمان. ستكتبه في درس الخادم.4الأزرار والروابط: لكلٍّ وظيفته
القاعدة بسيطة: الرابط ينقلك لمكان، والزر يفعل شيئًا. <a href> للتنقّل (صفحة أخرى، قسم آخر)، و<button> للأفعال (أضف للسلة، افتح القائمة، أرسل). والزر داخل النموذج نوعه الافتراضي submit، فاكتب type="button" للزر الذي لا يرسل.
الزر الحقيقي مقابل div بنقرة
انقر داخل المعاينة ثم اضغط Tab عدة مرات. لاحظ أن التركيز يقفز من فوق الـ div ولا يصل إليه أبدًا.
5الصور المتجاوبة والوسائط
جوال بعرض 400 بكسل لا يحتاج صورة 3000 بكسل تستهلك باقة المستخدم. srcset يعطي المتصفح عدة مقاسات، وsizes يخبره بالعرض المعروض، فيختار الأخف المناسب. وwidth/height يحجزان مكان الصورة قبل تحميلها فلا تقفز الصفحة، وloading="lazy" يؤجّل الصور البعيدة حتى يقترب منها المستخدم. وfigure مع figcaption لصورة لها تعليق.
<figure>
<img src="latte-800.jpg"
srcset="latte-400.jpg 400w, latte-800.jpg 800w, latte-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="كوب لاتيه برسمة قلب على الرغوة"
width="800" height="600" loading="lazy">
<figcaption>لاتيه اليوم بحليب الشوفان</figcaption>
</figure>
<video src="pour.mp4" controls width="640" poster="pour.jpg">
<track kind="captions" src="pour.ar.vtt" srclang="ar" label="العربية">
</video>الفيديو video والصوت audio يأخذان controls لإظهار أزرار التشغيل. وtrack يضيف ترجمة مكتوبة يحتاجها الصمّ ومن يشاهد بلا صوت.
6إمكانية الوصول: صفحة للجميع
واحد من كل ستة أشخاص في العالم لديه إعاقة بشكل ما، حسب منظمة الصحة العالمية. صفحة يمكن الوصول إليها هي صفحة يستخدمها الكفيف بالقارئ الصوتي، ومن لا يستخدم الفأرة بلوحة المفاتيح، وضعيف النظر بتكبير النص. أهم خمس قواعد:
(1) العنصر الصحيح أولًا: button وa وlabel وnav. (2) كل شيء بلوحة المفاتيح: Tab يصل لكل ما يُضغط، وترى أين التركيز. (3) نص بديل لكل صورة تحمل معنى. (4) تباين كافٍ بين النص والخلفية (4.5 إلى 1 للنص العادي). (5) lang صحيح حتى ينطق القارئ الصوتي بالعربية لا بلكنة إنجليزية. وaria-* فقط حين لا يوجد عنصر أصلي يؤدي المعنى، مثل aria-label لزر فيه أيقونة فقط.
<!-- icon-only button: give it a name the screen reader can say --> <button type="button" aria-label="إغلاق القائمة">✕</button> <!-- a live message read aloud when it changes --> <p role="status">أُضيف اللاتيه إلى سلتك.</p>
7معلومات الصفحة: للبحث والمشاركة
ما في head لا يظهر في الصفحة لكنه يظهر في أماكن أخرى: title على التبويب وفي نتيجة جوجل، وmeta name="description" الوصف تحت الرابط في نتائج البحث، ووسوم Open Graph (og:) الصورة والعنوان حين يُشارك رابطك في واتساب أو X.
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>مقهى درب | قهوة مختصة في الرياض</title> <meta name="description" content="نحمّص القهوة كل صباح. اطلب أونلاين واستلم خلال 10 دقائق."> <meta property="og:title" content="مقهى درب"> <meta property="og:image" content="https://example.com/cover.jpg"> <link rel="icon" href="/favicon.svg"> </head>
مثال محلول
المسألة: زر «أضف للسلة» مكتوب <div class="btn" onclick="add()">أضف</div>، وحقل البريد <input placeholder="البريد">. ما المشاكل؟ التحليل: الـ div لا يأخذ التركيز بـ Tab، ولا يستجيب لـ Enter، والقارئ الصوتي لا يعرف أنه زر. والحقل بلا label فيُقرأ «حقل نص» فقط، وبلا type="email" فلا تحقّق ولا لوحة مفاتيح فيها @ على الجوال. الحل:
<button type="button" class="btn" onclick="add()">أضف للسلة</button>
<label for="email">البريد</label>
<input id="email" name="email" type="email" required autocomplete="email"
placeholder="you@example.com">نفس الشكل بعد CSS، وكل السلوك مجانًا: التركيز ولوحة المفاتيح والإعلان الصحيح والتحقّق.
خرافة مقابل حقيقة
| الخرافة | الحقيقة |
|---|---|
| HTML سهل ولا يحتاج تعلّمًا متقدّمًا. | كتابته سهلة، وكتابته صحيحًا للوصول والبحث والأداء مهارة يفتقدها كثيرون. |
| div وspan يكفيان لكل شيء. | يعملان شكليًا لكنهما بلا معنى، فتعيد برمجة ما يعطيك إياه العنصر الدلالي مجانًا. |
| إمكانية الوصول لفئة صغيرة فقط. | تفيد الجميع: الترجمة لمن في مكان صاخب، ولوحة المفاتيح للمستعجل، والتباين لمن يقرأ في الشمس. |
أين تقابله في العمل
🔍محركات البحث
العناوين والهيكل الدلالي ووسم description ترفع فهم الصفحة وترتيبها.
♿القرّاء الصوتيون
ملايين المستخدمين يتصفّحون بالصوت عبر العناوين والمعالم.
⚖️القوانين والعقود
جهات حكومية وشركات كثيرة تشترط معيار WCAG في مواقعها.
اختبر فهمك
أي عنصر يناسب قائمة الروابط الرئيسية للموقع؟
nav يعطي دور التنقّل فيقفز إليه القارئ الصوتي مباشرة.
لماذا نربط label بالحقل بـ for؟
الربط يفيد القارئ الصوتي ويكبّر مساحة الضغط على الجوال.
ما فائدة srcset؟
الجوال يحمّل نسخة صغيرة والشاشة الكبيرة نسخة حادّة.
زر «فتح القائمة» داخل نموذج يرسل النموذج كلما ضغطته. ما الحل؟
الزر داخل النموذج نوعه submit افتراضيًا. type="button" يجعله زرًّا عاديًا.
ما الذي يحمي الخادم من بيانات خاطئة؟
تحقّق المتصفح يمكن تجاوزه بسهولة، والخادم وحده يملك الكلمة الأخيرة.
بطاقات مراجعة سريعة
تحقق من فهمك
لماذا button أفضل من div بنقرة؟
يأخذ التركيز، ويستجيب لـ Enter وSpace، ويُعلن كزر للقارئ الصوتي، بلا كود إضافي.
هل يكفي التحقّق في النموذج؟
لا. هو لتجربة المستخدم. الخادم يجب أن يتحقّق من كل شيء لأن الطلب يمكن إرساله بدون النموذج.
كم main في الصفحة؟
واحد ظاهر فقط، يحوي المحتوى الأساسي للصفحة.
ما الفرق بين placeholder وlabel؟
الـ label اسم الحقل الدائم المقروء، والـ placeholder مثال يختفي عند الكتابة ولا يغني عنه.
مصادر هذا الدرس
مرتّبة بالنوع. ابدأ بالتوثيق الرسمي إذا تبي المرجع الدقيق، وبالمقال أو الفيديو إذا تبي الشرح أولًا.
خلّصت الدرس؟
سجّل الدخول ليُحفظ تقدّمك.