HTML Inline & Block Elements | In Arabic

سوف نتعلم فى هذا الفصل “HTML Inline & Block Elements” كل المعلومات والتفاصيل حول العناصر المضمنة والكتلة فى HTML، وكيفية إستخدامها بطريقة صحيحة وما الفرق بينهم؟

HTML Inline & Block Elements

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

• Inline Elements.
• Block Elements.

<!-- Inline Element -->
<span style="background-color: yellow;">This is Inline Element.</span>
<!-- Block Element -->
<p style="background-color: yellow;">This is Block Element.</p>

Inline Elements

العناصر المُضمنة Inline Elements هي العناصر التي تشغل المساحة المحددة بالعلامات التي تحدد العنصر. لا يبدأ العنصر المضمن في سطر جديد بل يأخذ العرض بالقدر اللازم فقط.

مثال للتوضيح:

<p>Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, 
<span style="background-color: yellow;">This is Inline Element.</span> convallis at tellus.</p>

أمثلة على العناصر المضمنة Inline Elements

عنصر الـ <span>

يتم استخدام عنصر الـ <span> إما:

•  كحاوية لبعض النصوص.
• لتصميم أجزاء من النص.

السبب الأكثر شيوعًا لإستخدام عناصر الـ <span> هو للسيطرة على ظهور محتوى هذه العناصر باستخدام لغة CSS. لا يحتوي عنصر الـ <span> على سمات attributes مطلوبة، ولكن سمات مثل style و class و id هم الأكثر إستخدامًا مع هذا العنصر.

مثال للتوضيح:

<p>The Best Website To Learn Programming In Arab World is 
<span style="background-color: yellow;">Albashmoparmeg</span> website.</p>

Block Elements

عناصر الكتلة Block Elements هى عناصر دائمًا تبدأ على سطر جديد، وتمتد من اليسار واليمين قدر الإمكان. كما أنها تنشأ هياكل أكبر من العناصر الـ Inline.

مثال للتوضيح:

<div style="background-color: yellow;">The Best Website To Learn Programming In Arab World is Albashmoparmeg</div>

أمثلة على العناصر Block

عنصر الـ <div>

يسمح لك عنصر الـ <div> بتجميع مجموعة من العناصر (block – inline) معًا في مربع أو قسم واحد. على سبيل المثال يمكنك إنشاء عنصر الـ <div> لإحتواء جميع عناصر الـ header من موقعك (الشعار والبحث والروابط). او يمكنك إنشاء عنصر الـ <div> لإحتواء الكلام الذى كَتبة الزوار عن موقعك والكثير من الأشياء الأخرى.

لا يحتوي عنصر الـ <div> على سمات attributes مطلوبة، ولكن سمات مثل style و class و id هم الأكثر إستخدامًا مع هذا العنصر.

مثال للتوضيح:

<div class="footer">
  <p>Copyright &copy; 2019 - 2021 <span style="font-weight: bold;">Albashmoparmeg</span>. All rights reserved</p>
</div>