HTML بالعربي: مشروع: صفحة مقال متاحة لمحركات البحث

يبني هذا المشروع على رأس المستند: head و meta و title و favicon، وHTML الدلالي في HTML الدلالي، وأمان الروابط في أمان الروابط والمحتوى المضمّن. راجعها أولًا إن لم تكن قد أتممتها.

الهدف: صفحة مقال HTML واحدة (بلا CSS أو JavaScript — هذا مشروع HTML بحت) تصلح فعليًا لتُفهرَس وتُقرأ بمحرك بحث وقارئ شاشة، لا فقط "تبدو" كمقال.

المتطلبات

اكتب صفحة article.html عن أي موضوع تقني تختاره (مثلًا: "5 أخطاء شائعة عند تعلّم HTML")، وتحقّق من كل التالي:

ترويسة <head> كاملة: charset، viewport، <title> فريد ووصفي، meta description بين 50 و160 حرفًا، وrel="canonical" يشير لصفحة المقال نفسها.
بنية دلالية: <header> و<main> يحتويان <article> واحد، و<footer> للصفحة.
عنوان h1 واحد فقط (عنوان المقال)، تليه h2/h3 بترتيب منطقي بلا تخطي مستوى (لا h1 ثم h3 مباشرة) — راجع تسلسل العناوين الصحيح في درس الوصول.
<time datetime="2026-01-15">15 يناير 2026</time> لتاريخ النشر، بصيغة datetime قياسية (ISO) حتى لو النص المعروض بصيغة عربية مقروءة.
<figure> مع <img> ونص alt وصفي حقيقي، و<figcaption> يوضّح الصورة.
فقرة واحدة على الأقل تستخدم <strong> أو <em> دلاليًا (لا <b>/<i>) لنص فعلًا مهم أو مؤكَّد، لا لتزيين عشوائي.
رابط داخلي واحد على الأقل (لصفحة أخرى بموقعك الافتراضي) ورابط خارجي واحد على الأقل بنص وصفي (لا "اضغط هنا")، والرابط الخارجي بـ target="_blank" rel="noopener noreferrer".

نقطة البداية

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><!-- عنوان فريد للمقال --></title>
  <meta name="description" content="<!-- وصف 50-160 حرفًا -->">
  <link rel="canonical" href="https://example.com/article.html">
</head>
<body>
  <header>
    <!-- شعار/اسم الموقع، لا عنوان المقال نفسه -->
  </header>

  <main>
    <article>
      <!-- h1 عنوان المقال، time للتاريخ، فقرات، figure، روابط -->
    </article>
  </main>

  <footer>
    <!-- حقوق النشر أو روابط تذييل بسيطة -->
  </footer>
</body>
</html>

البنية المتوقعة

html[lang=ar][dir=rtl]
└── head (charset, viewport, title, description, canonical)
└── body
    ├── header
    ├── main
    │   └── article
    │       ├── h1 (عنوان واحد فقط)
    │       ├── time[datetime]
    │       ├── p (تحتوي strong/em دلاليًا)
    │       ├── figure > img[alt] + figcaption
    │       ├── h2, h3... (بترتيب منطقي)
    │       └── روابط داخلية/خارجية (بأمان)
    └── footer

متطلبات الوصول

ترتيب العناوين إلزامي: عنوان واحد h1، ثم h2 فأصغر بلا قفز مستوى — قارئ الشاشة يتنقّل بالعناوين كخريطة للصفحة، وقفزة مستوى تكسر هذه الخريطة.
alt وصفي حقيقي على صورة figure — ماذا تُظهر الصورة فعليًا، لا اسم الملف ولا "صورة".
نص الروابط وصفي: "اقرأ الدليل الكامل عن X" لا "اضغط هنا" أو "من هنا".
<article> داخل <main>: معلم main واحد للصفحة، والمقال عنصر مستقل بداخله — لا مقال بلا main، ولا أكثر من main واحد.

قائمة التحقق

معايير الإتمام

المشروع مكتمل حين: الصفحة تمرّ على مدقّق W3C بلا أخطاء أو تحذيرات بنيوية، وكل بند بقائمة التحقق أعلاه محقَّق، وmeta description وcanonical يعكسان محتوى الصفحة الفعلي لا نصًا عامًا منسوخًا.

إرشادات للحل المقترح

الحل الصحيح لا "يزخرف" HTML بترويسة SEO فوق بنية عشوائية — يبدأ من <head> مكتمل (كل الحقول الخمسة بالمتطلبات)، ثم <main><article> بعنوان h1 واحد يطابق فعليًا موضوع <title> (لا عنوانين مختلفين لنفس الصفحة)، ثم فقرات المحتوى بعناوين فرعية منطقية، مع <figure> قريبًا من الفقرة التي يوضّحها لا معزولًا في مكان عشوائي، و<time> عادة في سطر معلومات المقال (الكاتب/التاريخ) قرب h1. الرابط الخارجي يُختبر فعليًا بفتحه في تبويب جديد للتأكد أن rel="noopener noreferrer" مكتوب بالضبط، لا rel="noopener" وحدها أو منسيّة كليًا.