شرح المفهوم
إعادة الهيكلة في HTML تدور في الغالب حول تحسين البنية دون تغيير معنى الصفحة. في هذا الدرس، ستبدأ بكتلة بسيطة من الترميز وتحولها إلى HTML أنظف وأكثر دلالية. الهدف هو تحديد العناصر العامة التي يمكن استبدالها بعلامات أفضل، وتجميع المحتوى ذي الصلة بشكل أوضح، وجعل المستند أسهل للقراءة والصيانة والتصميم لاحقًا.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع الترميز في أقسام دلالية ذات بنية واضحة.
- أضف منطق المعالجة في القسم الأوسط.
- انتهِ بالمخرجات والتحقق السريع.
مرجع الأوامر
- استبدل حاويتين غير دلاليتين على الأقل بعلامات تصف المحتوى بشكل أفضل.
- شغل الصفحة وتأكد من أن مخرجات المتصفح لا تزال تتطابق مع القصد الأصلي.
- اشرح خيار إعادة هيكلة واحد بلغة واضحة، مثل لماذا تتناسب `<article>` أو `<header>` بشكل أفضل.
- راجع الترميز النهائي وتحقق مما إذا كان بإمكان مطور آخر فهمه بسرعة.
دليل خطوة بخطوة
- اقرأ الترميز الأولي وحدد الأجزاء التي تبدو عامة جدًا أو متكررة.
- أعد كتابة البنية باستخدام عناصر دلالية مثل `header` أو `main` أو `article` أو `section` أو `footer` حيثما كان ذلك مناسبًا.
- افتح الصفحة وتأكد من أن المحتوى المرئي لم يتعطل بعد إعادة الهيكلة.
- قارن بين الإصدارين القديم والجديد ولاحظ أيهما أسهل في المسح الضوئي.
- اكتب جملة واحدة حول كيفية تحسين HTML الدلالي لقابلية الصيانة.
تمارين تطبيقية
- أعد هيكلة بطاقة حدث بسيطة مبنية بعناصر `div` إلى بنية دلالية أكثر معنى.
- خذ كتلة وصف منتج قصيرة وأعد تنظيمها باستخدام عناصر `heading` و`paragraph` و`list` و`footer`.
- أنشئ إصدارًا ثانيًا من نفس الصفحة ببنية أنظف ولكن بنفس المحتوى المرئي.
تحديات برمجية
- أنشئ حلين دلاليين صالحين لنفس المحتوى وقارن أيهما يقرأ بشكل أوضح.
- أعد هيكلة قسم صفحة مزدحم مع الحفاظ على الترميز سهل الوصول إليه وسهل التصميم لاحقًا.
مهام تمرين صغيرة
- استبدل غلافًا عامًا بعلامة دلالية.
- تحقق من أن العناوين تتبع ترتيبًا منطقيًا.
- لخص في سطر واحد ما تغير في إعادة الهيكلة.
خطأ شائع
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.