Атрибут class тега <li>
Описание
Атрибут class задает один или несколько классов для элемента <li>, которые используются для стилизации через CSS или взаимодействия через JavaScript. Классы позволяют группировать элементы и применять к ним общие стили или логику.
<ul>
<li class="active">Первый пункт (активный)</li>
<li class="item highlighted">Второй пункт (подсвечен)</li>
<li class="item">Третий пункт</li>
</ul>
<style>
.active {
font-weight: bold;
color: #4CAF50;
}
.highlighted {
background-color: #FFF9C4;
}
</style>
Особенности работы:
| Синтаксис | Описание | Пример |
|---|---|---|
| Один класс | Применяет один класс к элементу | <li class="menu-item"> |
| Несколько классов | Применяет несколько классов через пробел | <li class="item active"> |
| Без класса | Элемент не имеет классов | <li> |
Рекомендации по использованию:
- Используйте осмысленные имена классов (например,
activeвместоa1) - Избегайте избыточных классов - один элемент не должен иметь более 3-4 классов
- Для сложных проектов рассмотрите методологии именования (BEM, OOCSS)
- Классы должны описывать назначение элемента, а не его внешний вид
Пример с BEM-нотацией:
<ul class="menu">
<li class="menu__item menu__item--active">Главная</li>
<li class="menu__item">О нас</li>
<li class="menu__item">Контакты</li>
</ul>
<style>
.menu__item {
padding: 8px 16px;
}
.menu__item--active {
border-bottom: 2px solid #4CAF50;
}
</style>
SEO и доступность:
- Классы не влияют напрямую на SEO, но помогают структурировать контент
- Используйте классы для улучшения доступности (например,
current-page) - Избегайте классов, которые описывают содержимое - для этого есть семантические теги
Примечание: Атрибут class - один из самых часто используемых в HTML. Он позволяет создавать гибкие и поддерживаемые стили, особенно в сочетании с современными CSS-препроцессорами (Sass, Less). Для сложных интерфейсов рассмотрите использование CSS-модулей или CSS-in-JS решений.