Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <p><a>#База знаний</a></p>

2 <ul><li>29 апр 2025</li>

3 <li>0</li>

4 </ul><p>Рассказываем о том, как устроен один из ключевых элементов HTML-разметки.</p>

5 <p>Иллюстрация: Оля Ежак для Skillbox Media</p>

6 <p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>

7 <p>Большинство веб-страниц состоит из контейнеров, которые группируют элементы и управляют их расположением. Один из самых популярных - тег < div >. Если коротко, это универсальный контейнер для удобного управления стилями HTML-элементов.</p>

8 <p>Тег < div > (от division - секция, раздел) - блочный элемент HTML, который используется для создания контейнеров на веб-странице. Тег помогает структурировать контент: объединять текст, изображения, формы и другие элементы в логические блоки.</p>

9 <p><strong>Содержание</strong></p>

10 <ul><li><a>Зачем нужен < div > в языке HTML, какой у него базовый синтаксис и как его используют</a></li>

11 <li><a>Как работают а</a><a>трибуты < div >: стилизация, вложенность и другие особенности</a></li>

12 <li><a>Советы и лайфхаки по использованию < div ></a></li>

13 <li><a>Типичные ошибки при работе с < div ></a></li>

14 <li><a>Практика: создание макетов с < div >, Flexbox и Grid Layout</a></li>

15 <li><a>Домашнее задание</a></li>

16 </ul><p>Тег < div > - универсальный блочный контейнер, который не несёт семантического значения. В отличие от тегов вроде <article> или <section>, он ничего не говорит о смысле содержимого внутри. В контейнеры < div > можно положить что угодно: текст, картинки, другие теги, целые фрагменты интерфейса. Именно поэтому он используется как основной строительный блок вёрстки, особенно когда нужно сгруппировать элементы или задать им стили.</p>

17 <p>Использовать < div > в HTML-документе просто. Чтобы создать блочный контейнер, достаточно поместить контент между открывающим тегом < div > и закрывающим тегом </div>:</p>

18 < div > <h1>Привет, Мир!</h1> <h2>Это пример контейнера <code>&lt;div&gt;</code>.</h2> </div><p>Вот так будет выглядеть в браузере приведённый выше пример кода:</p>

19 <em>Скриншот: Google Chrome / Skillbox Media</em><p>На следующем изображении показана область, занимаемая тегом < div >. Обратите внимание на то, что сам контейнер по умолчанию невидимый:</p>

20 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Тег < div > - блочный элемент, как параграфы, списки, <pre>, заголовки или таблицы. Это значит, что блок <div > занимает всю доступную ширину родительского элемента (по умолчанию 100% экрана). Если добавить ещё один блок < div > после предыдущего, он начнётся с новой строки:</p>

21  < div > <span>Это 1-й контейнер DIV</span> </div>  < div > <span>Это 2-й контейнер DIV</span> </div><p>Несмотря на то что в примере контент каждого из контейнеров заключён в строчные теги <span>, содержимое разных блоков < div > будет начинаться с новой строки.</p>

22 <p>Зоны разных тегов < div > на изображении для наглядности обведены разными цветами, а ширина страницы продлена до конца:</p>

23 <em>Инфографика: Skillbox Media</em><p>Комбинируя блоки < div >, можно строить любые макеты - от простых колонок до сложных интерфейсов. Этот тег позволяет группировать элементы, управлять их расположением и создавать документы со структурой любой сложности.</p>

24 <p>Раньше для сложных макетов часто использовали вложенные < div > с позиционированием и float, но сегодня в ходу более гибкие и удобные инструменты - CSS Grid и Flexbox. Они дают больше контроля над вёрсткой и избавляют от необходимости плодить лишние контейнеры.</p>

25 <p>Тег < div > поддерживает различные атрибуты, такие как id, class, style и другие. Вложенные < div > позволяют группировать элементы в сложные структуры.</p>

26 <p>Атрибут title задает текст всплывающей подсказки, которая отображается при наведении курсора на содержимое контейнера:</p>

27  <div title="Подсказка, привет!"> Основной текст </div><em>Скриншот: Google Chrome / Skillbox Media</em><p>Атрибут id - уникальный идентификатор элемента. Его используют как для стилизации с помощью CSS, так и для обращения к элементу по его id через JavaScript:</p>

28  <div id="box01"> Какой-то контент 1 </div><p>По стандарту id должен быть уникальным - один и тот же идентификатор нельзя использовать для нескольких элементов на странице. Это трудно контролировать, особенно в компонентах или при копировании кода. К тому же атрибут id имеет высокую специфичность в CSS и плохо переопределяется. Поэтому для стилизации лучше использовать классы, а id применять только для JavaScript и якорей.</p>

29 <p>Атрибут class указывает имя одного или нескольких классов для контейнера. Классы используются для стилизации с помощью CSS, позволяя применять одинаковые стили к группе тегов < div >.</p>

30  <div class="classA"> Какой-то контент 2 </div>  <div class="classA classB classC"> Какой-то контент 3 </div><p>Если нужно использовать несколько классов, просто перечислите их через пробел в значении атрибута class.</p>

31 <p>Атрибут contenteditable позволяет пользователю редактировать содержимое элемента прямо на странице. Он принимает значения true (разрешает редактирование) и false (запрещает):</p>

32 <div contenteditable="true">Имя: </div><p>При наведении на содержимое элемента на веб-странице появится курсор. Пользователь сможет удалить существующий текст или ввести свой. Например: "My name is …":</p>

33 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Элемент < div > можно стилизовать разными способами. Один из них - использование атрибута style. Например, добавим контейнеру рамку и зададим фон:</p>

34  <div style="background-color: red; border: solid;"> Контейнер №1 </div>  <div style="background-color: yellow; border: solid;"> Контейнер №2 </div><p>Атрибут style позволяет применять CSS-стили напрямую к тегу, в нашем случае - к < div >. Например, свойство background-color задаёт цвет фона, а border: solid добавляет рамку. В примере используются цветовые константы red и yellow для фона контейнера:</p>

35 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Такой способ считается довольно топорным: он засоряет HTML-разметку и плохо масштабируется. Лучше выносить стили в CSS и использовать классы - это чище, гибче и проще в поддержке.</p>

36 <p>Тег < div > может быть вложен в другой < div >, позволяя создавать многоуровневые структуры для более точного управления контентом. Один из способов стилизации - использование CSS-классов, которые задаются через атрибут class.</p>

37 <p>Рассмотрим пример такой структуры в HTML:</p>

38 <div class="container"> container <div class="header">Заголовок</div> <div class="content"> content <div class="article">Статья 1</div> <div class="article">Статья 2</div> /content </div> <div class="footer">Подвал</div> /container </div><p>Используя селекторы классов в CSS, задаём разные цвета каждому блоку < div >:</p>

39 .container { background-color: yellow; } .header { background-color: blue; } .content { background-color: red; } .article { background-color: white; } .footer { background-color: green; }<p>Таким образом, используя вложенные < div > и применяя к ним стили через CSS, мы создали базовую структуру веб-страницы:</p>

40 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Тег < div > помогает группировать элементы, но не всегда уместен. Важно понимать разницу между ним и семантическими тегами, а также знать, когда его использование оправданно, а когда лучше обойтись без него.</p>

41 <p>Семантические теги - это контейнеры, которые сразу указывают на тип содержимого внутри. Они делают код понятнее, улучшают доступность и структурируют страницу. К таким тегам относятся <header>, <nav>, <article>, <footer> и другие.</p>

42 <p>Тег < div > не несёт семантической нагрузки - он просто создаёт блок без указания на его смысл.</p>

43 <p>❌ Когда есть семантические теги (<header>, <section> или <article>).</p>

44 <p>Использование семантических тегов делает структуру кода более понятной как разработчикам, так и поисковым системам.</p>

45 <p>Пример архитектуры с использованием < div >:</p>

46 <div class="header"> <h1>Заголовок</h1> </div> <div class="main"> <div class="article"> <p>Содержимое</p> </div> </div> <div class="footer"> <p>2025 Skillbox</p> </div><p>Пример той же архитектуры с семантическими тегами:</p>

47 <header> <h1>Заголовок</h1> </header> <main> <article> <p>Содержимое</p> </article> </main> <footer> <p>2025 Skillbox</p> </footer><p>❌ Когда элемент сам по себе несёт семантическую нагрузку (<button>, <a>, <form>).</p>

48 <p>Тег <a> - стандартный элемент для создания гиперссылок. Использовать < div > для этой цели тоже можно, но это нарушает логику HTML, усложняет код и ухудшает его доступность:</p>

49 <div class="link" onclick="location.href='https://skillbox.ru'"> Начать обучение </div><p>В таком случае лучше использовать созданный для гиперссылок тег <a>:</p>

50 <a href="https://skillbox.ru">Начать обучение</a><p>❌ Когда < div > используется "на всякий случай", без реальной нужды.</p>

51 <p>Такой подход загромождает код и усложняет его восприятие. Перед созданием нового < div > стоит проверить, нет ли более подходящего семантического тега или возможности обойтись без дополнительного контейнера.</p>

52 <p>✅ Когда нужно сгруппировать элементы и применить к ним общие стили или логику поведения.</p>

53 <p>С помощью < div > удобно сгруппировать элементы по их смыслу и как бы связать в единый объект. Например, это может быть карточка товара для маркетплейса либо карточка информации о пользователе.</p>

54 <div class="card"> <h2>Название</h2> <p>Описание карточки</p> <button>Действие</button> </div><p>✅ Когда нужно динамически управлять контейнером, используя JavaScript.</p>

55 <p>Пример ниже показывает, как удобно управлять контейнером < div > и его атрибутом id с помощью JavaScript в режиме реального времени:</p>

56 <script> function test() { const container = document.getElementById('dynamic-container'); // дальнейший код ... } </script><p>✅ При создании макетов - в связке с CSS Flexbox или CSS Grid Layout.</p>

57 <p>Поскольку < div > не несёт семантического значения, но является удобным контейнером, его часто используют в сочетании с CSS Flexbox и Grid Layout для создания адаптивных макетов.</p>

58 <p>Тег < div > - полезный инструмент для группировки элементов, но неправильное его использование может привести к проблемам. Чрезмерная вложенность, отсутствие семантики или идентификаторов усложняют код, делают его менее читаемым и затрудняют поддержку.</p>

59 <p>Вот типичные ошибки, которых стоит избегать:</p>

60 <ul><li>Создание спагетти из < div >.</li>

61 </ul> < div > < div > < div > < div >Слишком много вложенных div</div> </div> </div> </div><p>Такой код трудно читать, а менять и поддерживать его ещё сложнее.</p>

62 <ul><li>Чрезмерное использование < div > вместо семантических блоков.</li>

63 </ul> < div >Название</div> < div >Заголовок</div> < div >Основной контент</div> < div >Подвал</div> < div >Уже и сам не помню, что это за семантический блок, оставлю div...</div><p>Избыток < div > усложняет код, а также затрудняет дальнейшую стилизацию и ухудшает структуру страницы.</p>

64 <ul><li>Отсутствие классов и идентификаторов.</li>

65 </ul> < div >Красное название</div>  < div >  А тут красивый параграф </div> < div >  Ещё один блок с красивой границей вокруг </div><p>Без классов и идентификаторов работать с < div > в CSS и JavaScript сложнее. В большом объёме кода это затрудняет стилизацию, усложняет поиск нужных элементов и может привести к дублированию.</p>

66 <p>Сделаем два макета мини-маркетплейса. В первом создадим окно навигации, используя < div > и Flexbox, во втором - каталог товаров, оформленный с помощью Grid Layout.</p>

67 <p>Семантические теги в этой практике использовать не будем; наша задача - показать, как разные технологии CSS работают с < div >.</p>

68 <p>Сначала соберём главное окно маркетплейса с логотипом и псевдонавигацией. Для этого создадим файл index.html и добавим следующий код:</p>

69 <!DOCTYPE html> <html lang="ru"> <head> <title>Skillbox Marketplace</title> <meta charset="UTF-8">  <link rel="stylesheet" href="nav.css"> </head> <body>  <div class="logo"> <p>Skillbox</p> <p>Marketplace</p> </div>   <div class="main"> <div class="menu">Главная</div> <div class="menu">Личный кабинет</div> <div class="menu">О нас</div> </div> </body> </html><p>Здесь два основных контейнера < div >: один для логотипа, другой - для навигации, и внутри него тоже используются < div >. В браузере этот код отобразится следующим образом:</p>

70 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Теперь создаём файл nav.css в той же папке, где находится HTML-документ, и добавляем стили для всех контейнеров < div >:</p>

71 body { margin: 0; /* Убираем отступы вокруг страницы */ background-color: #f0f0f0; /* Устанавливаем светло-серый цвет фона для страницы */ } /* Стилизуем div-контейнер логотипа */ .logo { font-family: 'Arial', sans-serif; /* Шрифт для логотипа */ font-size: 24px; /* Размер шрифта */ font-weight: bold; /* Жирное начертание */ color: #333; /* Цвет текста */ text-transform: uppercase; /* Преобразуем текст в верхний регистр */ letter-spacing: 2px; /* Пробел между буквами */ background-color: #ffffff; /* Белый фон логотипа */ padding: 10px 20px; /* Внутренние отступы вокруг текста */ } /* Стилизуем общую разметку всех div-элементов внутри контейнера main с помощью Flexbox*/ .main { display: flex; /* Включаем Flexbox */ justify-content: space-around; /* Равномерно распределяем элементы по горизонтали */ background-color: #333; /* Устанавливаем тёмно-серый цвет фона */ } /* Стилизуем текст div-элементов контейнеров menu */ .menu { color: white; /* Устанавливаем белый цвет текста для ссылок */ text-decoration: none; /* Убираем подчёркивание у ссылок */ }<p>Обратите внимание на свойство display в селекторе .main. По умолчанию у <div> значение display: block, из-за чего он занимает всю ширину экрана. В этом упражнении мы меняем его поведение, используя Flexbox.</p>

72 <p>Такой метод позволяет выстраивать элементы как по вертикали, так и по горизонтали, делая разметку более гибкой. Вот результат стилизации контейнера < div > с помощью Flexbox:</p>

73 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Теперь создаём каталог товаров. Для этого добавляем новый файл, например product.html, и вставляем следующий HTML-код:</p>

74 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Skillbox Marketplace 2</title>  <link rel="stylesheet" href="product.css"> </head> <body>  <div class="grid-container">   <div class="product"> <div class="img">Изображение 1</div> <h2>Продукт 1</h2> <p>Цена: 100 рублей</p> </div>  <div class="product"> <div class="img">Изображение 2</div> <h2>Продукт 2</h2> <p>Цена: 200 рублей</p> </div> </div> </body> </html><p>В этом коде есть родительский контейнер < div >, внутри которого находятся дочерние < div >. Каждый из них содержит одинаковую структуру: изображение (в примере это тоже < div >), название <h2> и цену <p>. Без CSS в браузере всё отобразится следующим образом:</p>

75 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Создаём файл product.css в той же папке, где находится HTML-документ. Затем добавляем в него код для подключения Grid Layout:</p>

76 /* Подключаем Grid Layout и настраиваем его */ .grid-container { display: grid; /* Включаем Grid Layout */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Автоматическое заполнение колонок */ gap: 15px; /* Промежутки между элементами */ padding: 20px; /* Внутренние отступы вокруг текста */ max-width: 1000px; /* Максимальная ширина сетки */ margin: auto; /* Центрируем сетку на странице */ } /* Стилизуем общую карточку */ .product { background-color: white; /* Добавление фона */ border: 1px solid #ccc; /* Добавление рамки */ border-radius: 10px; /* Добавление округления рамки */ padding: 10px; /* Добавление отступов */ text-align: center; /* Центрируем текст внутри карточки */ } /* Стилизуем макет изображения */ .product .img { width: 100%; /* Изображение занимает всю ширину карточки */ border-radius: 10px; /* Закругление углов изображения */ background-color: yellow; /* Добавление жёлтого фона */ }<p>Такой подход позволяет размещать < div > как по вертикали, так и по горизонтали, обеспечивая удобное расположение элементов.</p>

77 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Закрепим всё, что прошли. Ниже - домашка из четырёх небольших заданий, где вам предстоит собрать простую страницу с навигацией и каталогом товаров, постепенно усложняя структуру карточек и управляя расположением элементов. Это важно сделать перед тем, как перейти к более сложным макетам.</p>

78 <p>Объедините код двух предыдущих упражнений, добавив навигацию и каталог товаров. Это задание - мини-макет реального сайта, позволяющий закрепить навык работы с несколькими секциями на странице. Поможет вам лучше понять, как компоненты взаимодействуют между собой, как управлять их расположением с помощью Flexbox и Grid, и как собирать интерфейс из блоков.</p>

79 <p>Измените направление контейнеров < div > в навигации на вертикальное. На практике это применяется, если навигация расположена сбоку - например, в боковой панели или мобильной версии сайта. Помогает компактно разместить пункты меню и упростить восприятие интерфейса.</p>

80 <p>Добавьте внутри карточек новые < div > - например, для рейтинга товара или для кнопки "Добавить в корзину". Рейтинг, кнопки, подписи - типичные элементы интерфейса. Усложняя структуру, вы научитесь правильно организовывать разметку и управлять её отображением с помощью CSS.</p>

81 <p>Создайте 9-10 дополнительных карточек и поэкспериментируйте с их расположением в Grid Layout. Когда карточек больше, становится видно, как адаптируется сетка: куда перетекают блоки, как они выстраиваются по строкам и колонкам. Такой эксперимент - простой способ освоиться с поведением сетки в реальных интерфейсах.</p>

82 <a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>