HTML Academy · Урок

Элемент section и div

Разберитесь, когда использовать section, а когда обычный div

«Элемент section и div» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Элемент раздела

Элемент <section> объединяет связанное содержимое в тематический раздел:

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

Раздел и универсальный контейнер

Главный вопрос: есть ли у этой группы тема или назначение, которым можно дать название?

<section> — да; представляет тематическую группу и должен иметь заголовок
<div> — нет; это всего лишь контейнер для оформления или сценариев

Разделу нужен заголовок

У каждого <section> должен быть заголовок (<h2>–<h6>):

<!-- Good: section with heading -->
<section>
  <h2>Our Team</h2>
  <ul>...</ul>
</section>

<!-- Bad: section without heading -->
<section class="hero">  <!-- should be a div -->
  <img src="banner.jpg" alt="">
</section>

Когда использовать раздел

Используйте <section> для:

Глав документа
Вкладок или шагов мастера
Частей длинной статьи (введение, методы, результаты)
Маркетинговых разделов главной страницы (возможности, цены, отзывы)

Когда использовать универсальный контейнер

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

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

Разделы в длинной статье

Используйте разделы, чтобы создавать главы внутри статьи:

<article>
  <h1>Complete Guide to HTML5</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 is the fifth version...</p>
  </section>

  <section>
    <h2>Semantic Elements</h2>
    <p>HTML5 introduced many semantic elements...</p>
  </section>

  <section>
    <h2>Forms</h2>
    <p>HTML5 greatly improved form handling...</p>
  </section>
</article>

Разделы главной страницы

Структурированная главная страница с разделами:

<main>
  <section id="hero">
    <h2>Build Better Web Apps</h2>
    <p>The platform for modern developers.</p>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    ...
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    ...
  </section>
</main>

Раздел создаёт контекст для заголовка

Разделы создают новые контексты заголовков в алгоритме построения структуры документа HTML5:

<section>
  <h2>Chapter 1</h2>   <!-- h2 within section context -->
  <section>
    <h3>Section 1.1</h3>
  </section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->

Связывание разделов с заголовками

Свяжите раздел с его заголовком для пользователей программ чтения с экрана:

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

Схема выбора

Какой элемент-контейнер использовать?

Основная навигация? → <nav>
Основное содержимое страницы? → <main>
Самостоятельное содержимое? → <article>
Тематическая группа с заголовком? → <section>
Боковая панель или связанное содержимое? → <aside>
Только контейнер для оформления? → <div>

Раздел без заголовка: используйте универсальный контейнер

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

<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
  <div class="column">Left content</div>
  <div class="column">Right content</div>
</div>

Быстрая проверка

Когда следует предпочесть универсальный контейнер разделу?

Итоги: раздел и универсальный контейнер

Основные сведения о разделе и универсальном контейнере:

<section> — тематическая группа, у которой должен быть заголовок
<div> — семантически нейтральный контейнер для оформления или сценариев
Раздел создаёт именованную область для навигации пользователей программ чтения с экрана
Добавляйте aria-labelledby, чтобы связать раздел с его заголовком
Если сомневаетесь, используйте универсальный контейнер: позже его всегда можно заменить на раздел

Часто задаваемые вопросы

Урок «Элемент section и div» бесплатный?

Да — полный текст урока «Элемент section и div» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Элемент section и div»?

Разберитесь, когда использовать section, а когда обычный div Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Элемент section и div»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy