Menu
CoddyTech

الوسوم الدلالية

جزء من قسم الأساسيات في رحلة HTML على Coddy. الدرس 27 من 60.

تساعد الوسوم الدلالية في 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>

توفّر هذه البنية تخطيطًا واضحًا وذا معنى للمحتوى.

challenge icon

التحدي

سهل

أنشئ صفحة لمراجعات الأفلام باستخدام HTML دلالي. يجب أن تتضمن:

1. <header> مع:

  • <h1> "Movie Reviews"
  • <nav> مع روابط: "Home"، "Reviews"، “Top Picks”

2. <main> مع:

  • <article> لمراجعة تحتوي على:
    • <h2> مع اسم الفيلم
    • <p> مع مراجعة قصيرة

3. <footer> مع:

  • <p> "Copyright 2023 Movie Reviews"

جرّب بنفسك

<!DOCTYPE html>
<html>
    <body>
        <!-- اكتب الكود هنا -->
    </body>
</html>
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس الأساسيات

تدرّب بنفسك: Playground لـ Web