برچسب HTML <div>

  • صفحه قبلی <dir>
  • صفحه بعدی <dl>

تعریف و استفاده

<div> برچسب‌ها تعریف و بخش‌بندی‌های مستندات HTML (بخش‌ها یا بخش‌های کوچک، تقسیم یا بخش، division/section) را تعریف می‌کنند.

<div> برچسب‌ها می‌توانند مستندات را به بخش‌های مستقل و متفاوت تقسیم کنند. آن‌ها می‌توانند به عنوان ابزار سازماندهی دقیق استفاده شوند و با هیچ فرمتی به آن‌ها مرتبط نیستند.

هر نوع محتوایی می‌تواند در <div> ! در داخل برچسب‌ها<div> برچسب‌ها به عنوان یک قاب برای عناصر HTML استفاده شوند، سپس می‌توان از CSS برای تنظیم استایل یا از JavaScript برای عملیات استفاده کرد.

اگر id یا class برای برچسب‌گذاری <div>، پس عملکرد این برچسب‌ها بیشتر خواهد بود. class یا id ویژگی، می‌توان به راحتی <div> برچسب‌ها برای تنظیم استایل استفاده می‌کنند.

توجه:به طور پیش‌فرض، مرورگر همیشه در <div> با قرار دادن یک نماد ترک حرف در ابتدای و انتهای عنصر.

استفاده

<div> این یک عنصر بلوکی است. این به این معناست که محتوای آن به طور خودکار یک سطر جدید را آغاز می‌کند. در واقع، سطر جدید به عنوان <div> ظاهر پیش‌فرض و منحصر به فرد خود را داشته باشد. می‌توان از <div> با class یا id استایل اضافی

نیاز نیست که به هر <div> با استفاده از

می‌توان به یک <div> برای عناصر class یا id ویژگی‌ها، اما در بیشتر موارد فقط یکی از این دو استفاده می‌شود. تفاوت اصلی این دو این است که class برای گروه‌های عناصر (عناصر مشابه یا به عبارت دیگر، عناصر از یک دسته) استفاده می‌شود، در حالی که id برای شناسایی یک عنصر منحصر به فرد استفاده می‌شود.

لطفاً به:

آموزش HTML:عناصر بلوک و عناصر درون خطی HTML

آموزش HTML:طرح‌بندی HTML

منابع HTML DOM:مجموعه Div

مثال

بخش‌هایی از مستند که از CSS برای تنظیم استایل استفاده می‌کنند: <div>;

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>این عنوان بخش div است</h2>
  <p>این یک بخش از متن در داخل div است.</p>
</div>
</body>
</html>

به طور مستقیم امتحان کنید

مطالعه موردی

<body>
 <h1>وب‌سایت جدید</h1>
  <p>نوشته‌های مختلف. نوشته‌های مختلف. نوشته‌های مختلف...</p>
  ...
 <div class="news">
  <h2>عنوان اخبار 1</h2>
  <p>نوشته‌های مختلف. نوشته‌های مختلف. نوشته‌های مختلف...</p>
  ...
</div>
 <div class="news">
  <h2>عنوان اخبار 2</h2>
  <p>نوشته‌های مختلف. نوشته‌های مختلف. نوشته‌های مختلف...</p>
  ...
 </div>
 ...
</body>

توضیح مثال

همانطور که مشاهده می‌کنید، این بخش HTML ساختار یک وب‌سایت خبری را شبیه‌سازی کرده است. هر div هر عنوان و خلاصه‌ای از یک خبر را ترکیب می‌کند، یعنی، div ساختار اضافی به مستند اضافه می‌کند. همچنین، چون این div‌ها جزء یک نوع عناصر هستند، می‌توان از class="news" برای شناسایی این div‌ها استفاده کرد، این کار نه تنها معنای مناسب‌تری به div‌ها می‌دهد، بلکه برای فرمت‌دهی این div‌ها با استفاده از استایل‌ها راحت‌تر می‌شود، یعنی، یک برنده دوگانه.

توجه:برای یادگیری بیشتر درباره استفاده از class و id، لطفاً فصل "مقایسه‌های ساختاری W3school" و بخش "div، id و کمک‌کنندگان دیگر" را بخوانید.

ویژگی‌های جهانی

<div> این برچسب‌ها از ویژگی‌های رویداد نیز پشتیبانی می‌کنند ویژگی‌های جهانی در HTML.

ویژگی‌های رویداد

<div> این برچسب‌ها از ویژگی‌های رویداد نیز پشتیبانی می‌کنند ویژگی‌های رویداد در HTML.

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

بیشتر مرورگرها از مقادیر پیش‌فرض زیر برای نمایش استفاده می‌کنند <div> عنصر:

div {
  display: block;
}

به طور مستقیم امتحان کنید

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی
  • صفحه قبلی <dir>
  • صفحه بعدی <dl>