👩🏫 من إعداد: فريق عمل جامعة بنها
🧑🏫 درس تفاعلي
🎯 أهداف الدرس
- معرفة معنى Semantic HTML.
- التمييز بين العناصر العادية والعناصر الدلالية.
- استخدام العناصر الدلالية في بناء صفحة ويب.
- إنشاء هيكل (Layout) بسيط لموقع.
🧠 أولاً: ما معنى Semantic؟
Semantic معناها "له معنى أو وظيفة واضحة".
بدل ما نستخدم عنصراً عاماً مثل <div> لكل أجزاء الصفحة، نستخدم وسوماً توضح وظيفة كل جزء، فيصبح الكود أسهل في القراءة والفهم.
🔹 1. Header
يمثل رأس الصفحة. يوضع فيه عادةً:
- اسم الموقع
- الشعار
- العنوان الرئيسي
<header>
<h1>My Website</h1>
</header>
🔹 مثال:
🔹 2. Nav
شريط التنقل.
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
🔹 3. Main
المحتوى الرئيسي للصفحة.
<main>
... المحتوى الرئيسي ...
</main>
🔹 مثال:
هذا هو المحتوى الرئيسي للصفحة.
🔹 4. Section
يقسم الصفحة إلى أجزاء (مثل: About، Services، Courses).
<section>
... محتوى القسم ...
</section>
🔹 مثال:
About Us
هذا هو قسم عن الموقع.
🔹 5. Article
موضوع أو مقال مستقل.
<article>
... محتوى المقال ...
</article>
🔹 مثال:
أول مقال لي
هذا هو محتوى المقال الأول.
🔹 6. Aside
معلومات جانبية (مثل: إعلان، نصيحة، معلومة إضافية).
<aside>
... محتوى جانبي ...
</aside>
🔹 مثال:
🔹 7. Footer
أسفل الصفحة.
<footer>
Copyright 2026
</footer>
🔹 مثال:
📊 الفرق بين العناصر العادية والدلالية
| عناصر عادية (Non-Semantic) | عناصر دلالية (Semantic) |
|---|
| <div> | <header>, <footer>, <section> |
| <span> | <nav>, <article>, <aside> |
| ليس لها معنى محدد | لها معنى ووظيفة واضحة |
| صعبة القراءة والفهم | سهلة القراءة والفهم |
📋 مثال كامل
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<main>
<section>
<h2>About Us</h2>
<p>هذا هو قسم التعريف بالموقع.</p>
</section>
<section>
<h2>Services</h2>
<p>هذا هو قسم الخدمات.</p>
</section>
<article>
<h2>مقال اليوم</h2>
<p>هذا هو محتوى المقال.</p>
</article>
<aside>
<p>💡 معلومة جانبية مهمة.</p>
</aside>
</main>
<footer>
<p>© 2026 جميع الحقوق محفوظة</p>
</footer>
</body>
</html>
About Us
هذا هو قسم التعريف بالموقع.
Services
هذا هو قسم الخدمات.
مقال اليوم
هذا هو محتوى المقال.
📝 المشروع العملي
📝 المطلوب:
- إنشاء صفحة ويب باستخدام العناصر الدلالية التالية:
- <header>
- <nav>
- <main>
- <section> (قسمين على الأقل)
- <article>
- <aside>
- <footer>
- تطبيق المحتوى المناسب لكل عنصر.
🧪 اختبار تفاعلي · مراجعة سريعة
🌟 درجتك
0 / 0