ما هي HTML5؟
HTML (HyperText Markup Language) هي اللغة التي تُكتب بها كل صفحات الويب، وقد ابتكرها Tim Berners-Lee في مطلع التسعينيات مع ولادة الويب نفسه. لا تحدد هذه اللغة الألوان ولا الحركة، بل تقول ما هو كل جزء من المحتوى: هذا هو العنوان الرئيسي، وهذه قائمة عناصر، وهذا زر، وهذا شريط التنقل في الموقع. ومن خلال هذه البنية تقرأ المتصفحات ومحركات البحث والتقنيات المساعدة، مثل قارئات الشاشة، صفحتك.
جاءت HTML5 بعناصر تسمّي أجزاء الصفحة بحسب دورها: header وnav وmain وarticle وsection وaside وfooter، وتستخدم قارئات الشاشة هذه «المعالم» للانتقال مباشرة إلى القائمة أو إلى المحتوى الرئيسي. واكتسبت النماذج أنواع حقول مثل email وtel وdate، تُظهر على الهاتف لوحة المفاتيح المناسبة أو أداة اختيار التاريخ، ويستطيع المتصفح التحقق من المدخلات قبل إرسالها. أما السمتان lang وdir فتحددان لغة النص واتجاه قراءته.
أصبحت HTML5 توصية رسمية (Recommendation) من W3C في عام 2014. ومنذ عام 2019 تعمل W3C وWHATWG معًا على نسخة واحدة من اللغة هي «المعيار الحي» (HTML Living Standard)، وتتولى صيانتها WHATWG التي تضم لجنتها التوجيهية صانعي المتصفحات Apple وGoogle وMicrosoft وMozilla. لم تعد للمعيار أرقام إصدارات، بل يُحدَّث باستمرار وتتبنى المتصفحات ميزاته الجديدة خطوة بخطوة، وبقي «HTML5» الاسم المتداول لـ HTML الحديثة. وهي معيار مفتوح يستطيع أي أحد استخدامه مجانًا.
أين نستخدم HTML5
يبدأ كل موقع نبنيه بترميز HTML نكتبه بأنفسنا عنصرًا عنصرًا. وتظهر أهميته خصوصًا في:
بنية صفحة واضحة
نمنح كل صفحة عنوانًا رئيسيًا واحدًا، وعناوين فرعية بترتيب منطقي، ومعالم واضحة للتنقل والمحتوى الرئيسي والتذييل، فيجد طريقه بسهولة كل من يتصفح الصفحة سريعًا، ومحركات البحث، ومستخدمو قارئات الشاشة.
نماذج وأزرار سهلة الوصول
لكل حقل تسمية ظاهرة، ونستخدم عناصر الأزرار والروابط الحقيقية بدلًا من مربعات قابلة للنقر، فيعمل كل شيء بلوحة المفاتيح وحدها، وتعلن قارئات الشاشة وظيفة كل عنصر تحكم.
تعدد اللغات واتجاه الكتابة
في النسخ التركية والإنجليزية والعربية نحدد لغة كل صفحة واتجاهها، فتجري العربية من اليمين إلى اليسار، وتنطق قارئات الشاشة كل لغة نطقًا صحيحًا. وتخبر روابط اللغات (hreflang) محركات البحث بأي نسخة تخص أي لغة.
البيانات المنظمة
نضيف إلى الصفحات بيانات schema.org المنظمة بصيغة JSON-LD، فنصف نشاطك وخدماتك ومقالاتك بشكل تقرؤه محركات البحث مباشرة. وهذا يساعدها على فهم من أنت، وتعتمد عليه بعض ميزات البحث الأغنى.
لماذا HTML5؟
أساس كل ما عداه
يقوم التصميم والسرعة وسهولة الوصول وSEO كلها على الترميز. فترميز HTML المتقن يسهّل كل خطوة لاحقة، بينما يصعب إصلاح الأخطاء التي تقع هنا بعد أن يكبر الموقع.
تعمل في كل مكان ولسنوات
يقرأ كل متصفح على كل جهاز لغة HTML، ويتطور المعيار بطريقة تحافظ على عمل الصفحات القائمة، فتبقى الصفحة المكتوبة جيدًا مقروءة سنوات طويلة.
سهولة وصول من الأساس
تأتي عناصر المتصفح الأصلية ومعها دعم لوحة المفاتيح ومعنى واضح لقارئات الشاشة. وكتابة HTML بشكل صحيح هي أبسط خطوة وأضمنها نحو موقع يستطيع الجميع استخدامه.
كيف نعمل على مشروعك
ننطلق من التصميم المعتمد في Figma، ونرسم أولًا مخطط كل صفحة: مستويات العناوين، والمعالم، وأي محتوى يكون قائمة أو جدولًا أو نموذجًا. ثم نكتب HTML، ونُعدّ النسخ التركية والإنجليزية والعربية باللغة والاتجاه الصحيحين، ولا نضيف CSS وJavaScript إلا بعد ذلك.
قبل الإطلاق نمرّر الترميز على أداة تحقق، ونشغّل تدقيقات سهولة الوصول وSEO في Lighthouse، ونتنقل في كل صفحة بلوحة المفاتيح وحدها، ونختبر الصفحات الرئيسية بقارئ شاشة. ونتأكد كذلك من وجود العناوين والأوصاف وروابط اللغات والبيانات المنظمة في كل صفحة.
