HTML-тег <div>

HTML-тег <div> — это блочный контейнерный элемент, который используется для группировки контента и применения к нему стилей и скриптов. Это один из самых универсальных и часто используемых тегов в HTML, часто служащий оболочкой для разделов веб-страницы.

Хотя тег <div> не несет никакого семантического значения, он широко используется для целей макетирования, сочетая его с CSS для стилизации и JavaScript для интерактивности.

Базовый синтаксис HTML-тега <div>

Основной синтаксис тега <div> :

<div>
    Content goes here
</div>

Тег <div> является элементом блочного уровня, то есть он начинается с новой строки и по умолчанию занимает всю ширину своего контейнера.

Атрибуты HTML-тега <div>

Глобальные атрибуты: тег <div> поддерживает все глобальные атрибуты, такие как id , class , style и data-* .
Атрибуты событий: Тег <div> поддерживает все атрибуты событий, такие как onclick , onmouseover и onkeydown .

Базовый пример HTML-тега <div>

Вот простой пример использования тега <div> для группировки контента:

<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Example</h2>
        <div>
            <p>This is a paragraph inside a div.</p>
            <p>This is another paragraph inside the same div.</p>
        </div>
    </body>
</html>

Пояснение: В этом примере два абзаца сгруппированы внутри одного элемента <div> , который можно стилизовать или управлять им как единым целым.

Стилизация тега <div> с помощью CSS

Тег <div> можно стилизовать с помощью CSS для управления его внешним видом:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container {
                background-color: #f9f9f9;
                border: 1px solid #ddd;
                padding: 20px;
                margin: 10px 0;
            }
        </style>
    </head>
    <body>
        <h2>Styled Div Example</h2>
        <div class="container">
            <p>This div has a light gray background, padding, and a border.</p>
        </div>
    </body>
</html>

Результат: элемент <div> оформлен фоновым цветом, отступами и рамкой, что делает его визуально отличительным.

Использование тега <div> для макета

Тег <div> обычно используется для целей макета, часто в сочетании с фреймворками CSS или пользовательскими стилями:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .row {
                display: flex;
            }
            .column {
                flex: 50%;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <h2>Layout Example</h2>
        <div class="row">
            <div class="column" style="background-color: #f1f1f1;">
                Column 1
            </div>
            <div class="column" style="background-color: #ddd;">
                Column 2
            </div>
        </div>
    </body>
</html>

Пояснение: В этом примере тег <div> используется с CSS Flexbox для создания макета из двух столбцов.

Практическое применение тега <div>

Группировка элементов: используйте <div> для группировки связанных элементов, таких как разделы формы, статьи или элементы навигации.
Создание макета: Объедините <div> с CSS для создания сеток, строк и столбцов в адаптивных макетах.
Динамическое содержимое: используйте <div> в качестве контейнера для динамического содержимого, которое управляется с помощью JavaScript.

Расширенный пример: вложенные элементы Div

Вы можете вкладывать несколько элементов <div> для создания сложных макетов:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .parent {
                display: flex;
                justify-content: space-between;
            }
            .child {
                width: 30%;
                padding: 10px;
                background-color: #f1f1f1;
                border: 1px solid #ddd;
            }
        </style>
    </head>
    <body>
        <h2>Nested Div Example</h2>
        <div class="parent">
            <div class="child">Box 1</div>
            <div class="child">Box 2</div>
            <div class="child">Box 3</div>
        </div>
    </body>
</html>

Расширенный пример: вложенные элементы Div

Пояснение: В этом примере создается родительский элемент <div> с тремя вложенными дочерними элементами div, расположенными в ряд с помощью Flexbox.