وثائق HTML قابلة للتشغيل: وسم section

وسم section في HTML: الفرق بين section وarticle وdiv

العنصر <section> يجمع محتوى موضوع واحد تحت عنوان خاص به. تعلّم متى تستخدم <section>، ومتى يكون <article> أو <div> خيارًا أفضل، وكيف تتداخل الثلاثة، وكيف يصبح القسم المسمّى معلمًا.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

ما الغرض من وسم section

<section> يجمع محتوى موضوع واحد، ويبدأ بعنوان يسمّي ذلك الموضوع. صفحة هبوط مقسمة إلى «Features» و«Pricing» و«FAQ» مثال نموذجي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

كل قسم فصل من فصول الصفحة، وكل عنوان سطر في فهرس محتوياتها. ومثل الوسوم الدلالية الأخرى، ليس لـ <section> تنسيق افتراضي، والحدود تأتي من CSS.

الفرق بين section وarticle وdiv

الثلاثة تبدو متماثلة على الشاشة. ما يختلف هو ما تقوله عن المحتوى:

العنصر	يعني	الاختبار
`<article>`	قطعة كاملة مستقلة بذاتها	هل لها معنى لو نُشرت وحدها، في موقع آخر أو في موجز أخبار؟
`<section>`	جزء ذو موضوع من كلٍّ أكبر	هل لها عنوان (أو تحتاج إليه)، وهل هي فصل من شيء ما؟
`<div>`	لا شيء: صندوق تنسيق أو تخطيط	هل هو موجود من أجل CSS أو JavaScript فقط؟

التدوينات وتعليقات المنتديات والأخبار وبطاقات المنتجات مقالات. أما «Features» و«Chapter 2» و«Related products» فأقسام. وصف flex يصفّ ثلاث بطاقات هو div.

مقالات داخل قسم

يتداخل الاثنان في الاتجاهين. هنا يحتوي قسم «Latest posts» على عدة مقالات مستقلة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

لاحظ <div class="grid">: وُجد فقط لترتيب البطاقات في صف، فـ div هو الوسم الصحيح له. وكل بطاقة مقال لأن كل تدوينة قائمة بذاتها.

أقسام داخل مقال

يمكن تقسيم المقال الطويل إلى أقسام، تمامًا مثل فصول الكتاب. مستويات العناوين تكمل من عنوان المقال نفسه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

الصندوق الأزرق هو المقال (الدليل كله)، والأشرطة الخضراء أقسامه. أعطِ القسم مستوى عنوان خاصًا به: المقال ذو العنوان h2 يحتوي على أقسام بعناوين h3.

الأقسام المسمّاة تصبح معالم

تسرد قارئات الشاشة عناصر معينة كمعالم يستطيع المستخدمون التنقل بينها. لا يصبح <section> معلم region إلا حين يكون له اسم قابل للوصول. اجعل aria-labelledby تشير إلى عنوانه:

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

افعل ذلك للأقسام القليلة التي قد يرغب المستخدم في القفز إليها مباشرة، لا لكل قسم: الصفحة ذات العشرين معلمًا صعبة التصفح بقدر الصفحة التي لا معالم فيها. والأقسام غير المسمّاة تفيد مع ذلك، لأن عناوينها تظهر في قائمة العناوين لدى قارئ الشاشة.

والأقسام أهداف جيدة أيضًا للروابط داخل الصفحة. أعطِ أحدها id، والرابط الذي يحمل href="#id" ينتقل إليه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

أخطاء شائعة

استخدام <section> كغلاف للتنسيق. إن لم يكن هناك عنوان ولا موضوع، فاستخدم <div>. تُظهر صفحة HTML الدلالي مكان كل وسم تخطيط.
إحاطة تدوينة واحدة بـ <section>. التدوينة القائمة بذاتها <article>.
أقسام بلا عناوين. أضف عنوانًا، ولو مخفيًا بصريًا، أو أعد التفكير في كونها قسمًا.
استبدال <main> بـ <section>. المحتوى الرئيسي للصفحة يوضع في <main>، والأقسام توضع داخله.
تسمية كل قسم. أضف aria-labelledby إلى الأقسام المهمة فقط، كي تبقى قائمة المعالم قصيرة.

الأسئلة الشائعة

ما هو وسم section في HTML؟

<section> يجمع محتوى ينتمي إلى موضوع واحد، مثل فصل في مستند أو جزء "Pricing" في صفحة هبوط. يبدأ عادةً بعنوان يقول عمّ يتحدث القسم.

ما الفرق بين section وdiv؟

<section> يقول إن المحتوى جزء ذو موضوع من المستند وله عنوانه الخاص. أما <div> فلا يقول شيئًا، فهو صندوق للتنسيق أو التخطيط. إن كنت تحتاج فقط إلى غلاف لـ CSS، فاستخدم <div>.

ما الفرق بين section وarticle؟

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

هل يمكن أن يحتوي article على sections، وsection على articles؟

نعم، الاثنان. يمكن تقسيم مقال طويل إلى أقسام، ويمكن لقسم مثل "Latest posts" أن يحتوي على قائمة مقالات.

هل يحتاج section إلى عنوان؟

يجب أن يكون له عنوان في كل الحالات تقريبًا، لأن العنوان هو ما يسمّي الموضوع. إن لم تستطع التفكير في عنوان له، فالمحتوى غالبًا ليس قسمًا و<div> أنسب له.

مفاهيم ذات صلة