HTML постоянно развивается, но многие разработчики годами используют одни и те же теги и атрибуты, не подозревая о более удобных альтернативах. В этой статье — три малоизвестных, но полезных HTML-элемента, которые помогут сделать код чище и функциональнее.
1. Атрибут hidden — скрываем элементы без CSS
Как работает?
Вместо:
<div style="display: none;">Скрытый блок</div> можно просто написать:
<div hidden>Скрытый блок</div> Особенности:
-
Элемент полностью исчезает из документа (как
display: none). -
Поддерживается всеми современными браузерами, включая IE11+.
-
Можно управлять через JavaScript (
element.hidden = true/false).
Когда использовать?
✔ Временное скрытие элементов без CSS.
✔ Условный рендеринг в связке с JS.
Ограничения:
- Нет анимации (если нужен плавный переход, лучше
opacity+visibility). - Не подходит для скрытия контента от assistive-технологий (лучше
aria-hidden).
2. Тег <abbr> — правильные аббревиатуры
Как работает?
Позволяет добавить расшифровку сокращения:
<abbr title="Cascading Style Sheets">CSS</abbr> В браузере при наведении курсора появится подсказка.
Почему это лучше, чем <span>?
-
Улучшает доступность (скринридеры зачитывают расшифровку).
-
Даёт семантический смысл (поисковики понимают, что это аббревиатура).
Стилизация:
По умолчанию <abbr> подчёркивается пунктиром, но можно изменить:
abbr {
text-decoration: none;
cursor: help;
} Когда использовать?
✔ Объяснение технических терминов (HTML, API, JSON).
✔ Документация с частыми сокращениями.
3. Тег <details> — аккордеон без JavaScript
Как работает?
Создаёт раскрывающийся блок:
<details>
<summary>Показать подробности</summary>
<p>Скрытый контент...</p>
</details> Плюсы:
- Не требует JavaScript — работает "из коробки".
- Стилизуется через CSS (можно кастомизировать стрелку).
- Поддерживает состояние
open(раскрыто по умолчанию).
Ограничения:
- Нельзя анимировать стандартными средствами (нужен CSS-трюк с
max-height). - Не работает в старом IE (но поддерживается в Edge и всех современных браузерах).
Пример с анимацией:
details[open] p {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
} Что ещё попробовать?
-
<datalist>— автодополнение в<input>. -
<progress>и<meter>— индикаторы прогресса. -
<time datetime="">— семантическое указание дат.
Эти элементы экономят время, уменьшают зависимость от JS и улучшают доступность. Попробуйте их в следующем проекте!
Полезные ссылки:
Совет: Проверяйте поддержку в Can I Use перед использованием в продакшене.
