عناصر بلوکی و درون خطی (Block and Inline Elements) در HTML
هر عنصر در HTML یک مقدار پیش فرض برای ویژگی نمایش (display) دارد. رایج ترین این مقادیر دو نوع «بلوک (Block)» و «درون خطی (Inline)» هستند. درک تفاوت این دو نوع عنصر برای طراحی صفحات وب بسیار مهم است.
عناصر بلوکی (Block-level Elements)
یک عنصر بلوکی همیشه از خط جدید شروع می شود و به طور پیش فرض کل عرض صفحه را اشغال می کند. مرورگرها به طور خودکار قبل و بعد از این عناصر فاصله (margin) اضافه می کنند.
نمونه های رایج از عناصر بلوکی: <p> برای پاراگراف و <div> برای بخش بندی در سند HTML.
<p>Hello World</p>
<div>Hello World</div>عناصر درون خطی (Inline Elements)
یک عنصر درون خطی در همان خط باقی می ماند و فقط به اندازه محتوای خود فضا اشغال می کند. برای مثال، تگ <span> اغلب برای استایل دهی بخشی از متن استفاده می شود.
<span>Hello World</span>هشدار: عناصر درون خطی نمی توانند حاوی عناصر بلوکی باشند.
تگ <div>
تگ <div> یک عنصر بلوکی است که به طور گسترده به عنوان کانتینر برای گروه بندی سایر عناصر HTML استفاده می شود. این تگ هیچ ویژگی اجباری ندارد، اما ویژگی های class، id و style معمولاً استفاده می شوند.
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>تگ <span>
تگ <span> یک عنصر درون خطی است که برای مشخص کردن بخشی از متن یا سند استفاده می شود. همانند <div>، این تگ هم اغلب همراه با CSS برای استایل دهی بخش های خاص متن استفاده می شود.
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes.</p>خلاصه
- عنصر بلوکی از خط جدید شروع می شود و کل عرض موجود را می گیرد.
- عنصر درون خطی در همان خط باقی می ماند و فقط به اندازه محتوا فضا می گیرد.
<div>یک عنصر بلوکی برای بخش بندی محتوا است.<span>یک عنصر درون خطی برای استایل دهی بخش های متن است.
برای ادامه مطالعه به بخش لیست ها - اشکال دیگر در HTML و تگ div در HTML مراجعه کنید.