21- عناصر كتلة وعناصر داخلية في HTML

Block and Inline

كل عنصر HTML له قيمة عرض افتراضية، اعتمادًا على نوعه.

القيمتان الأكثر شيوعًا للعرض هما الكتلة (block) والعناصر داخلية (inline).

عناصر الكتلة في HTML

عناصر الكتلة تبدأ دائمًا على سطر جديد، ويضيف المتصفح تلقائيًا مسافة (هامش) قبل وبعد العنصر. كما تشغل عناصر الكتلة العرض الكامل المتاح لها في السطر الذي تظهر فيه.

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

• عنصر <p> هو عنصر كتلة.
• عنصر <div> هو عنصر كتلة.

<p>Hello World</p>
<div>Hello World</div>

هذه قائمة بعناصر الكتلة في HTML:

• <address>: لعرض عنوان بريد إلكتروني أو عنوان بريدي.
• <article>: لتحديد مقالة أو قصة أو جزء مستقل من المحتوى.
• <aside>: لتحديد محتوى جانبي غير مرتبط مباشرة بمحتوى الصفحة الرئيسي.
• <blockquote>: لعرض اقتباس طويل.
• <canvas>: لرسم رسومات ديناميكية على الصفحة باستخدام JavaScript.
• <dd>: لعرض تعريف عنصر <dt> في قائمة تعريف.
• <div>: لإنشاء قسم عام بدون دلالة محددة.
• <dl>: لإنشاء قائمة تعريف.
• <dt>: لتحديد مصطلح في قائمة تعريف.
• <fieldset>: لتجميع عناصر نموذج ذات صلة بمجموعة.
• <figcaption>: لشرح صورة أو شكل داخل عنصر <figure>.
• <figure>: لتجميع صورة أو شكل مع شرح اختياري.
• <footer>: لتحديد تذييل الصفحة.
• <form>: لإنشاء نموذج إدخال بيانات للمستخدم.
• <h1> – <h6>: لعرض العناوين من المستوى الأول إلى السادس.
• <header>: لتحديد رأس الصفحة.
• <hr>: لإنشاء خط فاصل أفقي.
• <li>: لتحديد عنصر في قائمة غير مرتبة أو مرتبة.
• <main>: لتحديد المحتوى الرئيسي للمستند.
• <nav>: لتحديد عناصر التنقل (القائمة الرئيسية، الروابط، إلخ).
• <noscript>: لعرض محتوى بديل إذا لم يكن JavaScript مدعومًا.
• <ol>: لإنشاء قائمة مرتبة.
• <p>: لتحديد فقرة من النص.
• <pre>: لعرض نص بتنسيق مسبق.
• <section>: لتحديد قسم منطقي من المحتوى.
• <table>: لعرض جدول بيانات.
• <tfoot>: لتحديد تذييل الجدول.
• <ul>: لإنشاء قائمة غير مرتبة.
• <video>: لعرض مقطع فيديو.

العناصر الداخلية في HTML

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

مثال:

هذا عنصر <span> داخل فقرة.

<span>Hello World</span>

العناصر الداخلية في HTML

إليك قائمة بالعناصر الداخلية في HTML:

• <a>: لإنشاء رابط تشعبي.
• <abbr>: لعرض اختصار مع تفسير كامل عند تظليل المؤشر.
• <acronym>: لعرض اختصار مع تفسير كامل.
• <b>: لجعل النص غامقًا (استخدام <strong> بدلاً من ذلك).
• <bdo>: لعرض النص باتجاه محدد (من اليمين إلى اليسار أو العكس).
• <big>: لجعل النص أكبر قليلاً (استخدام CSS بدلاً من ذلك).
• <br>: لبدء سطر جديد داخل فقرة.
• <button>: لإنشاء زر قابل للضغط.
• <cite>: لعرض عنوان عمل مرجعي.
• <code>: لعرض نص كشفرة برمجية.
• <dfn>: لعرض مصطلح تقني.
• <em>: لجعل النص مائلًا.
• <i>: لجعل النص مائلًا إلى اليمين (استخدام <em> بدلاً من ذلك).
• <img>: لعرض صورة.
• <input>: لإضافة عناصر إدخال بيانات للمستخدم (حقول نصية، قوائم اختيار، إلخ).
• <kbd>: لعرض نص كأنه مكتوب على لوحة مفاتيح.
• <label>: لتسمية عنصر نموذج (حقل نصي، زر اختيار، إلخ).
• <map>: لتعيين روابط تشعبية على مناطق داخل صورة.
• <object>: لعرض محتوى وسائطي مضمن (فيديو، فلاش، إلخ).
• <output>: لعرض نتيجة معالجة بيانات.
• <q>: لعرض اقتباس قصير.
• <samp>: لعرض مثال على نص برمجي.
• <script>: لإضافة شفرة JavaScript.
• <select>: لإنشاء قائمة اختيار.
• <small>: لجعل النص أصغر قليلاً.
• <span>: لتجميع مجموعة من النصوص دون دلالة محددة.
• <strong>: لجعل النص غامقًا (استخدام هذا بدلاً من <b>).
• <sub>: لعرض نص أسفل السطر.
• <sup>: لعرض نص أعلى السطر.
• <textarea>: لإضافة حقل نصي متعدد الأسطر.
• <time>: لعرض تاريخ أو وقت.
• <tt>: لعرض نص بتنسيق يشبه آلة كاتبة.
• <var>: لعرض متغير في نص.

ملاحظة: لا يمكن أن يحتوي العنصر الداخلي على عنصر كتلة!

عنصر <div> في HTML

عنصر <div> هو حاوية متعددة الاستخدامات في صفحات HTML، وغالبًا ما يُستخدم لتجميع عناصر أخرى داخلها. يتميز بأنه لا يحتاج إلى صفات محددة (attributes) للعمل، رغم أن استخدام صفات مثل style و class و id شائع للغاية.

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

مثال:

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

عنصر <span> في HTML

عنصر <span> هو حاوية داخلية تُستخدم لتحديد قسم محدد من النص أو أي جزء داخل وثيقة HTML. يتميز بأنه لا يحتاج إلى صفات إجبارية للعمل، لكن استخدام صفات مثل style و class و id شائع أيضًا.

باستخدام CSS جنبًا إلى جنب مع <span>, يمكنك تحديد أجزاء محددة من النص وتطبيق تنسيقات خاصة عليها.

مثال:

<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>

ملخص الفصل:

عناصر الكتلة وعناصر داخلية:

• عناصر الكتلة: تبدأ دائمًا على سطر جديد وتشغل العرض الكامل المتاح لها في السطر الذي تظهر فيه. أمثلة عليها: <p> لفقرة، <div> لحاوية، <h1> لعنوان.
• عناصر داخلية: لا تبدأ على سطر جديد بل تظهر داخل نفس السطر مع العناصر المجاورة لها، وتأخذ فقط المساحة اللازمة للمحتوى. أمثلة عليها: <span> لتظليل نص، <strong> لجعل النص غامقًا، <em> لجعل النص مائلًا.

عناصر <div> و <span>:

• <div>: عنصر كتلة يُستخدم عادةً كحاوية لتجميع عناصر أخرى داخلها.
• <span>: عنصر داخلي يُستخدم لتحديد جزء محدد من النص أو أي جزء داخل وثيقة HTML وتطبيق تنسيقات خاصة عليه.

بالمختصر:

• عناصر الكتلة: لبناء أقسام منفصلة ومستقلة في الصفحة.
• عناصر داخلية: لتظليل أو تغيير تنسيق جزء محدد من النص.