درس دهم: تگ‌های بلاک (Block) و اینلاین (Inline) و معرفی <div> و <span>

سلام دوباره به همه علاقه‌مندان به HTML! توی درس‌های قبلی با کلی تگ و عنصر HTML آشنا شدیم و یاد گرفتیم چطور محتوا رو داخل صفحه بذاریم. حالا وقتشه که با یک مفهوم پایه‌ای و خیلی مهم در مورد نحوه نمایش عناصر در مرورگر آشنا بشیم: تفاوت بین تگ‌های بلاک (Block) و تگ‌های اینلاین (Inline).

فهمیدن این تفاوت برای اینکه بتونید صفحاتتون رو به درستی طراحی کنید و بعداً با CSS به اون‌ها استایل بدید، حیاتیه.

تگ‌های بلاک (Block-level Elements)

تگ‌های بلاک عنصرهایی هستند که:

1. همیشه از یک خط جدید شروع می‌شوند.
2. تمام عرض موجود رو اشغال می‌کنند (به طور پیش‌فرض)، حتی اگر محتوای کمی داشته باشند.

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

مثال‌هایی از تگ‌های بلاک که قبلاً دیدیم:

• <p> (پاراگراف)
• <h1>, <h2>, … , <h6> (عنوان‌ها)
• <ul>, <ol>, <dl> (لیست‌ها)
• <table> (جدول)
• <form> (فرم)

ببینیم چطور عمل می‌کنند:

<p>این یک پاراگراف است.</p>
<p>این هم یک پاراگراف دیگر است و در خط جدیدی شروع می‌شود.</p>

<h1>این یک عنوان است.</h1>
<p>این پاراگراف بعد از عنوان در خط جدید می‌آید.</p>

خروجی (ظاهری):

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

این یک عنوان است.
این پاراگراف بعد از عنوان در خط جدید می‌آید.

همانطور که می‌بینید، هر تگ <p> و <h1> در یک خط جداگانه نمایش داده شدند.

تگ‌های اینلاین (Inline Elements)

تگ‌های اینلاین برعکس تگ‌های بلاک عمل می‌کنند:

1. از یک خط جدید شروع نمی‌شوند.
2. فقط به اندازه محتوای داخل خودشون فضا اشغال می‌کنند.

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

مثال‌هایی از تگ‌های اینلاین که قبلاً دیدیم:

• <a> (لینک)
• <img> (تصویر)
• <strong>, <em> (برای قوی‌تر یا مورب کردن متن)
• <br> (شکست خط – البته این تگ خالی است)
• <input>, <label>, <button> (در فرم‌ها)

ببینیم چطور عمل می‌کنند:

<p>این یک <a href="#">لینک</a> در کنار <img src="smiley.gif" alt="Smiley" width="20" height="20"> یک تصویر کوچک است.</p>

<p><strong>این متن قوی است.</strong> <em>این متن مورب است.</em></p>

خروجی (ظاهری):

این یک لینک در کنار یک تصویر کوچک است.

این متن قوی است. این متن مورب است.

همانطور که می‌بینید، لینک و تصویر و متن‌های قوی/مورب همه در یک خط و پشت سر هم قرار گرفتند.

تگ‌های <div> و <span>: ظرف‌های عمومی!

حالا که تفاوت بلاک و اینلاین رو فهمیدیم، نوبتی هم باشه نوبت معرفی دو تا از پرکاربردترین تگ‌ها در HTML میرسه: <div> و <span>.

این دو تگ به خودی خود معنای خاصی به محتوا نمیدن (بهشون میگن “Semanticless” یا بدون مفهوم معنایی)، اما کاربرد اصلی اون‌ها برای گروه‌بندی (Grouping) و استایل‌دهی (Styling) عناصر دیگه هست.

• <DIV>: این تگ یک عنصر بلاک است. معمولاً از اون برای ساختاردهی به قسمت‌های مختلف صفحه (مثل سربرگ، نوار کناری، قسمت اصلی محتوا، پابرگ و…) یا گروه‌بندی چند عنصر بلاک یا اینلاین در کنار هم استفاده میشه تا بتونیم با CSS به اون گروه خاص استایل بدیم یا با جاوااسکریپت روی اون کار کنیم. <div style="background-color: lightgray; padding: 10px;"> <h2>این یک بخش است</h2> <p>این پاراگراف داخل بخش خاکستری قرار دارد.</p> </div> <div> <p>این یک بخش دیگر است.</p> </div> در مثال بالا، دو بخش مجزا با تگ <div> ایجاد شده که اولی یک رنگ پس‌زمینه و فاصله داخلی (padding) گرفته است.
• <SPAN>: این تگ یک عنصر اینلاین است. معمولاً از اون برای اعمال استایل یا انتخاب بخش کوچکی از متن (مثل یک کلمه یا عبارت) در داخل یک عنصر اینلاین یا بلاک استفاده میشه. <p>این یک متن معمولی است که <span style="color: blue; font-weight: bold;">بخش مهمی</span> از آن آبی و ضخیم شده است.</p> در مثال بالا، فقط کلمه “بخش مهمی” داخل تگ <span> قرار گرفته و استایل رنگ آبی و ضخیم فقط به اون اعمال شده.

چرا از <div> و <span> استفاده می‌کنیم؟

چون به ما اجازه میدن بخش‌های دلخواه از صفحه یا متن رو انتخاب کنیم و به اون‌ها کلاس (Class) یا شناسه (ID) بدیم و بعداً با استفاده از CSS به اون کلاس یا ID استایل بدیم. این کار باعث میشه کد HTML ما تمیزتر و منظم‌تر باشه و استایل‌ها از محتوا جدا بشن.

مثال عملی‌تر با کلاس:

<style>
  .section {
    border: 1px solid black;
    margin: 10px;
    padding: 15px;
  }

  .highlight-text {
    color: orange;
    text-decoration: underline;
  }
</style>

<div class="section">
  <h3>این بخش اول است</h3>
  <p>این متن داخل بخش اول قرار دارد.</p>
</div>

<div class="section">
  <h3>این بخش دوم است</h3>
  <p>در این بخش، <span class="highlight-text">بعضی کلمات</span> مهم را هایلایت کرده‌ایم.</p>
</div>

در این مثال، با استفاده از کلاس .section به هر دو <div> یک استایل کلی (مرز، فاصله خارجی و داخلی) داده‌ایم و با کلاس .highlight-text فقط به بخشی از متن داخل <span> استایل نارنجی و زیرخط داده‌ایم.

این هم از درس دهم ما که مفهوم بلاک و اینلاین و تگ‌های <div> و <span> رو توضیح داد. این مفاهیم برای طراحی صفحات وب و کار با CSS خیلی خیلی مهم هستند.