Атрибут class тега <main>
Описание
Атрибут class для тега <main> позволяет назначать один или несколько классов CSS для стилизации основного содержимого страницы. Классы используются для применения стилей и взаимодействия через JavaScript.
<main class="content-wrapper dark-theme" id="main-content">
<h1>Заголовок страницы</h1>
<article>
<p>Основное содержимое документа...</p>
</article>
</main>
Основные способы применения:
| Применение | Пример | Описание |
|---|---|---|
| Стилизация | .content-wrapper { max-width: 1200px; } |
Применение CSS-правил |
| JavaScript | document.querySelector('.dark-theme') |
Выбор элемента в скриптах |
| Состояния | .is-hidden { display: none; } |
Управление видимостью |
Рекомендации по именованию классов:
- Используйте осмысленные имена (
page-contentвместоdiv1) - Придерживайтесь единого стиля (kebab-case рекомендуем)
- Избегайте избыточных классов (не более 2-3 для элемента)
- Для сложных проектов используйте методологии (BEM, OOCSS)
Пример с BEM-нотацией:
<main class="main main--dark">
<div class="main__content">
<!-- Контент -->
</div>
</main>
<style>
.main { max-width: 1200px; margin: 0 auto; }
.main--dark { background: #333; color: white; }
.main__content { padding: 20px; }
</style>
Динамическое управление классами:
<main class="content" id="main-content">
<button onclick="toggleTheme()">Сменить тему</button>
<!-- Контент -->
</main>
<script>
function toggleTheme() {
document.getElementById('main-content').classList.toggle('dark-theme');
}
</script>
<style>
.dark-theme {
background: #222;
color: #fff;
}
</style>
SEO и доступность:
- Классы не влияют напрямую на SEO
- Не заменяют семантические HTML-элементы
- Могут использоваться для улучшения доступности (aria-классы)
- Избегайте классов, описывающих внешний вид (
red-text)
Примечание: Хотя атрибут class является фундаментальным для веб-разработки, для элементов <main> особенно важно сохранять семантическую чистоту. Используйте классы прежде всего для структурной разметки, а не только для визуального оформления.