HTML з нуля: Тег div в HTML. Урок №17 Overcod.net

HTML з нуля: Тег div в HTML. Урок №17

У сьогоднішньому уроці ми розглянемо один із найважливіших елементів в HTML — тег <div>. Це фундаментальний інструмент для створення структури веб-сторінки та групування контенту. Без нього неможливо уявити сучасну верстку сайтів.

Еволюція верстки: від таблиць до блоків

Щоб зрозуміти велич <div>, потрібно озирнутися назад. Давным-давно, коли інтернет був повільним, а монітори — товстими, верстка сайтів робилася на таблицях (<table>).

Використання таблиць для структури було незручним і громіздким. Сьогодні таблиці використовуються суворо за призначенням (для табличних даних), а стандартом стала блокова верстка з використанням тегу <div>.

Тег div в HTML. Основы HTML для начинающих. Урок №17

Що таке тег `<div>`?

Тег <div> (від англ. division — розділ) — це блоковий елемент, який слугує контейнером для інших елементів HTML. Сам по собі він не має візуального оформлення, але він дозволяє логічно об’єднувати заголовки, абзаци та зображення в окремі блоки.

Це необхідно для того, щоб за допомогою CSS (каскадних таблиць стилів) керувати зовнішнім виглядом і розташуванням цих груп елементів на сторінці.

Основні атрибути тегу div

Щоб керувати контейнерами, нам необхідні атрибути. Розглянемо ключові з них.

1. Атрибут id (Ай-ді)

Це як паспорт. Він має бути унікальним на всій сторінці. Не може бути двох людей з однаковим номером паспорта, і не може бути двох блоків з однаковим id.

Коли використовувати: Для унікальних, єдиних у своєму роді елементів (наприклад, #header — шапка сайту, або #footer — підвал).

2. Атрибут class (Клас)

Це як шкільна форма або членство в клубі. Клас можна дати хоч сотні елементів відразу.

Коли використовувати: Коли у вас є багато схожих елементів, які повинні виглядати або поводитися однаково (наприклад, картки товарів, кнопки, пункти меню).

3. Атрибут title

Цей атрибут відповідає за спливаючу підказку. Текст, поміщений у нього, з’явиться, коли користувач наведе курсор миші на блок.

Приклад: title="А ось і я!"
Застосування: Корисно для пояснень або додаткової інформації, яка не повинна займати місце на екрані постійно.

4. Атрибут align (Вирівнювання)

Цей атрибут дозволяє задати горизонтальне вирівнювання вмісту всередині блоку div.

align="left" — вирівнювання вмісту по лівому краю (за замовчуванням).
align="right" — вирівнювання вмісту по правому краю.
align="center" — вирівнювання вмісту по центру.

Примітка: У сучасному HTML5 для вирівнювання частіше використовують CSS-властивості (наприклад, text-align), проте знання атрибута align корисне для розуміння роботи старого коду.

Приклад коду

Зберемо всі вивчені атрибути в одному прикладі:

<div id="main-container" align="center">
    
    <div class="news-item" align="left" title="Натисніть, щоб читати докладніше">
        <h3>Новини HTML 1</h3>
        <p>Вивчаємо нові атрибути.</p>
    </div>

    <div class="news-item" align="center" title="Натисніть, щоб читати докладніше">
        <h3>Новини HTML 2</h3>
        <p>Текст зміщено по центру</p>
    </div>

    <div class="news-item" align="right" title="А ось і я!">
        <h3>Новини HTML 3</h3>
        <p>Текст зміщено праворуч.</p>
    </div>

</div>

Висновок

У цьому уроці ми розібрали тег <div> — основний будівельний матеріал для HTML-верстки. Ми навчилися використовувати ідентифікатори та класи для звернення до елементів, а також атрибути вирівнювання та підказок.