الوسوم الدلالية
جزء من قسم Fundamentals في رحلة HTML على Coddy — الدرس 27 من 60.
تساعد الوسوم الدلالية (Semantic tags) في HTML على تحديد معنى المحتوى، مما يجعل الكود أكثر وضوحاً لكل من المطورين والمتصفحات. وعلى عكس <div> و <span>، فهي تعطي سياقاً للمحتوى المضمن.
وسوم دلالية شائعة:
<header>– محتوى تمهيدي، عادة ما يكون في الأعلى.<nav>– يحتوي على روابط التنقل.
<main>– المحتوى الرئيسي للصفحة.<article>– قطعة مستقلة بذاتها مثل منشور مدونة.
<section>– يجمع المحتوى ذو الصلة، وغالبًا ما يكون مصحوبًا برأس.<footer>– القسم السفلي الذي يحتوي على معلومات مثل حقوق الطبع والنشر أو تفاصيل الاتصال.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>يوفر هذا الهيكل تخطيطاً واضحاً وذا معنى للمحتوى.
التحدي
سهلقم ببناء صفحة مراجعة أفلام باستخدام HTML الدلالي (semantic HTML). يجب أن تتضمن:
1. <header> يحتوي على:
<h1>"Movie Reviews"<nav>يحتوي على روابط: "Home", "Reviews", “Top Picks”
2. <main> يحتوي على:
<article>لمراجعة تحتوي على:<h2>يحتوي على اسم الفيلم<p>يحتوي على مراجعة قصيرة
3. <footer> يحتوي على:
<p>"Copyright 2023 Movie Reviews"
ورقة مرجعية
تساعد الوسوم الدلالية (Semantic tags) في HTML على تحديد معنى المحتوى، مما يجعل الكود أكثر وضوحاً لكل من المطورين والمتصفحات. وعلى عكس <div> و <span>، فإنها تعطي سياقاً للمحتوى المضمن.
الوسوم الدلالية الشائعة:
<header>– محتوى تمهيدي، عادة ما يكون في الأعلى.<nav>– يحتوي على روابط التنقل.<main>– المحتوى الرئيسي للصفحة.<article>– قطعة محتوى مستقلة بذاتها مثل منشور مدونة.<section>– يجمع المحتوى ذو الصلة، وغالباً ما يكون له عنوان.<footer>– القسم السفلي الذي يحتوي على معلومات مثل حقوق النشر أو تفاصيل الاتصال.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>جرّب بنفسك
<!DOCTYPE html>
<html>
<body>
<!-- اكتب الكود هنا -->
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Fundamentals
2النصوص والتنسيق
العناوينالفقراتفواصل الأسطرالنص العريض والمائلالنص العريض والمائل مجدداًمراجعة - التنسيق8النماذج والمدخلات - الجزء الأول
أساسيات النماذجمدخلات النصوصسمات المدخلاتحقل كلمة المرورتسميات المدخلاتملخص - نموذج أساسي11صفحة التسجيل في الفعالية
نظرة عامة على المشروعقسم الـ Header
قسم تفاصيل الفعاليةنموذج التسجيلقسم الـ Footer