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-верстки. Мы научились использовать идентификаторы и классы для обращения к элементам, а также атрибуты выравнивания и подсказок.