آموزش تگ div در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ div در HTML با من همراه باشید.

آموزش تگ div در HTML

Free-Learn

تگ Div در HTML

تگ div یا دایو یا دیو که از کلمه ( Division ) گرفته شده ، یکی از تگ های پرکاربرد در طراحی صفحات وب می باشد که با استفاده از آن میتوان یک یا چندین بخش را در یک صفحه ی وب ایجاد کرد. (بطور کلی برای لایه بندی یا بخش بندی میتوان از این تگ استفاده نمود)

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

حال امروزه با وجود تگ Div دیگه لازم نیست از جدول ها برای بخش بندی یک وبسایت استفاده کرد، لذا ما به راحتی با استفاده از این تگ میتوانیم بخش های مختلف (هدر، مطالب اصلی ، ستون کناری ، فوتر و..) یک وبسایت را ایجاد نماییم.

استفاده از جدول برای بخش بندی یا طرح بندی یک وبسایت اصلا توصیه نمی شود و تاثیر منفی در سئوی وبسایت دارد، لذا حتما از تگ های مرتبط با بخش بندی (مثله div,header,section,footer و..) استفاده نمایید.

Free-Learn

مثال از تگ div در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

مثال شماره ۲ : استفاده از CSS در درون تگ DIV

امتحان کنید

مثال شماره ۳ : طرح بندی خیلی ساده یک قالب ( دارای هدر – باکس محتوای اصلی و فوتر )

امتحان کنید

مثال شماره ۴ : طرح بندی کمی پیشرفته تر یک قالب HTML با استفاده از تگ DIV – این مثال صرفا جهت آشنایی شما با تگ DIV می باشد، در مثال زیر میتوانید نحوه استفاده از تگ DIV جهت قالب بندی یا طرح بندی یک قالب را مشاهده نمایید.

برای مشاهده دموی این قالب اینجا کلیک کنید و برای دانلود آن اینجا کلیک کنید

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ div در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی بله بله بله بله بله

Free-Learn

جدول صفات تگ div در HTML

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

(علامتیعنی در HTML5 پشتیبانی نمی شود.)

نام صفت مقدار توضیح
align left
right
center
justify
تراز یا موقعیت قرار گیری محتوای درون تگ div را مشخص میکند. ()

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ div از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

تگ DIV ممکن است در حالت عادی/پیش فرض استایل خاصی نداشته باشد ولی ما به راحتی با استفاده از CSS میتوانیم آن را سفارشی سازی نماییم.

مرورگرها بصورت پیش فرض یک سطر خالی (خط فاصله به اندازه یک سطر) قبل و بعد (از بالا و پایین) به این تگ اضافه میکنند ولی خب باز ما میتوانیم آن را از طریق CSS حذف نماییم.

ارسالی کاربر محترم سایت، آقای صمد صفرپور :

تفاوت تگ div و تگ span : تگ div همونطور که گفتیم برای طرح بندی یا قالب بندی یک صفحه وب استفاده میشود و همچنین این تگ یک تگ Block Level یا بلاکی می باشد، ولی تگ span معمولا برای طرح بندی متون استفاده میشود و این تگ یک تگ Inline Level یا اینلاینی یا خطی می باشد.

یعنی اگر از چندین تگ span در کنار همدیگر استفاده کنیم همه آنها در یک خط ( سطر ) در کنار همدیگر قرار میگیرند، ولی اگر از چندین تگ Div استفاده کنیم هر یک از Div ها در یک سطر قرار میگیرند.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ div را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.


Free-Learn

دریافت PDF یا پرینت این مطلب