تگ div در html

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

تگ div چیست؟

تگ div اشاره به کلمه division دارد و ترجمه آن به زبان فارسی تقسیم می شود. این تگ، یکی از کاربردی ترین تگ های html است با استفاده از این تگ قادر به تقسیم فضای قالب سایت به صورت دلخواه هستید. به عنوان مثال می خواهید یک قالب سه ستونه طراحی کنید برای تقسیم فضا به سه ستون، از این تگ استفاده می کنیم.

آموزش تگ div

برای نتیجه بهتر از تگ div در طراحی سایت باید از css استفاده کرد.

تگ div در واقع یک نوع نگهدارنده است و شما می توانید تگ های دیگری را به عنوان عناصر فرزند درون آن قرار دهید.

کد:

<div>
Example
</div>

همانطور که در کد بالا مشاهده می کنید در ظاهر این تگ فقط متنی را چاپ می کند و برای قدرت و مانور بیشتر باید از css استفاده کرد.

صفت id

فرض کنید هر تگ div یک شماره یا نام منحصر به فرد خود را دارد که قابل تکرار نیست مثل کد ملی ما!

این دقیقا کاربرد صفت id است یعنی فقط یک تگ div با این id وجود دارد.

کد:

<div id="main">
Example
</div>

صفت class

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

کد:

<div class="main">
Example
</div>

<div class="main">
Example
</div>

همان طور که گفته شد کاربرد این تگ به استفاده از css بستگی دارد. به عنوان مثال می خواهیم عرض و ارتفاع و رنگ یک div را با استفاده از css تعیین کنیم.

کد HTML:

<div id="main">
Example
</div>

کد CSS:

#main {
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

اجرا

نکته: در css برای دستیابی به id از # و برای دستیابی به کلاس از . (نقطه) استفاده می کنیم. به عنوان مثال id با نام main به صورت #main نوشته می شود.

تنظیمات پیش فرض CSS

تنظیمات پیش فرض CSS تگ div در اکثر مرورگرها به صورت زیر است:

div {
  display: block;
}

سازگاری با مرورگرها

تگ div با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS