في هذا الدرس 8تصفّح المواضيع
تمثل العناصر الدلالية Semantic HTML وسوماً هيكلية تعبر بطبيعتها الأصيلة عن معناها وغرضها الوظيفي للمتصفح والمطور على حد سواء. وخلافاً للحاويات العامة مثل
<div> و <span> التي لا تقدم أي معلومة عن محتواها الداخلي، توضح العناصر الدلالية بجلاء ما إذا كان المحتوى يمثل قائمة تنقل رئيسية أو مقالاً مستقلاً أو خاتمة للمستند.
أحدث إطلاق العناصر الدلالية في HTML5 ثورة حقيقية في مجالات إتاحة الويب وتحسين محركات البحث؛ حيث تعتمد برمجيات قراءة الشاشة على هذه المعالم الدلالية لتمكين المستخدمين المكفوفين من القفز الفوري إلى صلب المحتوى المطلوب، بينما تستعين بها عناكب محركات البحث لفهم التسلسل الهرمي للمعلومات وتقديم نتائج بحث بالغة الدقة.
يمثل عنصر
<header> القسم العلوي والمقدمة التمهيدية لأقرب حاوية هيكلية يقع بداخلها أو للمستند بأكمله. وعلى مستوى الصفحة الرئيسية، يحتضن هذا القسم عادة شعار الموقع الرسمي، والعنوان الرئيسي <h1>، ونموذج البحث، وشريط التنقل العام، ليشكل المدخل البصري والدلالي للموقع.من القواعد المعمارية الهامة أن عنصر
<header> لا يقتصر وجوده على أعلى الصفحة بأكملها فحسب؛ بل يمكنك استخدامه بشكل قياسي تماماً كقسم علوي تمهيدي داخل عناصر <article> أو <section> المستقلة لتقديم عناوين تلك الوحدات وتاريخ نشرها وهوية مؤلفها.Semantic Page Header Landmark Elementرأس الصفحة الدلالي باستخدام عنصر header
بناء مقدمة ورأس الصفحة الذي يضم الشعار والعنوان الرئيسي باستخدام header.
HTML
<header style="display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #ede9fe; border-radius: 8px;">
<strong style="color: #4c1d95;">CloseTag Academy</strong>
<span style="font-size: 13px; color: #6d28d9;">v2026 Curriculum</span>
</header>Semantic Header Element Browser Previewمعاينة رأس الصفحة الدلالي في المتصفح
عرض متصفح لرأس الصفحة المبني دلالياً بواسطة وسم header.
يحتضن عنصر
<main> المحتوى الجوهري والفريد لصفحة الويب؛ فهو يمثل صلب الموضوع الذي يزوره المستخدم من أجله، ويفصل المقالات التعليمية وشروحات الدروس أو واجهات المنتجات عن الأجزاء العامة المكررة في الموقع مثل القوائم الجانبية والأقسام العلوية وتذييلات الحقوق.تنص مواصفة HTML5 الصارمة على وجوب احتواء الصفحة على عنصر
<main> مرئي واحد فقط في نفس الوقت. ويعد تكرار هذا الوسم مخالفة لمعايير الويب؛ حيث يعطل آلية تخطي الروابط التي يعتمد عليها مستخدمو لوحة المفاتيح وقارئات الشاشة للقفز مباشرة إلى صلب الموضوع وتجاوز القوائم المتكررة.Primary Document Content With Mainتحديد المحتوى الرئيسي الفريد بعنصر main
تغليف المحتوى الأساسي الفريد للصفحة داخل وسم main لتمييزه عن القوائم المتكررة.
HTML
<main style="padding: 12px; border: 2px solid #6d28d9; border-radius: 10px; background: #ffffff;">
<h3 style="margin: 0 0 6px;">Lesson 51: Semantic HTML5</h3>
<p style="margin: 0;">The <main> landmark holds the core topic of this page.</p>
</main>Main Landmark Live Browser Renderمعاينة المحتوى الأساسي main في المتصفح
عرض متصفح لمنطقة المحتوى الرئيسي الفريد للصفحة داخل وسم main.
يمثل عنصر
<section> قسماً موضوعياً مستقلاً داخل مستند الويب يجمع محتويات مترابطة حول فكرة معينة؛ حيث يعمل كفصل في كتاب أو لوحة تبويب أو قسم مستقل للمميزات. ومن القواعد القياسية الأساسية أن يبدأ كل وسم <section> دائماً بعنوان هرمي يوضح موضوعه.يجب على المطور تجنب استخدام عنصر
<section> كغلاف لمجرد تطبيق تنسيقات بصرية؛ فإذا كانت الحاوية مطلوبة فقط لضبط هوامش CSS أو تنظيم أعمدة الشبكة أو تشغيل مؤثرات حركية دون أن تمثل موضوعاً متماسكاً يحمل عنواناً، فإن عنصر التقسيم المحايد <div> هو الخيار الصحيح.Thematic Chapter Grouping With Sectionتقسيم المحاور الموضوعية باستخدام عنصر section
تجميع محور موضوعي متكامل يبدأ بعنوان فرعي وفقرة توضيحية داخل وسم section.
HTML
<section style="padding: 12px; background: #f5f3ff; border-radius: 8px;">
<h4 style="margin: 0 0 6px; color: #4c1d95;">Module 3: Web Accessibility</h4>
<p style="margin: 0;">Learn ARIA roles, keyboard focus order, and W3C markup validation.</p>
</section>Semantic Section Element Browser Previewمعاينة القسم الموضوعي section في المتصفح
عرض متصفح لقسم موضوعي منظم يبدأ بعنوان واضح داخل وسم section.
يمثل عنصر
<article> وحدة محتوى مستقلة بذاتها وقائمة بذاتها في الصفحة أو التطبيق، بحيث يمكن نظرياً اقتطاعها وإعادة نشرها وتوزيعها بشكل مستقل تماماً. ومن أشهر تطبيقاتها التدوينات الإخبارية، ومقالات المدونات، والمشاركات في المنتديات، وتعليقات القراء، وبطاقات التفاعل المستقلة.
يلخص الجدول المرجعي التالي أهم العناصر الدلالية في HTML5 ومناطق المعالم الدلالية وقواعد استخدامها المعمارية:
تعتبر قاعدة اختبار النشر المستقل المعيار الذهبي لتحديد ما إذا كان المحتوى يستحق وسم
<article>؛ فإذا استطعت اقتطاع هذا الجزء ونشره كعنصر مستقل في تغذية إخبارية أو تطبيق للهواتف الذكية وبقي مفهوماً تماماً دون الحاجة لبقية الصفحة، فإن استخدامه هو الخيار المثالي.يحتضن عنصر
<aside> محتوى يرتبط بصورة تكميلية أو جانبية بالموضوع الرئيسي المحيط به، ويمكن فصله دون الإخلال بالسياق الأصلي. ومن أشهر استخداماته المعمارية الأشرطة الجانبية للموقع، وصناديق التوصيات والمقالات ذات الصلة، ومسارد المصطلحات، والإعلانات، وبطاقات تعريف الكاتب.
عند وضع عنصر
<aside> بجانب المحتوى الرئيسي داخل جسم الصفحة، تتعرف عليه قارئات الشاشة تلقائياً بوصفه معلماً جانبياً تكميلياً. ويتيح ذلك لمستخدمي الأجهزة المساعدة تجاوز الأشرطة الجانبية بسهولة للوصول إلى الموضوع الرئيسي أو الانتقال إليها متى رغبوا في استعراض الروابط الداعمة.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس المعمارية الدلالية الشاملة في HTML5: استبدال الحاويات العشوائية بعناصر القسم العلوي header والتنقل nav والمحتوى الجوهري main والأقسام الموضوعية section والمقالات المستقلة article والأشرطة الجانبية aside والتذييل footer، والاستفادة من معالم ARIA التلقائية. الخطوة التالية: سننتقل في الدرس القادم إلى استكشاف الكيانات الرمزية في HTML وتشفير المحارف المحجوزة لحماية المستند وتأمينه.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات6
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 6 مفهومةأول بطاقة، أول خطوة
- 01 Semantic HTML لغة HTML الدلالية
- وسوم في لغة HTML تعبر بوضوح عن وظيفتها الهيكلية ومعناها السياقي للمتصفح والمطور والتقنيات المساعدة.
- للمراجعة
- 02 Semantic Landmark المعلم الدلالي
- مناطق ارتكاز قياسية تعلن عنها الوسوم الدلالية تلقائياً لبرمجيات قراءة الشاشة لتسهيل القفز السريع بين أقسام الصفحة.
- للمراجعة
- 03 Main Element عنصر المحتوى الجوهري
- عنصر دلالي يحتضن المحتوى الأساسي والفريد لصفحة الويب، ويسمح بوجود نسخة مرئية واحدة فقط منه في المستند.
- للمراجعة
- 04 Article Element عنصر المقال المستقل
- وحدة محتوى متكاملة وقائمة بذاتها يمكن اقتطاعها وإعادة نشرها بشكل مستقل عبر قنوات التوزيع والتغذية الإخبارية.
- للمراجعة
- 05 Aside Element عنصر المحتوى الجانبي
- حاوية دلالية تحتضن محتوى يرتبط بصورة تكميلية وجانبية بالموضوع الرئيسي المحيط بها كالأشرطة الجانبية والاقتباسات.
- للمراجعة
- 06 Document Outline المخطط الهيكلي للمستند
- الخريطة الهيكلية الهرمية التي تشكلها العناوين والحاويات الدلالية لتنظيم وتدقيق محتوى صفحة الويب.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 4 مفهومةأول بطاقة، أول خطوة
- 01 WHATWG WHATWG
- Web Hypertext Application Technology Working Group
- مجموعة العمل التقنية المسؤولة عن تطوير وصيانة المعيار الحي للغة HTML وتحديد مواصفات العناصر الدلالية القياسية.
- للمراجعة
- 02 SEO SEO
- Search Engine Optimization
- ممارسات ومعايير برمجية تستهدف تعزيز ظهور وترتيب صفحات ومواقع الويب في نتائج محركات البحث العالمية.
- للمراجعة
- 03 ADA ADA
- Americans with Disabilities Act
- تشريع قانوني أمريكي يلزم بتوفير الوصول الرقمي المتكافئ للأشخاص ذوي الإعاقة في المواقع والتطبيقات الإلكترونية.
- للمراجعة
- 04 EAA EAA
- European Accessibility Act
- توجيه قانوني صادر عن الاتحاد الأوروبي يفرض معايير إتاحة رقمية إلزامية على كافة الخدمات والمواقع الإلكترونية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
قم ببناء هيكل صفحة ويب متكامل يتضمن عناصر header وnav وmain وarticle وaside وfooter دون الاعتماد على الحاويات المبهمة.
-
أنشئ شريط تنقل رئيسي داخل حاوية nav دلالية باستخدام قائمة روابط نقطية منظمة.
-
قم بصياغة مقال تدويني متكامل يحوي قسماً علوياً وتاريخاً ونصوصاً وتذييل كاتب داخل وسم article مستقل.
-
أضف عنصراً جانبياً aside بجوار المحتوى الرئيسي يضم روابط ومراجع تكميلية تدعم فكرة المقال الأساسي.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
2أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.