مقدمه

هنگام طراحی صفحات وب با HTML، آشنایی با نحوه قرارگیری عناصر در صفحه اهمیت زیادی دارد. برخی از عناصر فقط به اندازه محتوای خود فضا اشغال می‌کنند، در حالی که برخی دیگر تمام عرض صفحه را در اختیار می‌گیرند.

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

عناصر Inline چیست؟

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

از جمله عناصر Inline می‌توان به موارد زیر اشاره کرد:

• <strong>
• <em>
• <span>
• <a>

مثال:

<strong>متن پررنگ</strong>
<em>متن مورب</em>

خروجی:

متن پررنگ متن مورب

همان‌طور که مشاهده می‌کنید، هر دو عنصر در یک خط نمایش داده می‌شوند.

ایجاد خط جدید با تگ <br>

اگر بخواهید عناصر Inline در خطوط جداگانه نمایش داده شوند، می‌توانید از تگ <br> استفاده کنید.

مثال:

<strong>متن پررنگ</strong>
<br>
<em>متن مورب</em>

خروجی:

متن پررنگ

متن مورب

تگ <br> یک شکست خط ایجاد می‌کند و نیازی به تگ بسته ندارد.

ویژگی عناصر Inline

عناصر Inline دارای ویژگی‌های زیر هستند:

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

عناصر Block چیست؟

عناصر Block (بلوک) همیشه یک خط کامل از صفحه را اشغال می‌کنند.

به همین دلیل:

• همیشه از یک خط جدید شروع می‌شوند.
• عناصر بعدی را به خط بعد منتقل می‌کنند.

نمونه‌هایی از عناصر Block:

• <h1> تا <h6>
• <p>
• <div>
• <section>
• <article>

مثال عناصر Block

<h1>عنوان اول</h1>
<h2>عنوان دوم</h2>
<h3>عنوان سوم</h3>
<h4>عنوان چهارم</h4>
<h5>عنوان پنجم</h5>
<h6>عنوان ششم</h6>

خروجی:

عنوان اول

عنوان دوم

عنوان سوم

عنوان چهارم

عنوان پنجم

عنوان ششم

هر عنوان در یک خط جداگانه نمایش داده می‌شود.

تفاوت Inline و Block

مثال ترکیبی

کد زیر را اجرا کنید:

<strong>متن پررنگ</strong>
<h1>عنوان صفحه</h1>
<em>متن مورب</em>

با اینکه عناصر پشت سر هم نوشته شده‌اند، خروجی به شکل زیر خواهد بود:

متن پررنگ

عنوان صفحه

متن مورب

دلیل آن این است که تگ <h1> یک عنصر Block است و به صورت خودکار در خط جدید نمایش داده می‌شود.

چه زمانی از Inline استفاده کنیم؟

از عناصر Inline زمانی استفاده کنید که قصد دارید:

• بخشی از متن را پررنگ کنید.
• متن را مورب کنید.
• لینک ایجاد کنید.
• بخشی از متن را استایل‌دهی کنید.

چه زمانی از Block استفاده کنیم؟

از عناصر Block زمانی استفاده کنید که می‌خواهید:

• عنوان ایجاد کنید.
• پاراگراف بنویسید.
• بخش‌های مختلف صفحه را از هم جدا کنید.
• ساختار اصلی صفحه را طراحی کنید.

جمع‌بندی

در این آموزش با دو نوع اصلی عناصر HTML آشنا شدید:

• عناصر Inline که فقط به اندازه محتوای خود فضا اشغال می‌کنند و در کنار یکدیگر قرار می‌گیرند.
• عناصر Block که تمام عرض صفحه را اشغال کرده و همیشه از یک خط جدید شروع می‌شوند.

درک تفاوت این دو نوع عنصر یکی از مهم‌ترین مباحث HTML است و در طراحی صفحات وب و یادگیری CSS نیز نقش بسیار مهمی دارد.

از همراهی شما با پارمین کلود سپاسگزاریم.