آموزش و يادگيري تگ div در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <div> آشنا مي‌شويم. اين تگ يکي از پرکاربردترين عناصر HTML است و براي گروه‌بندي بلوک‌هاي محتوا و ساختاردهي صفحات وب استفاده مي‌شود.

تگ div در HTML چيست؟

تگ <div> يک عنصر بلوکي (block-level) است که به خودي خود هيچ استايل يا معناي خاصي ندارد، اما براي ساختاردهي محتوا و قرار دادن عناصر ديگر در يک گروه کاربردي است. معمولاً همراه با کلاس يا آي‌دي و CSS براي طراحي و چيدمان صفحات استفاده مي‌شود.

مثال ساده از تگ div

<div>
  <h2>عنوان بخش</h2>
  <p>اين يک پاراگراف داخل div است.</p>
</div>

در اين مثال، يک بلوک شامل عنوان و پاراگراف ايجاد شده است که مي‌توان آن را با CSS استايل‌دهي کرد.

ويژگي‌هاي مهم تگ div

مثال با استايل CSS

<style>
  .box {
    border: 2px solid #2196f3;
    padding: 16px;
    margin: 10px 0;
    border-radius: 8px;
  }
</style>

<div class="box">
  <h3>بخش ويژه</h3>
  <p>اين محتوا داخل يک div با کلاس box قرار دارد.</p>
</div>

استفاده از کلاس‌ها باعث مي‌شود چندين بلوک مشابه به راحتي استايل يکسان داشته باشند.

کاربردهاي اصلي div

• گروه‌بندي عناصر مشابه براي طراحي صفحات وب.
• ايجاد بخش‌هاي جداگانه براي هدر، فوتر، سايدبار يا محتوا.
• استفاده همراه با CSS Grid يا Flexbox براي چيدمان حرفه‌اي.
• استفاده به عنوان کانتينر براي اسکريپت‌ها و عناصر تعاملي.

نکات مهم درباره div

• تگ <div> معناي معنايي ندارد و صرفاً براي ساختاردهي است.
• براي محتواي معنايي، بهتر است از تگ‌هاي semantic مثل <section>، <article> يا <header> استفاده کنيد.
• با استفاده از کلاس و آي‌دي، مي‌توان چندين div را در يک صفحه مديريت کرد.

براي يادگيري کامل ساختاردهي صفحات و طراحي وب با HTML و CSS، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.