Атрибут class тега <h3>
Описание
Атрибут class позволяет назначать один или несколько CSS-классов для заголовков <h1> до <h6>. Классы используются для стилизации и группировки заголовков.
<h1 class="main-title">Главный заголовок</h1>
<h2 class="section-title secondary">Раздел статьи</h2>
<h3 class="subsection-title">Подраздел</h3>
Основные возможности:
| Применение | Пример | Описание |
|---|---|---|
| Стилизация | .main-title { color: red; } |
Изменение внешнего вида |
| Группировка | document.querySelectorAll('.section-title') |
Выбор всех заголовков раздела |
| Комбинация классов | class="title large dark" |
Применение нескольких стилей |
Рекомендации по именованию классов:
<!-- Хорошие примеры -->
<h1 class="page-title">...</h1>
<h2 class="article-subheading">...</h2>
<!-- Плохие примеры -->
<h3 class="bigRedText">...</h3> <!-- Не семантично -->
<h4 class="header4">...</h4> <!-- Избыточно -->
Пример стилизации через классы:
<style>
.page-header {
font-family: 'Arial', sans-serif;
color: #333;
margin-bottom: 1.5rem;
}
.section-title {
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}
.featured {
background-color: #f8f9fa;
padding: 1rem;
border-radius: 4px;
}
</style>
<h1 class="page-header">О компании</h1>
<h2 class="section-title featured">Наши преимущества</h2>
Особенности работы:
- Один заголовок может иметь несколько классов (через пробел)
- Классы чувствительны к регистру (
Title≠title) - Имеют меньший приоритет, чем
id, но выше, чем теги - Поддерживаются всеми браузерами
Лучшие практики:
- Используйте семантичные имена классов
- Избегайте презентационных названий (
red-text) - Придерживайтесь единого стиля именования (BEM, kebab-case)
- Для типографики создайте базовые классы (
.heading-lg,.heading-sm) - Комбинируйте с ARIA-атрибутами для доступности
Примечание: Правильное использование классов для заголовков позволяет создавать гибкую, поддерживаемую систему типографики и обеспечивает единообразие стилей на всех страницах сайта.