تخطيط إذا أردنا شرحه ككلمة؛ يمكننا أن نعرفه بأنه النظام، التصميم، وخطة التوزيع. وبناءً على ذلك، فإن تخطيط صفحة الويب سيكون تعريفًا صحيحًا على أنه تنظيم صفحة الويب.
يعد تخطيط صفحة الويب جزءًا مهمًا من إنشاء مواقع الويب ذات التجارب الجيدة التي تم الاعتناء بها، والتي تم بناؤها وفقًا لذلك، وغنية من الناحية الدلالية.
إذا سألت ما هو هذا الدلالي، يمكننا أن نقول إنه بمعناه الأساسي علامات HTML الأكثر دلالة. في السابق، عندما كنا ننشئ صفحة ويب
كنا نستخدم <div> ونعطيها id/class لتقسيم الصفحة إلى أقسام. لكن مع العناصر الدلالية التي جاءت مع HTML5، تم تحويل هذه الأقسام مباشرة إلى علامات.
على سبيل المثال، عند إضافة رأس في أعلى الصفحة، كنا نكتب الكود مسبقًا بشكل
< div id="header">…< /div>
لكن الآن
< header>…< /header>
يكفي إضافة الكود بين المحتويات.
بعض هذه العلامات هي header و footer و nav و section و article و aside.
يمكننا استعراض هذه المعلومات من خلال لوحة ليون;
عندما نفتح الصفحة لأول مرة، نواجه عمومًا عمودين.
هنا الجزء الأزرق على اليسار يتوافق مع منطقة القائمة، ويعني علامة <nav>. بينما تحتوي المنطقة الجانبية الأخرى على المحتوى العام لدينا.
بالطبع، يتم تقسيم منطقة المحتوى على اليمين أيضًا إلى أقسام.
المنطقة التي تظهر في الصورة، والتي تظهر في أعلى الصفحة عند فتحها، تتوافق مع علامة <header>.
هنا في الجزء الأيسر، توجد معلومات تتعلق بالصفحة، وفي الجزء الأيمن، يتم اختيار مركز البيانات ومعلومات المستخدمين.
الجزء الذي يحتوي على شريط الخبز (إشارات الصفحة)، وصندوق البحث، وزر "إضافة جديد"، والعمليات الأخرى نعرفه باسم subheader. ليس هناك ممثل مباشر لهذا في HTML5، لذلك يمكننا تقسيمه بأنفسنا داخل علامة الرأس.
الجزء الذي يليه، القائمة أو معلومات التفاصيل التي نعرضها، نعتبرها بشكل منفصل.
يمكن أن يكون هنا أي محتوى، يمكن تقسيمه إلى أقسام داخلية، أو يمكن استخدامه فقط لاستيعاب عنصر واحد.
في قالبنا، ليس لدينا منطقة <footer>، لكن إذا كان لدينا، يمكننا إضافته أيضًا داخل <header> مثلما فعلنا مع <content>، أو يمكننا اعتباره أسفل الحاوية العامة لدينا.
