Любая веб-страница — это набор блоков: шапка, секции, карточки, футер. Чтобы группировать элементы и управлять ими как единым целым, используют универсальный контейнер div. Это «рабочая лошадка» вёрстки: именно из div собирают структуру почти каждого сайта. Без умения делить страницу на блоки невозможно построить сложный макет.

После этого урока вы сможете группировать элементы в контейнеры, давать блокам классы и оформлять их как самостоятельные секции страницы.

Что уже умеем / что добавим

Вы оформили текст, цвета и шрифты лендинга. Теперь наведём порядок в его структуре. В сквозном проекте мы разделим страницу на осмысленные секции-контейнеры и оформим одну из них как визуально выделенный блок.

Что вы узнаете в рамках статьи

• Что такое div и зачем он нужен.
• Как группировать элементы в контейнер.
• Как оформлять блок через класс.
• Как вкладывать блоки друг в друга.
• Почему div — блочный элемент и как он себя ведёт.

Ключевые термины

• div — универсальный блочный контейнер без собственного смысла.
• Контейнер — элемент, который группирует внутри себя другие элементы.
• Секция — крупный смысловой блок страницы (шапка, преимущества, футер).
• Блочный элемент — занимает всю ширину и начинается с новой строки.
• Вложенность блоков — размещение контейнеров внутри других контейнеров.

Что такое div

div — это универсальный контейнер. Сам по себе он ничего не отображает и не несёт смысла: его задача — сгруппировать элементы, чтобы с ними было удобно работать. Это блочный элемент, поэтому он занимает всю доступную ширину и начинается с новой строки.

<div>
  <h2>Почему стоит выбрать этот курс</h2>
  <p>Практика с первого урока и понятные объяснения.</p>
</div>

Заголовок и абзац теперь объединены в один блок. Их можно перемещать, оформлять и позиционировать вместе, обращаясь к контейнеру. Внешне на странице пока ничего не изменилось — div просто обнял содержимое.

Группировка и классы

Чтобы оформить конкретный блок, ему дают класс — как мы делали с кнопкой. Тогда через селектор класса можно задать блоку фон, отступы, рамку:

<div class="features">
  <h2>Преимущества</h2>
  <ul>
    <li>Практика с первого урока</li>
    <li>Готовый проект в портфолио</li>
  </ul>
</div>

.features {
  background-color: #ffffff;
}

Блок features получил белый фон, выделяющий его на светло-сером фоне страницы. Класс на контейнере — стандартный приём: почти каждой секции сайта дают имя, чтобы управлять её видом.

Вложенность блоков

Контейнеры можно вкладывать друг в друга, создавая структуру любой глубины. Например, внешний блок-секция содержит внутренний блок-карточку:

<div class="section">
  <div class="card">
    <h3>HTML</h3>
    <p>Разметка страниц.</p>
  </div>
  <div class="card">
    <h3>CSS</h3>
    <p>Оформление страниц.</p>
  </div>
</div>

Внешний section группирует две карточки, а каждая card группирует свой заголовок и текст. Так строятся сетки карточек, галереи и колонки. Пока карточки встанут друг под другом (ведь div блочный), а располагать их в ряд мы научимся в следующих курсах с помощью Flexbox.

Поведение блочного элемента

Важно помнить, что div — блочный. Это значит: он тянется на всю ширину родителя и каждый новый div начинается с новой строки. Даже если содержимого мало, блок займёт всю ширину:

<div class="box">Немного текста</div>
<div class="box">Ещё блок</div>

.box {
  background-color: #eaeaea;
}

Оба блока растянутся во всю ширину и встанут друг под другом, а их серый фон это наглядно покажет. Понимание блочного поведения — ключ к предсказуемой вёрстке: вы всегда знаете, как контейнер займёт пространство.

Применяем в проекте

Наведём порядок в структуре лендинга, разделив его на именованные секции. Обернём титульный экран в блок hero, а блок преимуществ — в features, и дадим последнему белый фон.

<body>
  <div class="hero">
    <img src="images/hero.jpg" alt="Студент верстает свой первый сайт">
    <h1>Научитесь верстать сайты с нуля</h1>
    <p class="lead">Практический курс по HTML и CSS для начинающих.</p>
    <a class="button" href="https://stepik.org" target="_blank">Записаться на курс</a>
  </div>

  <div class="features">
    <h2>Почему стоит выбрать этот курс</h2>
    <ul>
      <li>Практика с первого урока</li>
      <li>Объяснения простым языком</li>
      <li>Готовый проект в портфолио</li>
    </ul>
  </div>
</body>

.features {
  background-color: #ffffff;
}

Теперь лендинг состоит из двух чётких секций с говорящими именами hero и features, и блок преимуществ выделен белым фоном. Это удобная основа: к этим классам мы будем добавлять отступы и рамки в следующих уроках.

Частые ошибки

• Лишняя вложенность.
  Не оборачивайте каждый элемент в отдельный div без надобности — это усложняет код.
• Блоки без классов.
  Секции почти всегда стоит именовать классами, иначе к ним не обратиться из CSS.
• Ожидание, что div встанут в ряд.
  По умолчанию блоки идут друг под другом; ряд делается отдельными средствами.
• Неосмысленные имена.
  Давайте классам понятные имена (hero, features), а не block1, block2.

Итоги

Отличная работа — вы научились строить структуру страницы! Теперь вы группируете элементы в контейнеры div, оформляете блоки через классы, вкладываете их друг в друга и понимаете, как ведёт себя блочный элемент. Это фундамент любой вёрстки: из таких блоков собирают все сайты. Ваш лендинг обрёл чёткую структуру из именованных секций.

Вы уже мыслите как верстальщик — здорово! В следующем уроке разберём, пожалуй, главную тему CSS: блочную модель, отступы и рамки.