تگ‌های بلاک و اینلاین (div و span)
تگ‌های بلاک و اینلاین: راز رفتار عناصر در صفحه! 📦↔️
سلام به روی ماهتون! توی دنیای HTML، هر تگی یه رفتاری داره. بعضی‌ها دوست دارن یه خط جدید شروع کنن و کل عرض صفحه رو بگیرن، بعضی‌ها هم خیلی مؤدب هستن و فقط جایی که لازم هستن، حضور دارن. امروز می‌خوایم در مورد این رفتارها، یعنی تگ‌های بلاک (Block-level) و اینلاین (Inline-level) صحبت کنیم.
اینکه یه تگ بلاک باشه یا اینلاین، روی نحوه نمایشش، فضایی که اشغال می‌کنه و اینکه چطور با تگ‌های دیگه تعامل داره، تأثیر مستقیم داره.
تگ‌های بلاک (Block-level Elements): پادشاهان خط جدید! 👑
تگ‌های بلاک همیشه سعی می‌کنن یه “بلوک” مستقل از محتوا رو تشکیل بدن. ویژگی‌های اصلی‌شون اینه:
- شروع در خط جدید: همیشه اول یه خط جدید شروع می‌شن.
- اشغال کل عرض: به طور پیش‌فرض، تمام فضای موجود در عرض والد خودشون رو اشغال می‌کنن (حتی اگه محتواشون کم باشه).
- قابلیت تنظیم عرض و ارتفاع: می‌تونید براشون width و height مشخص کنید.
- پذیرش margin و padding: می‌تونن مارجین و پدینگ از بالا، پایین، چپ و راست داشته باشن.
مثال‌هایی از تگ‌های بلاک: <h1> تا <h6>, <p>, <div>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section> و …
تگ <div>: جعبه همه‌کاره! 📦
تگ <div> (مخفف Division) یکی از پرکاربردترین تگ‌های بلاک هست. خودش هیچ معنای خاصی نداره، اما عالیه برای اینکه بتونید یه گروه از عناصر رو با هم دسته‌بندی کنید و بعداً با CSS بهشون استایل بدید یا با جاوا اسکریپت کنترلشون کنید. در واقع، یه جعبه خالی و همه‌کاره است!
<div style="background-color: #ffe4e1; padding: 15px; border: 1px dashed #db7093;">
<h3>این یک عنوان درون div است.</h3>
<p>این پاراگراف هم درون همان div قرار دارد.</p>
</div>
نکته: چون <div> یه تگ بلاک هست، اگه چندین <div> پشت سر هم بنویسید، هر کدوم در یه خط جدید نمایش داده می‌شه.
تگ‌های اینلاین (Inline-level Elements): ساکنین متن! ✍️
تگ‌های اینلاین مثل کلمات یا عباراتی هستن که درون یه متن قرار می‌گیرن. رفتار اون‌ها اینه:
- شروع در همان خط: در همون خطی که هستن ادامه پیدا می‌کنن و خط جدید ایجاد نمی‌کنن (مگر اینکه متن والدشون تموم بشه).
- اشغال فقط فضای لازم: فقط به اندازه محتوای خودشون فضا اشغال می‌کنن.
- محدودیت در تنظیم عرض و ارتفاع: تنظیم مستقیم width و height برای اون‌ها معمولاً تأثیر نداره.
- تأثیر margin و padding: مارجین و پدینگ در جهت افقی (چپ و راست) اثر داره، اما در جهت عمودی (بالا و پایین) ممکنه رفتار غیرمنتظره‌ای داشته باشه یا روی خطوط دیگه تأثیر بذاره.
مثال‌هایی از تگ‌های اینلاین: <a>, <span>, <strong>, <em>, <img>, <input>, <label> و …
تگ <span>: جزئی‌نگرِ متن! 🎨
تگ <span> هم مثل <div>، خودش معنای خاصی نداره، اما چون یه تگ اینلاین هست، برای استایل دادن به قسمت‌های کوچکی از متن یا یه کلمه خاص عالیه. با <span> می‌تونید یه بخش کوچیک از متن رو جدا کنید و بهش رنگ، فونت، یا استایل دیگه‌ای بدید بدون اینکه ساختار کلی پاراگراف رو به هم بزنید.
<p>
این یک متن معمولی است که می‌خواهیم
<span style="color: #ff69b4; font-weight: bold;">کلمه خاصی</span>
را در آن برجسته کنیم.
</p>
نکته مهم: ترکیب بلاک و اینلاین! 💖
شما می‌تونید تگ‌های بلاک رو درون تگ‌های بلاک دیگه قرار بدید (مثل <div> درون <body>). همچنین می‌تونید تگ‌های اینلاین رو درون تگ‌های بلاک قرار بدید (مثل <span> درون <p>). اما معمولاً نباید تگ‌های بلاک رو مستقیماً درون تگ‌های اینلاین قرار داد (مثل <p> درون <span>).
درک تفاوت بین بلاک و اینلاین، کلید اصلی کنترل چیدمان و ظاهر عناصر در صفحات وب با استفاده از CSS هست. <div> و <span> ابزارهای اصلی شما برای این کار هستن!
با شناخت این دو نوع رفتار، حالا می‌دونید چرا بعضی تگ‌ها همیشه یه خط جدید می‌سازن و بعضی‌ها کنار متن شما قرار می‌گیرن. این درک اولیه، قدم بزرگی برای حرفه‌ای شدن در طراحی وب با HTML و CSS هست! 😊