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..." للفقرات.
REQUIRED OUTPUT FORMAT: [Your translated content here]

جرّب بنفسك

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

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

جميع دروس Fundamentals

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