Атрибут compact тега <menu>
Описание
Атрибут compact для тега <menu> является устаревшим булевым атрибутом, который в HTML4 указывал браузеру отображать меню в компактном виде (с меньшими отступами между пунктами). В HTML5 этот атрибут не поддерживается.
<!-- Устаревшее использование -->
<menu compact>
<li>Пункт 1</li>
<li>Пункт 2</li>
</menu>
Современная альтернатива:
<menu style="padding: 0; margin: 0; line-height: 1.2;">
<li style="margin: 2px 0;">Пункт 1</li>
<li style="margin: 2px 0;">Пункт 2</li>
</menu>
<!-- Или лучше с CSS-классом -->
<style>
.compact-menu {
padding: 0;
margin: 0;
}
.compact-menu li {
margin: 2px 0;
line-height: 1.2;
}
</style>
<menu class="compact-menu">
<li>Пункт 1</li>
<li>Пункт 2</li>
</menu>
Рекомендации по созданию компактных меню:
- Используйте CSS вместо устаревшего атрибута
- Уменьшайте padding и margin элементов
- Оптимизируйте line-height для плотного расположения
- Используйте компактные шрифты
Пример с CSS Flexbox:
<style>
.compact-flex-menu {
display: flex;
gap: 5px;
padding: 0;
list-style: none;
}
</style>
<menu class="compact-flex-menu">
<li>Главная</li>
<li>О нас</li>
<li>Контакты</li>
</menu>
Ограничения и совместимость:
- Атрибут не работает в современных браузерах
- Может вызывать ошибки валидации HTML5
- Для адаптивных меню используйте медиазапросы
- Предпочтительнее использовать семантические
<nav>и<ul>
Примечание: Вместо устаревшего тега <menu> с атрибутом compact, современные веб-стандарты рекомендуют использовать <nav> с <ul> и CSS для полного контроля над внешним видом навигационных элементов.