HTML

ليه المرحلة دي مهمة

ال HTML هو الجزء اللي محركات البحث وال Screen readers وال Browser بيفهموه من نفسهم. لو كتبته صح هتاخد Accessibility و SEO وسلوك جاهز ببلاش، ولو كتبته غلط هتضطر تكتب JavaScript مكانش المفروض يتكتب أصلاً.

تتعلم إيه

1. لازم تعرفه

   Semantic HTML

   علّم إنه خلص

   تختار header و nav و main و article و section و button وال lists على حسب المعنى، مش الشكل.

   تبقى خلصته لما

   • عمرك ما تستخدم div عليه click handler في مكان المفروض يبقى فيه button أو link.
   • صفحاتك فيها h1 واحد، وترتيب ال Headings منطقي حتى من غير CSS.

   المصادر

   • Learn HTML In Arabic (2021)Elzero Web School · كورس · عربي
   • web.dev — Learn HTMLكورس
   • MDN — HTML elements referenceDocs
2. لازم تعرفه

   ال Forms وال Validation

   علّم إنه خلص

   ال Labels، وأنواع ال Inputs، وال Validation الجاهز، وإزاي ال Form بيتبعت من غير JavaScript خالص.

   تبقى خلصته لما

   • كل input بتكتبه ليه label مربوط بيه.
   • بتستخدم ال input type الصح (email و tel و number و date)، وattributes زي required و autocomplete و inputmode.

   المصادر

   • web.dev — Formsكورس
3. اتعلمه بعدين

   UI جاهز: dialog و popover و details

   علّم إنه خلص

   ال HTML الحديث فيه Modals و Popovers و Disclosures جاهزين، وال Focus handling متظبط فيهم. جربهم قبل ما تنزل library.

   تبقى خلصته لما

   • تقدر تعمل Modal accessible ب <dialog> و showModal().
   • عارف إمتى ال popover attribute يكفي وإمتى لأ.

   المصادر

   • MDN — <dialog>Docs
   • MDN — Popover APIDocs
4. لازم تعرفه

   أساسيات ال SEO وال Metadata

   علّم إنه خلص

   ال Title وال Meta description و Open Graph tags وال Alt text وال URLs النضيفة: الجزء من ال SEO اللي في إيدك انت.

   تبقى خلصته لما

   • كل صفحة بتطلعها ليها title و description مختلفين.
   • بتكتب alt بيوصف الصورة بتعمل إيه، و alt فاضي للصور اللي للزينة بس.

   المصادر

   • Google — SEO Starter GuideDocs

أخطاء شائعة

• إنك تعتبر ال HTML سهل وتجري على ال Frameworks. أغلب مشاكل ال Accessibility في تطبيقات React أصلها مشاكل HTML.
• إنك تختار ال Element عشان شكله الافتراضي مش عشان معناه.