شرح عناصر block

في HTML، يمكن تقسيم العناصر إلى نوعين رئيسيين: العناصر المنبثقة (block elements) والعناصر الداخلة (inline elements). يتميز العناصر المنبثقة بأنها تشغل مساحة كاملة في العرض، وتبدأ عادة من سطر جديد. في هذا الدرس، سنتحدث عن العناصر المنبثقة وسنقدم بعض الأمثلة.
1) الفقرة p:
عنصر الفقرة يستخدم لعرض فقرة نصية مستقلة في الصفحة. يبدأ هذا العنصر عادة من سطر جديد وينتهي بترك فراغ فارغ قبل بدء العنصر التالي. يمكن استخدام التنسيقات CSS لتحديد مظهر هذا العنصر بشكل دقيق، على سبيل المثال:

HTML

<p>This is a paragraph</p>

2- العنوان heading:
تستخدم عناصر العنوان heading لعرض عنوان رئيسي للصفحة أو قسم من الصفحة. يوجد في HTML ستة عناصر رئيسية للعناوين
(h1, h2, h3, h4, h5, h6)، حيث يتم استخدام h1 للعناوين الرئيسية وتتناقص الحجم تباعًا للعناوين الفرعية. يمكن استخدام هذه العناصر بالترتيب المناسب لتحديد التسلسل الهرمي للعناوين، على النحو التالي:

HTML

<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<h3>This is a sub-subheading</h3>
...

3) القائمة list:
كما يمكن استخدام العنصر الداخلي li (list item) داخل العنصر ul أو ol لتحديد عنصر محدد داخل القائمة. يمكن أيضا استخدام العنصر dl (definition list) لعرض قائمة بالتعريفات والأوصاف، واستخدام العناصر dt (definition term) و dd (definition description) داخل العنصر dl لتحديد التعريفات والأوصاف، على النحو التالي:

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

<dl>
    <dt>Term 1</dt>
    <dd>Description 1</dd>
    <dt>Term 2</dt>
    <dd>Description 2</dd>
</dl>

4- العنصر div:
تستخدم عناصر الفصل (division) لتقسيم صفحة الويب إلى أجزاء مختلفة، لأغراض التنسيق أو العرض. يمكن استخدام العنصر div لإنشاء علامة عمومية للتقسيم، دون تحديد أي نوع محدد من العناصر المنبثقة، على النحو التالي:

HTML

<div>
    <p>This is a paragraph inside a div</p>
</div>

هذه بعض الأمثلة الشائعة للعناصر ال block في HTML. يمكن استخدام هذه العناصر بالترتيب المناسب وباستخدام تنسيقات CSS الملائمة لتحسين تصميم وتنسيق الصفحات الإلكترونية.

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.