آموزش HTML – فصل سیزدهم: بلاک ها در HTML

اکثر تگ های HTML نوعی بلاک محسوب می شوند. در زبان اچ تی ام ال دو نوع المان وجود دارد: block-level یا inline که در این بخش از آموزش HTML نتران به توضیح آن ها و معرفی المان های زیر مجموعه به هر یک از آن ها خواهیم پرداخت. بلاک ها به صورت گسترده ای در صفحات وب مورد استفاده قرار می گیرند و چهارچوب وب سایت های امروزی اکثرا با بلاک ها ساخته شده است.

آموزش HTML – فصل سیزدهم: بلاک ها در HTML

المان های block و inline در اچ تی ام ال

هر المان اچ تی ام ال یک اندازه در نمایش به صورت پیشفرض دارد، و این وابسته به نوع آن المان است.

مقدار نمایش پیشفرض اکثر المان ها یا block یا inline است.

به طور خلاصه المان block کل عرض را از آن خود می کند اما المان inline فقط به اندازه نیاز خود عرض نیاز دارد.

المان block-level در HTML

یک المان block-level دریک خط جدید شروع شده و عرض کامل موجود را به خود اختصاص میدهد (به اندازه ای که میتواند کشیده میشود به راست و چپ).

المان <div> یک المان block-level است.

مثال:


لیست المان های block-level در اچ تی ام ال


المان های inline در HTML

یک المان inline در یک خط جدید شروع نمیشود و مقداری که لازم است عرض آن گسترش پیدا میکند.

این یک المان اینلاین <span> است درون یک پاراگراف.

مثال:


لیست المان های inline در اچ تی ام ال


المان <div> در زبان HTML

المان <div> معمولا به عنوان یک نگهدارنده استفاده میشود که بقیه ی المان های اچ تی ام ال در آن جای می گیرند.

المان <div> به خاصیت احتیاج ندارد ولی استایل و کلاس و id برای آن متعارف است.

وقتی همراه با سی اس اس استفاده میشود المان <div> برای سبک گذاری بلوک هایی از محتوا استفاده میشود.

مثال:


المان <span> در زبان HTML

المان <span> معمولا استفاده میشود تا حاوی مقداری متن باشد.

المان <span> به خاصیت احتیاج ندارد ولی استایل و کلاس و id برای آن متعارف است.

اگر از سی اس اس استفاده کنید، <span> میتواند استفاده شود تا قسمت هایی از متن را کمی استایل دهید.

مثال:


در ادامه آموزش گام به گام زبان HTML، مطلب آموزش HTML – فصل چهاردهم: کلاس ها (Classes) را مطالعه کنید.

ویدیوها و مطالب مشابه