تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

المان های سطح بلاک یا Block-level elements در HTML
اچ‌تی‌ام‌ال 

المان های سطح بلاک در HTML

به روز شده در امیرحسین شهسواری 0 دیدگاه ،،،،،،،،،،،،،،،

از لحاظ نمایشی، المان ها در HTML به دو دسته سطح بلاک (block-level) و سطح اینلاین (inline-level یا درخط) تقسیم می‌شوند. به عبارت بهتر هر المانی در HTML بسته به نوع خود به صورت پیشفرض یکی از انواع نمایشی بلاک یا اینلاین را دارا می‌باشد. در این قسمت از مجموعه آموزش HTML تک دیک با المان های سطح بلاک و تفاوت آن‌ها با المان های اینلاین آشنا می‌شوید.

منظور از المان سطح بلاک (یا block-level element) در HTML چیست؟

المان های سطح بلاک (block-level elements) گونه‌ای از المان ها در اچ‌تی‌ام‌ال هستند که در حالت پیشفرض تمام فضای افقی در دسترس را اشغال می‌کنند. فضای اختصاصی المان های سطح بلاک روی یک خط جدید شروع می‌شود و همه عرض یا پهنای (Width) موجود را دربرمی‌گیرند. در واقع این المان ها توسط مرورگرهای وب به صورت یک بلوک (یا جعبه) نمایش داده می‌شوند.

هدینگ ها (المان های <h1> تا <h6>)، پاراگراف ها (المان های <p>) و المان های <div> از جمله المان های سطح بلاک محسوب می‌شوند.

مثال زیر مفهوم المان های سطح بلاک را با کمک یک هدینگ و پاراگراف نمایش می‌دهد. برای نمایش فضای اشغال شده توسط این دو المان، رنگ زمینه آن‌ها با کمک CSS تغییر داده شده است.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello, World!</title>
    <style>
      h1, p {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h1>Simple Page</h1>
    <p>This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph.</p>
  </body>
</html>

نمایی از دو المان سطح بلاک (یک هدینگ و یک پاراگراف) که فضای المان برای درک بهتر مفهوم المان های سطح بلاک با رنگ زمینه زرد مشخص شده است. در این تصویر هر دو المان تمام فضای در دسترسی را اشغال کرده‌اند.

همانطور که در تصویر فوق مشاهده می‌کنید هر دو المان در خط‌های جدید شروع می‌شوند. به علاوه فارغ از میزان فضای افقی که به آن نیاز دارند تمام فضای افقی در دسترس را اشغال می‌کنند. برای مثال با وجود فضای افقی اندکی که هدینگ کوتاه فوق به آن نیاز دارد تمام پهنای موجود توسط این المان تا انتها اشغال شده است.

تفاوت بین المان های سطح بلاک و اینلاین

همانطور که گفتیم المان های سطح بلاک در قالب یک بلوک روی خطی جدید آغاز می‌شوند و تمام فضای افقی موجود را اشغال می‌کنند. این درحالیست که المان های اینلاین تنها به اندازه ضرورت، فضای افقی را اشغال می‌کنند و می‌توانند هرجایی (مانند بخشی از یک خط) ظاهر شوند. پیوندها (یا المان های <a>) و المان های <span> از جمله المان‌های اینلاین محسوب می‌شوند. فرض کنید اولین واژه simple در پاراگراف مثال قبل در قالب یک المان <span> محصور شده باشد. این المان به عنوان یک المان اینلاین با رنگ زمینه سبز در تصویر زیر قابل مشاهده است.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello, World!</title>
    <style>
      h1, p {
        background-color: yellow;
      }
      span {
        background-color: #2fdf2f;
      }
    </style>
  </head>
  <body>
    <h1>Simple Page</h1>
    <p>This is a <span>simple</span> paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph.</p>
  </body>
</html>

مقایسه المان های سطح بلاک با المان های اینلاین. در این مثال دو المان سطح بلاک شامل یک هدینگ و یک پاراگراف با یک المان اینلاین span قابل مشاهده هستند.

بیشتر بخوانید: آشنایی با جزئیات المان های اینلاین در HTML

المان های سطح بلاک می‌توانند هر نوع المانی چه از نوع اینلاین و چه از نوع بلاک را دربربگیرند. اما المان های اینلاین به صورت متداول نمی‌توانند شامل المان های سطح بلاک شوند.

بیشتر بخوانید: المان های تو در تو (یا Nested Elements) در HTML

تغییر نحوه نمایش المان ها از سطح بلاک به اینلاین

از آنجایی که نحوه نمایش المان‌ها یک موضوع ظاهری است می‌توانید این حالت نمایشی را با کمک CSS تغییر دهید. شما می‌توانید با استفاده از ویژگی display در CSS نحوه نمایش المان‌ها را از سطح بلاک به اینلاین یا برعکس تغییر دهید. به عنوان مثال برای یک المان سطح بلاک می‌توانید با تخصیص مقدار inline به ویژگی display کاری کنید که مرورگر، المان موردنظر را به صورت اینلاین یا درخط نمایش دهد.

p {
  display: inline;
}

لیست المان های سطح block

المان های زیر در اچ‌تی‌ام‌ال، المان های سطح بلاک هستند:

بازگشت به فهرست مجموعه آموزشی HTML

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *