شرح المفهوم
يوضح هذا الدرس كيف يمكن لبنية HTML أن تؤثر على أداء الصفحة قبل وقت طويل من كتابة أي CSS أو JavaScript. ستتدرب على بناء ترميز (markup) بسيط وذو معنى، وتقليل الأغلفة (wrappers) غير الضرورية، وتنظيم المحتوى بحيث يمكن للمتصفح تحليله بسرعة ويمكن للإنسان صيانته بسهولة. الهدف هو التفكير في الأداء كعادة في الترميز: بنية أبسط، تسلسل هرمي أوضح، وعناصر أقل إهدارًا.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع الترميز في أقسام دلالية ذات بنية واضحة.
- أضف منطق المعالجة في القسم الأوسط.
- اختتم بالمخرجات والتحقق السريع.
مرجع الأوامر
- تحقق مما إذا كان لكل عنصر غرض محتوى حقيقي قبل الاحتفاظ به.
- فضّل الحاويات الدلالية مثل `main` و`article` و`section` وعناصر القائمة على الأغلفة العامة.
- قارن بين نسخة مطولة ونسخة مبسطة لنفس بنية الصفحة.
- راجع الترميز بحثًا عن قابلية القراءة، وعمق التعشيش، والتكرار غير الضروري.
دليل خطوة بخطوة
- ابنِ الترميز الأولي مرة واحدة فقط وتأكد من أن المحتوى يُقرأ بشكل صحيح في المتصفح.
- أزل غلافًا واحدًا على الأقل غير ضروري أو حاوية متكررة.
- استبدل أي عنصر عام بعنصر دلالي (semantic) أكثر معنى حيثما كان ذلك مناسبًا.
- قارن بين البنيتين الأصلية والمعدلة ولاحظ أيهما أسهل في المسح الضوئي.
- اختتم بقائمة تحقق قصيرة: تسلسل هرمي واضح، تعشيش (nesting) أدنى، وتدفق محتوى قابل للقراءة.
تمارين تطبيقية
- أعد بناء المثال كصفحة إعلان قصيرة بمحتوى مختلف ولكن بنفس عقلية "الأداء أولاً".
- خذ كتلة من الترميز المتداخل المزدحم وبسّطها دون فقدان المعنى.
- أنشئ قسمًا صغيرًا في الصفحة يستخدم العناوين والفقرات والقوائم بدون أي عناصر `div` غير ضرورية.
تحديات برمجية
- أعد إنشاء نفس فكرة التخطيط باستخدام عناصر أقل من مسودتك الأولى.
- اشرح أي الخيارات الهيكلية تحسن قابلية الصيانة وكذلك كفاءة العرض.
مهام تمرين صغيرة
- احسب عدد العناصر التي تستخدمها نسختك النهائية.
- اكتب جملة واحدة تشرح لماذا يمكن لـ HTML الدلالي (semantic HTML) أن يساعد الأداء أيضًا.
- أزل غلافًا إضافيًا واحدًا وأعد تحميل الصفحة.
خطأ شائع
Skipping input validation or mixing logic/output in one unstructured block.
تحدٍ مصغّر من الواقع
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.