العودة إلى الدورة

الدرس 27: تعريف المناطق الهيكلية (`<header>`, `<main>`, `<footer>`)

الدورة الاحترافية في HTML: من الصفر إلى مطور ويب

27. تعريف المناطق الهيكلية

تحدد هذه العناصر المناطق الهيكلية الرئيسية الثلاث لتخطيط صفحة الويب النموذجي.

27.1 عنصر <header>

يحتوي على محتوى تمهيدي أو مجموعة من روابط التنقل. يمكن أن تحتوي الصفحة على رؤوس متعددة (واحد للصفحة، وواحد لكل قسم/مقالة رئيسية).

يشمل عادةً: شعار الموقع، عنوان الموقع، التنقل (<nav>).

html

<header> <h1>مدونتي الشخصية</h1> <nav>...</nav> </header>

27.2 عنصر <main>

يحتوي على المحتوى الفريد والمركزي للمستند. هذا هو الموضوع الأساسي. يجب أن يحتوي المستند على عنصر <main> واحد فقط.

html

<body> <header>...</header> 
<main>
    <!-- كل المحتوى الفريد لهذه الصفحة يذهب هنا -->
    <h2>مرحباً بك في الصفحة الرئيسية</h2>
    <p>هذا هو المحتوى الرئيسي الخاص بي.</p>
</main>

<footer>...</footer>
</body>

27.3 عنصر <footer>

يحتوي على محتوى إغلاق لأقرب جذر تقطيع (sectioning root) (إما الصفحة بأكملها أو <section> محدد).

يشمل عادةً: معلومات حقوق النشر، تفاصيل الاتصال، روابط خريطة الموقع.

html

<footer> <p>&copy; 2024 HTML Masterclass</p> <p><a href="#">سياسة الخصوصية</a></p> </footer>