جاري التحميل...

العناصر الدلالية في HTML

بعد div وclass/id تأتي الدلالة لتسمية المناطق بالمعنى.

المعنى قبل الصناديق

CSS يزيّن أي وسم؛ الدلالة توثّق القصد. ملاحة رئيسية → nav. محتوى فريد → main.

إجابة مباشرة

استخدم landmarks عند تطابق المعنى. main واحد. لا تلف الموقع كله داخل article واحد.

📊 Core landmarks

Element	Typical meaning
header	Introductory or banner content for a page or section
nav	Major navigation links
main	Dominant unique content of this page
article	Independent composition (post, story, card that could stand alone)
section	Thematic grouping, usually with a heading
aside	Side note related to the surrounding content
footer	Closing content for a page or section

هيكل صفحة بسيط

رأس وروابط، main للمحتوى الفريد، footer للختام.

Simple semantic skeleton

html

HTML Code

<body>
<header>
<h1>City Guide</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>Explore the city with clear HTML structure.</p>
</main>
<footer>
<p>All rights reserved.</p>
</footer>
</body>

قراءة الهيكل

header وغالباً nav
main واحد
footer للإغلاق

article وsection وaside

داخل main: مقال مستقل وأقسام بعنوان وملاحظة جانبية.

Article section and aside

html

HTML Code

<main>
<article>
<h2>Weekend markets</h2>
<section>
<h3>Saturday</h3>
<p>Fresh fruit stalls open at 8:00.</p>
</section>
<section>
<h3>Sunday</h3>
<p>Craft vendors join the square.</p>
</section>
</article>
<aside>
<h2>Tip</h2>
<p>Arrive early for the best produce.</p>
</aside>
</main>

قراءة المثال الثاني

article مستقل
section بعنوان
aside ليس main ثانياً

اختيار landmark مقابل div

دور معياري؟ landmark. غلاف تخطيط فقط؟ div.

تمرين

header/nav/main/footer
المحتوى في main
article واحد
تأكد من main واحد

أخطاء شائعة

عدة main
section بلا موضوع
استبدال عشوائي لكل div

ملخص

الدلالة تسمّي المعنى
main واحد
landmark عند تطابق الدور

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة