أساسيات HTML للمختبِرين

لماذا يهم

قد تبدو صفحتان متطابقتين وتتصرفان بشكل مختلف. فـ«الزر» المبني من <div> قد يعمل بالفأرة ولا يعمل بلوحة المفاتيح ولا مع قارئ الشاشة (Screen reader)، وهو البرنامج الذي يقرأ الصفحة بصوت مسموع للمستخدمين المكفوفين وضعاف البصر؛ والتسمية (Label) غير المربوطة بحقلها تترك الحقل بلا اسم لدى مستخدمي قارئ الشاشة؛ والرابط قد يشير إلى خادم Staging. هذه العيوب خفية على الشاشة وواضحة في الشيفرة.

وHTML أيضاً لغة مشتركة بين المختبِرين والمطورين والأتمتة. فتقرير الخطأ الذي يقول «التسمية فيها for="mail" بينما id الحقل هو email» يُصلَح أسرع من تقرير يقول «النقر على التسمية لا يفعل شيئاً»، ولاحقاً تعثر أتمتة واجهة المستخدم على العناصر عبر أدوارها وتسمياتها وسماتها.

العناصر والوسوم والسمات

لمعظم العناصر وسم بداية (Start tag) ومحتوى ووسم نهاية (End tag): ففي <a href="/pricing">See pricing</a> المحتوى هو «See pricing» الواقع بين وسم البداية ووسم النهاية </a>. وتتداخل العناصر كالصناديق، مثل بنود <li> داخل القائمة <ul>. أما العناصر الفارغة (Void elements) مثل <input> و<img> و<br> فلا محتوى لها ولا وسم نهاية.

تُكتب السمات (Attributes) داخل وسم البداية على شكل أزواج name="value". وثلاثة تفاصيل منها تهمّ في كل صفحة:

• id يسمّي عنصراً واحداً ويجب أن يكون فريداً في الصفحة؛ وتشير إليه التسميات وروابط #fragment وكثير من المحدِّدات (Locators)، وهي الاستعلامات التي تستخدمها الاختبارات الآلية للعثور على العنصر.
• السمات المنطقية (Boolean attributes) مثل required وdisabled تكون مفعّلة بمجرد وجودها ولا تُلغى إلا بحذفها: فالسمة disabled="false" تعطّل الحقل أيضاً.
• المحارف التي لها معنى في HTML تُكتب كمراجع محارف تُسمّى عادةً الكيانات (Entities): < تعرض < و& تعرض &. وظهور & على الشاشة يعني أن النص رُمِّز مرتين.

جرّبها: مفكّك ترميز كيانات HTML

الهيكل الثابت لكل صفحة

لكل مستند HTML الهيكل نفسه. فالسطر <!DOCTYPE html> يطلب وضع المعايير (Standards mode)، ومن دونه تعود المتصفحات إلى وضع توافق قديم (Quirks mode) يغيّر التخطيط. والعنصر <html> يضم كل شيء، وسمته lang تحدد اللغة، وتضيف الصفحات العربية dir="rtl". أما <head> فيصف الصفحة ولا يُعرض، و<body> يضم ما يراه المستخدم.

• <title>: يظهر في التبويب ونتائج البحث، وهو أول ما يعلنه قارئ الشاشة؛ ويجب أن يكون لكل صفحة عنوان خاص بها يصفها (المعيار 2.4.2 في WCAG 2.2).
• lang: تختار به قارئات الشاشة النطق المناسب (المعيار 3.1.1).
• <meta charset="utf-8">: غياب الترميز أو خطؤه سبب شائع لظهور النص العربي والهندي مشوّهاً.
• <meta name="robots" content="noindex">: يُبقي الصفحة خارج محركات البحث؛ وهذا صحيح في بيئة Staging، لكنه عيب خطير في صفحة عامة على بيئة الإنتاج.
• <meta name="viewport"> يطلب من الهاتف أن يرتّب الصفحة بعرض شاشته هو، ومن دونه يعرض الهاتف تخطيط سطح المكتب مصغَّراً. أما <link rel="stylesheet"> و<script src> فيحمّلان شيفرة CSS وJavaScript، لذا فالمسار الخاطئ فيهما يُفسد تنسيق الصفحة أو سلوكها.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Track your order | Example Store</title>
  <meta name="description" content="Check where your order is.">
  <link rel="stylesheet" href="/styles.css">
  <script src="/app.js" defer></script>
</head>
<body>
  <header>...logo and menu...</header>
  <main>...the content of this page...</main>
  <footer>...contact and legal links...</footer>
</body>
</html>

العناصر الدلالية: المعنى لا الشكل

العنصر الدلالي (Semantic element) يقول ما هو محتواه: فالعناصر <header> و<nav> و<main> و<footer> تحدد مناطق الصفحة، و<h1> إلى <h6> تحدد العناوين، و<ul> يحدد قائمة، و<button> إجراءً، و<a href> رابطاً. أما <div> و<span> فلا معنى لهما؛ إنهما صندوقان للتخطيط والتنسيق.

يمكن لـCSS أن تجعل <div> يبدو تماماً مثل الزر، لكن الزر الحقيقي <button> يأتي مع سلوكه: يُوصل إليه بمفتاح Tab، ويُفعَّل بمفتاح Enter أو المسافة، ويعلنه قارئ الشاشة زراً. أما <div> القابل للنقر فلا يحصل على شيء من ذلك ما لم يضفه المطور يدوياً. وبالمثل، فالنص الكبير العريض داخل <div> يبدو عنواناً لكنه يغيب عن قائمة العناوين في قارئ الشاشة.

• كل ما ينفّذ إجراءً عند النقر يجب أن يكون <button>، أو <a href> إن كان ينقل إلى صفحة أخرى.
• الصور تحتاج إلى alt: وصف قصير إن كانت تحمل معلومة، وalt="" إن كانت زخرفية.

النماذج والروابط في الشيفرة

يرسل العنصر <form> حقوله إلى العنوان المذكور في action بطريقة HTTP المذكورة في method: فالطريقة post تضع البيانات في جسم الطلب، أما get، وهي الافتراضية، فتضعها في عنوان URL حيث تنتهي في سجل المتصفح وسجلات الخادم. ويُرسَل كل حقل على شكل زوج من اسمه name وقيمته؛ والحقل الذي لا name له لا يُرسَل أصلاً.

والرابط عنصر <a> له href: عنوان كامل، أو مسار مثل /help، أو جزء (Fragment) مثل #faq ينتقل إلى العنصر الذي يحمل id="faq"، أو مخطط مثل mailto:. وسمات الحقول والروابط تعطيك أفكار اختبار مباشرة:

• type مثل email وnumber وdate يحدد فحوص المتصفح المدمجة ولوحة المفاتيح أو أداة الاختيار التي تظهر على الهاتف.
• required وminlength وmaxlength وmin وmax وpattern قواعد قابلة للاختبار، وحدودها تعطيك القيم الحدّية. لكن أي شخص يستطيع حذفها، لذا يجب أن يفحص الخادم القواعد نفسها. ولاحظ أن minlength وحدها لا ترفض الحقل الفارغ.
• تمنح <label> الحقلَ اسمه القابل للوصول (Accessible name)، وهو الاسم الذي يعلنه قارئ الشاشة للحقل، حين تساوي قيمة for فيها قيمة id الحقل أو حين تحيط بالحقل؛ وعندها ينقل النقر على التسمية التركيز إلى الحقل أيضاً.
• الزر <button> الذي لا type له داخل نموذج هو زر إرسال.
• <input type="hidden"> مخفي على الشاشة لكن المستخدم يستطيع تعديله، لذا يجب ألا يثق الخادم بقيمته.

جرّبها: مولّد اختبارات التحقق جرّبها: محلّل عناوين URL

مثال تطبيقي: قراءة مصدر نموذج تسجيل

لترى شيفرة HTML التي أرسلها الخادم، اضغط Ctrl+U في Chrome أو Edge أو Firefox على Windows وLinux، أو اكتب view-source: قبل العنوان. المصدر هو المستند قبل أن تغيّره JavaScript؛ أما الصفحة الحية ففي أدوات المطوّر (DevTools) التي تتناولها دروس لاحقة. والمصدر المصغَّر (Minified)، المضغوط في بضعة أسطر طويلة، تسهل قراءته بعد لصقه في أداة تنسيق HTML. وكثير من تطبيقات الصفحة الواحدة (SPA)، التي تبني الصفحة بـJavaScript، يرسل <body> شبه فارغ، فلا يُظهر مصدرها إلا القليل.

يبدو نموذج التسجيل هذا سليماً على الشاشة، أما مصدره فلا:

• method="get": سينتقل البريد الإلكتروني وكلمة المرور في عنوان URL. المتوقع: post.
• تسمية Email بلا for ولا تحيط بالحقل، فلا اسم قابلاً للوصول لهذا الحقل.
• for="pass" لا تطابق id="password": العيب نفسه.
• type="text" لحقل بريد إلكتروني: لا لوحة مفاتيح خاصة بالبريد على الهاتف ولا فحص للصيغة في المتصفح.
• minlength="12" دون required: كلمة المرور الفارغة تجتاز فحص المتصفح. اختبر ⁦0⁩ و⁦11⁩ و⁦12⁩ حرفاً، واسأل عن الحد الأقصى.
• الحقل المخفي plan قيمته free: في بيئة اختبار مسموح لك باختبارها، غيّره في أدوات المطوّر وأرسل النموذج. فالخادم لا الصفحة هو من يجب أن يقرر الخطة.
• <button>Cancel</button> لا type له، فهو يرسل النموذج. المتوقع: type="button".
• «Create account» عنصر <div>: لا يُوصل إليه بمفتاح Tab ولا يعلنه قارئ الشاشة زراً.

<form action="/signup" method="get">
  <label>Email</label>
  <input type="text" id="email" name="email" required>

  <label for="pass">Password</label>
  <input type="password" id="password" name="password" minlength="12">

  <input type="hidden" name="plan" value="free">

  <button>Cancel</button>
  <div class="btn-primary" onclick="createAccount()">Create account</div>
</form>

جرّبها: منسّق HTML

أسئلة شائعة

المراجع

• HTML Living StandardWHATWGلغة HTML، بما فيها مراجع المحارف المسماة (الكيانات) وقواعد التحليل التي تتبعها المتصفحات.
• Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024توصية W3C التي تحدد معايير النجاح القابلة للاختبار لإتاحة محتوى الويب، مرتّبةً تحت أربعة مبادئ وثلاثة مستويات مطابقة (A وAA وAAA).
• HTML: HyperText Markup Language — MDNMDN Web Docs (Mozilla)مرجع MDN وأدلته لعناصر HTML وسماتها — البنية الدلالية التي تُبنى منها الصفحة وتعتمد عليها الاختبارات والتقنيات المساعدة.
• Client-side form validation — MDNMDN Web Docs (Mozilla)التحقق من النماذج في المتصفح بالسمات المدمجة وبالسكربتات، ولماذا يساعد المستخدمين لكنه لا يغني أبداً عن التحقق في الخادم.