HTML5 الدلالي: العناصر الدلالية مقابل حساء div
استبدل عناصر div الحاوية عديمة المعنى بعناصر دلالية، وافهم خوارزمية مخطط المستند وتسلسل العناوين.
HTML5 الدلالي: العناصر الدلالية مقابل حساء div درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
حساء Div — المشكلة
حساء Div هو صفحة مبنية بالكامل من عنصري <div> و<span>. ويتطلب استخدام أسماء الفئات لتوضيح البنية، ولا يمكن لقارئات الشاشة فهمه من دون هذه الفئات، كما أنه لا ينقل أي معنى إلى محركات البحث.
<!-- Div soup (avoid) -->
<div class="container">
<div class="header">
<div class="logo">...</div>
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
</div>البديل الدلالي
استبدل عناصر div عديمة المعنى بعناصر دلالية توضّح الغرض منها. تصبح البنية الآن موضحة لذاتها ومفهومة من دون أي CSS.
<!-- Semantic HTML (preferred) -->
<body>
<header>
<a href="/"><img src="logo.svg" alt="Brand"></a>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>خوارزمية مخطط المستند
تنشئ عناصر العناوين (h1-h6) مخططًا للمستند. ويتنقل مستخدمو قارئات الشاشة باستخدام العناوين. وتعلن التقنيات المساعدة مستوى العنوان في المخطط. حافظ على تسلسل منطقي: استخدم h1 لعنوان الصفحة، وh2 للأقسام الرئيسية، وh3 للأقسام الفرعية.
<time> — تواريخ قابلة للقراءة آليًا
يضع العنصر <time> علامات على التواريخ والأوقات باستخدام سمة datetime القابلة للقراءة آليًا. وتفهم محركات البحث تواريخ الفعاليات، كما يمكن لقارئات الشاشة الإعلان عن التواريخ المنسقة.
<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time><address>
يحتوي العنصر <address> على معلومات الاتصال الخاصة بأقرب مقالة أو بالمستند. ولا يشترط أن تكون المعلومات عنوانًا بريديًا؛ فالبريد الإلكتروني والهاتف ومعرّفات الحسابات الاجتماعية تُعدّ معلومات اتصال أيضًا.
<address>
<a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
<a href="https://twitter.com/coddykit">@coddykit</a>
</address><figure> و<figcaption>
يحتوي <figure> على محتوى مستقل مثل الصور أو المخططات أو أمثلة الشيفرة أو مقاطع الفيديو. ويوفر <figcaption> تسمية توضيحية مرتبطة دلاليًا بالشكل.
<figure>
<img src="chart.png" alt="Monthly active users 2025">
<figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure><blockquote> و<cite>
يمثل <blockquote> اقتباسًا مطولًا. استخدم سمة cite لعنوان URL الخاص بالمصدر. ويمثل العنصر <cite> عنوان عمل إبداعي، مثل كتاب أو مقالة أو فيلم.
<blockquote cite="https://developer.mozilla.org">
<p>HTML is the standard markup language for creating web pages.</p>
<footer>—<cite>MDN Web Docs</cite></footer>
</blockquote><details> و<summary>
ينشئ الزوج <details> + <summary> أداة أكورديون أو كشف أصلية من دون JavaScript. ويتولى المتصفح تلقائيًا التعامل مع الفتح والإغلاق والتفاعل باستخدام لوحة المفاتيح وإمكانية الوصول.
<details>
<summary>What is the refund policy?</summary>
<p>We offer a 30-day money-back guarantee on all plans.</p>
</details><mark> — نص مميز
يمثل <mark> نصًا مميزًا لغرض الرجوع إليه، مثل تطابق في نتيجة بحث. وهو يختلف دلاليًا عن تلوين النص بالأصفر باستخدام CSS.
<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p><abbr> — الاختصارات
أحط الاختصارات والرموز المختصرة بالعنصر <abbr>، ووفّر المصطلح كاملًا في السمة title. ويعرض قارئ الشاشة والمتصفح الصيغة الكاملة للمستخدمين عند تمرير المؤشر.
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>متى تستخدم <div> و<span>
لا يزال كلاهما مفيدًا. يُعدّ <div> الخيار المناسب لحاوية كتلية عامة بلا معنى دلالي، مثل حاويات التخطيط وجذور المكونات في React. ويُستخدم <span> لنقاط ربط التنسيق المضمنة التي لا تحمل معنى دلاليًا.
فحص سريع
أي عنصر HTML ينشئ أداة كشف أصلية قابلة للطي من دون الحاجة إلى JavaScript؟
مراجعة: HTML5 الدلالي
استبدل حساء div بالعناصر الدلالية: header وnav وmain وarticle وsection وaside وfooter. استخدم time للتواريخ، وfigure/figcaption للوسائط، وdetails/summary للأكورديونات، وmark للتمييز. واقصر استخدام div وspan على حاويات التخطيط التي لا تحمل معنى دلاليًا.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «HTML5 الدلالي: العناصر الدلالية مقابل حساء div» مجاني؟
نعم — نص درس «HTML5 الدلالي: العناصر الدلالية مقابل حساء div» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «HTML5 الدلالي: العناصر الدلالية مقابل حساء div»؟
استبدل عناصر div الحاوية عديمة المعنى بعناصر دلالية، وافهم خوارزمية مخطط المستند وتسلسل العناوين. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «HTML5 الدلالي: العناصر الدلالية مقابل حساء div»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- عناصر التحكم في النماذج: أنواع input وselect وtextarea
- ARIA وإمكانية الوصول: label وrole وaria-*
- HTML5 الدلالي: العناصر الدلالية مقابل حساء div
- سمات التحقق من صحة النماذج