Menu
Coddy logo textTech
flag Ar iconالعربيةdown icon

الأقسام والمقالات

جزء من قسم Fundamentals في رحلة HTML على Coddy — الدرس 28 من 60.

في HTML، تُستخدم الوسوم <section> و <article> لتنظيم المحتوى إلى أجزاء منطقية.

يحدد الوسم <section> قسماً في المستند، مثل الفصول، أو الرؤوس، أو التذييلات، أو أي أقسام أخرى في المستند. إنها طريقة لتجميع المحتوى ذي الصلة معاً. على سبيل المثال، يمكنك استخدام <section> لتقسيم صفحة إلى مقدمة، ومحتوى، ومعلومات اتصال.

إليك كيفية استخدام وسم <section>:

<section>
	<h2>Section Heading</h2>
	<p>Section content goes here.</p>
</section>

يحدد الوسم <article> محتوىً مستقلاً وبذاته. يجب أن يكون له معنى بمفرده، ويجب أن يكون من الممكن قراءته بشكل مستقل عن بقية الموقع الإلكتروني. أمثلة على الأماكن التي يمكن فيها استخدام عنصر <article>: منشور منتدى، أو تدوينة، أو قصة إخبارية، أو تعليق.

إليك كيفية استخدام وسم <article>:

<article>
	<h2>Article Title</h2>
	<p>Article content goes here.</p>
</article>
challenge icon

التحدي

سهل

أنشئ مستند HTML يستخدم وسمي <section> و <article> لهيكلة صفحة ويب. قم بتضمين الأقسام التالية:

  1. قسم <main> لاحتواء المحتوى الرئيسي للصفحة.
  2. داخل <main>، أنشئ <section> مع عنوان (<h2>) يقول "Upcoming Events".
  3. داخل الـ <section>، أنشئ عنصرين <article>.
  4. يجب أن يحتوي كل <article> على عنوان (<h3>) وفقرة (<p>) مع بعض النص الوهمي. استخدم "Event 1" و "Event 2" للعناوين و "Event 1 details..." و "Event 2 details..." للفقرات.

ورقة مرجعية

يحدد الوسم <section> قسماً في مستند لتجميع المحتوى ذو الصلة معاً:

<section>
	<h2>Section Heading</h2>
	<p>Section content goes here.</p>
</section>

يحدد الوسم <article> محتوىً مستقلاً وبذاته يجب أن يكون له معنى بمفرده:

<article>
	<h2>Article Title</h2>
	<p>Article content goes here.</p>
</article>

جرّب بنفسك

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

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

جميع دروس Fundamentals