Тег <div>

Тег <div> в HTML використовується для створення контейнерів, які групують елементи на веб-сторінці. Це блоковий елемент, який не має семантичного значення, але дозволяє зручно структурувати контент. Тег <div> найчастіше використовується в поєднанні з CSS для оформлення та стилізації груп елементів.

Тег <div> не має власного візуального оформлення, і тому його використання здебільшого стосується організації структури документа. За допомогою <div> можна створювати різні блоки для стилізації, макетів, а також для роботи з JavaScript.

Атрибути

Специфічні атрибути

Тег <div> не має специфічних атрибутів.

Глобальні атрибути

Тег <div> підтримує всі глобальні атрибути HTML. До них належать:

  • id — унікальний ідентифікатор елемента на сторінці, який дозволяє звертатися до нього через CSS або JavaScript. Наприклад:
<div id="container">
    <!-- Вміст контейнера -->
</div>
  • class — дозволяє задати клас елемента для стилізації або групування елементів, що мають спільні властивості. Наприклад:
<div class="card">
    <!-- Вміст картки -->
</div>
  • style — дозволяє застосовувати інлайн-стилі до елемента. Наприклад:
<div style="background-color: orange;">
    <!-- Вміст з інлайн стилем -->
</div>
  • title — дає додаткову інформацію про елемент при наведенні курсору. Наприклад:
<div title="Це контейнер з контентом">
    <!-- Вміст контейнера -->
</div>
  • lang — вказує на мову вмісту елемента. Наприклад:
<div lang="uk">
    <!-- Вміст українською мовою -->
</div>
  • dir — вказує напрямок тексту (наприклад, “ltr” для ліво-направо або “rtl” для справа-наліво). Наприклад:
<div dir="ltr">
    <!-- Вміст написаний зліво-направо -->
</div>

Приклад використання

<div class="container">
    <div class="header">
        <h1>Заголовок</h1>
    </div>
    <div class="content">
        <p>Це вміст сторінки.</p>
    </div>
</div>

У цьому прикладі тег <div> використовується для структурування головних блоків контейнера: заголовка і основного вмісту.

Додаткові моменти

  • Тег <div> є блоковим елементом, що означає, що він займає всю ширину доступного простору та розташовується на новому рядку. Якщо кілька <div> елементів розміщуються один за одним, кожен з них займає окремий рядок.
  • <div> не має жодного візуального оформлення за замовчуванням. Його основне призначення — це групування елементів і створення контейнерів для подальшої стилізації.
  • Тег <div> не слід використовувати для елементів, що мають семантичне значення (наприклад, для заголовків, абзаців або списків). Для таких випадків краще використовувати спеціалізовані теги, як-от <header>, <section>, <article> і т.д.
  • При роботі з <div> зазвичай використовуються CSS класи та ідентифікатори для додавання стилів або для маніпуляцій через JavaScript.