Атрибут class тега <section>

Описание

Атрибут class позволяет назначать один или несколько CSS-классов элементу <section> для стилизации и взаимодействия через JavaScript. Это основной способ группировки и оформления смысловых разделов документа.

Пример использования:
<section class="news featured"> <h2>Новости</h2> <!-- Содержимое раздела --> </section>

Основные возможности:

Применение Пример
Стилизация раздела .news { background: #f8f9fa; }
Выделение особенностей .featured { border-left: 3px solid blue; }
JavaScript-взаимодействие document.querySelector('.news')

Рекомендации по именованию:

  • Используйте семантические имена (services, testimonials)
  • Придерживайтесь единого стиля (BEM, kebab-case)
  • Разделяйте слова дефисом (main-content)
  • Избегайте презентационных имен (blue-box)

Пример с BEM-нотацией:

<section class="section section--dark"> <h2 class="section__title">О нас</h2> <div class="section__content"> <!-- Контент --> </div> </section>

Типичные сценарии:

  • Создание адаптивных разделов (col-md-6)
  • Тематическое оформление (theme-dark)
  • Анимация и взаимодействия (animated fade-in)
  • Состояния элементов (is-expanded)

Ограничения:

  • Классы не должны дублировать семантику section
  • Избегайте избыточного количества классов
  • Не заменяют ARIA-атрибуты для доступности

Примечание: Для элементов <section> классы особенно полезны для:

  • Создания компонентной структуры
  • Повторного использования стилей
  • Явного выделения функциональных блоков
  • Адаптации под разные устройства