div و span والعناصر block و inline في HTML

الدرس 11 من 17 · HTML

هل لاحظت أن كل فقرة تبدأ في سطر جديد، بينما الرابط يبقى في مكانه داخل الجملة؟ هذا ليس صدفة. كل عنصر في HTML ينتمي إلى واحد من نوعين: block أو inline. فهم هذا الفرق يفسر لك لماذا تترتب العناصر في الصفحة بهذا الشكل، وهو أساس كل ما ستتعلمه لاحقاً في CSS. وستتعرف في هذا الدرس أيضاً على أشهر وسمين عامّين: <div> و <span>.

عناصر block

العنصر من نوع block:

يبدأ دائماً في سطر جديد.
يأخذ العرض المتاح كله، حتى لو كان محتواه كلمة واحدة.

أشهر أمثلته: <h1> إلى <h6>، و <p>، و <ul> و <ol> و <li>، و <table>، و <form>، والوسوم الدلالية مثل <header> و <section>.

تخيّل رفوف المكتبة: كل رف يمتد بعرض المكتبة كلها، والرف الجديد يأتي تحت الذي قبله، مهما كان عدد الكتب عليه.

عناصر inline

العنصر من نوع inline:

لا يبدأ سطراً جديداً، بل يبقى داخل السطر.
يأخذ من العرض بقدر محتواه فقط.

أشهر أمثلته: <a>، و <strong> و <em>، و <img>، و <code>، و <input>، و <button>.

وإذا كانت عناصر block رفوفاً، فعناصر inline هي الكتب على الرف: تقف متجاورة، وكل كتاب يأخذ مساحته فقط.

<p>هذه فقرة فيها <a href="page.html">رابط</a> وكلمة <strong>مهمة</strong>.</p>
<p>وهذه فقرة ثانية تبدأ في سطر جديد.</p>

الرابط والكلمة العريضة بقيا داخل السطر، والفقرة الثانية نزلت تحت الأولى.

قاعدة التداخل

عنصر block يمكن أن يحتوي عناصر block وعناصر inline.
عنصر inline يحتوي نصاً وعناصر inline فقط.

<!-- صحيح -->
<p>اقرأ <strong>هذا التنبيه</strong> جيداً.</p>

<!-- خطأ: فقرة داخل عنصر inline -->
<strong><p>اقرأ هذا التنبيه جيداً.</p></strong>

وهناك قاعدة خاصة بالفقرة: <p> لا تحتوي عناصر block. لا تضع داخلها قائمة ولا عنواناً ولا فقرة أخرى.

الوسم div: صندوق عام

<div> عنصر block بلا أي معنى ولا شكل. وظيفته أن يجمع عدة عناصر في صندوق واحد لكي تنسّقها معاً أو ترتبها بـ CSS.

<div>
  <h3>هاتف ذكي</h3>
  <p>شاشة 6.5 بوصة وبطارية تدوم يومين.</p>
  <a href="phone.html">التفاصيل</a>
</div>

لن ترى أي فرق في المتصفح الآن. لكن العنوان والفقرة والرابط صارت وحدة واحدة، وتستطيع أن تعطي هذا الصندوق خلفية وحدوداً، أو تضعه بجانب صناديق أخرى ليصير بطاقة منتج.

الوسم span: تمييز جزء من النص

<span> هو المقابل من نوع inline: عنصر بلا معنى ولا شكل، يحيط بجزء من النص داخل السطر لتنسّقه وحده.

<p>السعر: <span style="color: green;">150 جنيه</span> فقط.</p>

السعر صار أخضر، وباقي الجملة لم يتغير، ولم ينكسر السطر.

	`div`	`span`
النوع	block	inline
يبدأ سطراً جديداً؟	نعم	لا
يُستخدم لـ	تجميع عناصر وأقسام	تمييز كلمات داخل النص

div أم وسم دلالي؟

تعلمت في درس الوسوم الدلالية أن <header> و <nav> و <article> تصف معنى المحتوى. فمتى تستخدم <div>؟

إذا وُجد وسم يصف المحتوى فاستخدمه: قائمة التنقل <nav>، والمقال <article>، والتذييل <footer>.
إذا كان الصندوق للتنسيق والترتيب فقط، فهنا مكان <div>.

والأمر نفسه مع <span>: إذا كانت الكلمة مهمة فاستخدم <strong>، وإذا أردت تلوينها فقط فاستخدم <span>.

جرّب بنفسك

أعطينا كل عنصر خلفية ملونة لترى المساحة التي يأخذها. لاحظ أن خلفية div تمتد بعرض الصفحة، وخلفية span بقدر الكلمات فقط. جرّب أن تغيّر أحد وسمي span إلى div وشاهد ما يحدث للسطر:

جرّب بنفسكHTML

أو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

الإكثار من div: صفحة كلها <div> داخل <div> صعبة القراءة وضعيفة أمام محركات البحث. استخدم الوسوم الدلالية أولاً.
وضع عنصر block داخل span أو a بلا حاجة: مثل <span><p>...</p></span>. اعكس الترتيب، أو استخدم <div>.
استخدام div للنص: الفقرة تُكتب في <p> وليس في <div>، ليعرف المتصفح وقارئ الشاشة أنها فقرة.

اختبر نفسك

سؤال

أي عبارة صحيحة عن العنصر من نوع inline؟

سؤال

تريد تلوين كلمة واحدة داخل فقرة دون كسر السطر. أي وسم تستخدم؟

الخلاصة

عنصر block يبدأ سطراً جديداً ويأخذ العرض كله، مثل <p> و <h1> و <ul>.
عنصر inline يبقى داخل السطر بقدر محتواه، مثل <a> و <strong> و <img>.
<div> صندوق block عام لتجميع العناصر وتنسيقها معاً.
<span> عنصر inline عام لتمييز جزء من النص.
قدّم الوسم الدلالي دائماً، واترك <div> و <span> لما هو تنسيق فقط.

عن مدرسة البرمجة

مدرسة البرمجة موقع عربي مجاني لتعليم البرمجة من الصفر، بدروس منظمة وأمثلة تجربها بنفسك. هدفنا أن يتعلم كل عربي البرمجة بلغته، خطوة بخطوة.