ВМ

Веб Мастерская | Веб разработка и программирование | ИТ | IT

IT и технологии · 2 ноября 2026 г.

Открыть канал в MAX

HTML:

HTML: Коллеги, признавайтесь, сколько раз поисковая форма у вас жила в <div class="search"> или <section class="search-block">? С 2023 года в HTML есть семантический тег <search> для поисковых форм. Он относительно новый, но уже полезен в продакшене. Зачем? <search> говорит браузеру, поисковику и скринридеру: «здесь пользователь что-то ищет». Это поиск по сайту, фильтр товаров, поиск по статьям, выборка в админке. Раньше часто вешали role="search" на <div>, теперь есть полноценный элемент. Плюсы на практике: 1. Семантика. Разметка понятнее без лишних классов и ARIA-костылей. 2. Доступность. Пользователи скринридеров быстрее находят поиск. 3. Чистота кода. <search> заменяет обёртку, которую раньше приходилось придумывать. Было: <div class="search"><form action="/search">...</form></div> Стало: <search><form action="/search">...</form></search> Важные нюансы: — Внутри обычно должна быть <form>, связанная именно с поиском или фильтрацией. — Не оборачивайте в <search> подписку, авторизацию или обратную связь. Это не поиск. — В старых браузерах добавьте search { display: block; }, иначе тег может стать строчным. Поддержка: актуальные Chrome, Edge, Firefox и Safari уже знают <search>. В старых браузерах ничего не сломается — элемент станет неизвестным. Поэтому его можно аккуратно внедрять уже сейчас. В продакшене такие мелочи отличают «просто сайт» от проекта, который уважают пользователи и поисковики. Совет из мастерской Делаете шапку, каталог, блог или админку? Заведите привычку оборачивать поисковую форму в <search>. Пять секунд, а разметка становится взрослее и доступнее. Вот так. Идем кодить дальше! 🚀