آموزش تگ div در HTML

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

بیشتر بخوانید: افزودن تگ عکس به HTML : آموزش با روش آسان

div چیست و چه کاربردی دارد؟

ظرف div که نام خود را از کلمه “division” گرفته است، در درجه اول به عنوان یک محفظه برای سایر عناصر HTML عمل می کند. اگرچه امکان قرار دادن گروه ها و بخش ها وجود دارد، اما div ویژگی های معنایی خود را در HTML ندارد. بنابراین وظیفه اصلی آن ایجاد و محدود کردن مناطقی است که می توانند با CSS قالب بندی شوند. ظرف div هیچ تأثیری بر طرح یا محتوای وب سایت ندارد.

این نشان می دهد که چرا تگ div در HTML دیگر نقش زیادی ندارد. ظرف div اغلب در نسخه‌های قبلی استفاده می‌شد، اما استفاده از آن با معرفی HTML5 و HTML 5.1 به شدت محدود شد. پیشنهاد می‌شود قبل از استفاده از تگ div در HTML راه‌حل‌های مناسب معنایی جایگزین پیدا کنید. ظرف div فقط زمانی باید برای چیدمان استفاده شود که هیچ عنصر دیگری مانند مقاله، aside، header، main، nav و یا بخش عناصر قابل استفاده نباشد. ظرف div به عنوان یک عنصر در سطح بلوک در یک شکست یک خط قبل و بعد از آن درج می شود.

div چگونه در HTML استفاده می شود؟

تگ div در HTML برای قالب بندی عناصر HTML با CSS استفاده می شود که از نظر بصری به هم تعلق دارند، بلوک های مختلف HTML را دسته بندی می کند و آنها را به وضوح قرار می دهد و محتوای HTML، CSS و جاوا اسکریپت را متحرک می کند. مثال زیر نشان می دهد که چگونه یک ظرف div بدون ویژگی ساخته می شود:

<div>
<h2>example list</h2>
<ul>
<li>first item on the list</li>
<li>second item on the list</li>
<li>third item on the list</li>
<li>fourth item on the list</li>
</ul>
</div>

تقریباً هر محتوای جاری را می توان در اصل در ظرف div قرار داد. تگ div در HTML هیچ تأثیری بر نمایش محتوا ندارد، اما محتوا را جدا می کند.

بیشتر بخوانید: آموزش حلقه while پایتون : آموزش آسان و سریع

ظرف div از کدام ویژگی ها پشتیبانی می کند؟

تگ div در HTML فقط از ویژگی های جهانی پشتیبانی می کند. align یک استثنا است که از زمان معرفی HTML5 دیگر برای کانتینرهای div مجاز نیست. class و id پر استفاده ترین ویژگی های HTML برای div هستند. در زیر دو نمونه از کانتینرهای div با ویژگی ها آورده شده است:

<div class="example">
<h2>example of a headline</h2>.
<p>you can insert a sample text here, which is sectioned off by the div container.</p>
</div>

ویژگی id می تواند با یک ظرف div نیز استفاده شود:

<div id="example">
<ul>
<li><a href="index.html" title="To Home Page">Home Page</a></li>
<li><a href="contact.html" title="Write to us">Contact</a></li>
<li><a href="about.html" title="About Us">About</a></li>
</ul>
</div>

نتیجه گیری: تگ div در HTML اساساً مربوط به گذشته است

دلایل متعددی وجود دارد که چرا div دیگر نقش مهمی در HTML بازی نمی کند. این تنها به دلیل مشکلاتی نیست که با یک ظرف div همراه است، بلکه به دلیل این واقعیت است که برچسب‌های HTML معنایی داده‌ها را کارآمدتر می‌سازد، که نگهداری را آسان‌تر می‌کند. تصحیح یک سند همچنین می تواند با استفاده از اشیاء دیگر مانند سرصفحه، پاورقی، مقاله یا بخش سریعتر انجام شود. اگر در حال یادگیری HTML یا یادگیری CSS هستید، بهتر است div را بدانید. با این حال، ممکن است استفاده از عناصر معنایی مناسب تر مفیدتر باشد.