از لحاظ نمایشی، المان ها در 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>
بیشتر بخوانید: آشنایی با جزئیات المان های اینلاین در HTML
المان های سطح بلاک می‌توانند هر نوع المانی چه از نوع اینلاین و چه از نوع بلاک را دربربگیرند. اما المان های اینلاین به صورت متداول نمی‌توانند شامل المان های سطح بلاک شوند.
بیشتر بخوانید: المان های تو در تو (یا Nested Elements) در HTML
تغییر نحوه نمایش المان ها از سطح بلاک به اینلاین
از آنجایی که نحوه نمایش المان‌ها یک موضوع ظاهری است می‌توانید این حالت نمایشی را با کمک CSS تغییر دهید. شما می‌توانید با استفاده از ویژگی display در CSS نحوه نمایش المان‌ها را از سطح بلاک به اینلاین یا برعکس تغییر دهید. به عنوان مثال برای یک المان سطح بلاک می‌توانید با تخصیص مقدار inline به ویژگی display کاری کنید که مرورگر، المان موردنظر را به صورت اینلاین یا درخط نمایش دهد.
p {
display: inline;
}لیست المان های سطح block
المان های زیر در اچ‌تی‌ام‌ال، المان های سطح بلاک هستند:
- <address>
- <article>
- <aside>
- <blockquote>
- <details>
- <dialog>
- <dd>
- <div>
- <dl>
- <dt>
- <fieldset>
- <figcaption>
- <figure>
- <footer>
- <form>
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- <header>
- <hgroup>
- <hr>
- <li>
- <main>
- <nav>
- <ol>
- <p>
- <pre>
- <section>
- <table>
- <ul>
بازگشت به فهرست مجموعه آموزشی HTML
