<address> и <search> - два семантических тега с узким назначением: address - это НЕ любой физический адрес, а контактная информация автора текущей страницы или статьи, а search - обёртка именно для формы поиска или фильтрации, а не для самих результатов.
В этом уроке
Заметь: контакты автора курсивом внутри address - это про автора страницы, а не про адрес офиса компании. А форма поиска обёрнута в search - это уже готовая landmark-роль для скринридера, без единого ARIA-атрибута в коде.
Контакты автора: address
<address> предназначен ТОЛЬКО для контактной информации ближайшего <article> или <body> - то есть для того, кто написал текущую страницу или статью: email, ссылка на профиль, телефон, физический адрес автора. Это НЕ тег для произвольного почтового адреса на странице - например, для адреса магазина в каталоге или списка филиалов компании, никак не связанных с авторством текста. Внутрь address нельзя класть ничего, кроме контактных данных (дата публикации - отдельный <time>, а не часть address), нельзя вкладывать address в address, а также нельзя класть внутрь заголовки или секционирующие теги вроде article/section/header/footer. По умолчанию браузер показывает address курсивом - как i или em, - но смысл у него совершенно другой.
<footer><address>Автор: Николай. <a href="mailto:info@htmlicss.com">info@htmlicss.com</a></address></footer> - контакты автора страницы.
<address>Магазин на ул. Ленина, 10</address> - обычный физический адрес магазина, никак не связанный с автором страницы - address здесь не подходит.
Блок поиска: search
<search> - самый молодой тег из всех, что встречались в этом курсе: он вошёл в спецификацию HTML только 24 марта 2023 года. До этого для landmark-роли поиска приходилось вручную писать <div role="search"> - из восьми стандартных ARIA-ролей для ориентиров у семи уже были собственные HTML-теги (например, nav), и только у поиска не было своего тега вплоть до 2023 года. Внутрь search кладут форму поиска или фильтрации - поля, чекбоксы уточнения, кнопку отправки, - но НЕ сами результаты поиска: результаты по-прежнему относятся к основному контенту страницы, а не к самому блоку поиска.
<search><form><input type="search"><button>Найти</button></form></search> - форма поиска внутри search.
<search><ul><li>Результат 1</li><li>Результат 2</li></ul></search> - сами результаты поиска внутри search быть не должны.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Оборачивать в address любой физический адрес (например, адрес магазина в каталоге) | address предназначен только для контактов автора текущей страницы/статьи, а не для произвольных адресов | Для обычных почтовых адресов, не связанных с авторством, использовать обычную разметку (p, ul и т.п.) |
| Класть в address дату публикации или другую непричастную информацию | address должен содержать только контактные данные | Дату выносить в отдельный time, а не смешивать с address |
| Вкладывать address внутрь address или класть внутрь заголовки/секции | Нарушает модель содержимого address | Держать внутри address только "плоское" содержимое - текст и ссылки |
| Класть внутрь search сами результаты поиска | search предназначен только для формы и органов управления, а не для вывода результатов | Результаты показывать в основном контенте страницы, вне search |
| Продолжать вручную писать div role="search" вместо нового тега | Работает, но требует знания ARIA и лишнего атрибута | Использовать нативный тег search - он уже сам даёт нужную landmark-роль |
Шпаргалка
| Тег/задача | Что нужно знать |
|---|---|
| <address> | Контакты автора страницы/статьи - не любой почтовый адрес; курсив по умолчанию |
| <search> | Блок поиска/фильтрации - готовая landmark-роль search без ARIA-атрибутов |
| Произвольный физический адрес (не про автора) | Обычная разметка (p/ul), не address |
| Результаты поиска | Основной контент страницы, не внутри search |
| История search | В спецификации с 24 марта 2023, поддержка браузеров - с осени 2023 |
Коротко: отвечаем на вопросы
Можно ли использовать address для любого почтового адреса на странице?
Нет. address предназначен только для контактной информации автора текущей страницы или статьи - email, телефона, ссылки на профиль. Для произвольного физического адреса, не связанного с авторством (например, адреса магазина в каталоге), нужно использовать обычную разметку, а не address.
Можно ли вложить address внутрь другого address?
Нет, вложенность address в address не допускается. Также внутрь address нельзя класть заголовки или секционирующие теги вроде article, section, header и footer - только текст и ссылки, относящиеся к контактной информации.
Чем search лучше, чем div role="search"?
Тот же landmark для скринридера получается без единого ARIA-атрибута в коде - тег search сам по себе несёт нужную роль. Его специально ввели в спецификацию в 2023 году, чтобы закрыть последний из восьми стандартных ARIA-ландмарков, у которого раньше не было собственного HTML-тега.
Можно ли положить результаты поиска внутрь search?
Нет, по спецификации внутрь search кладут только форму поиска или элементы фильтрации - поля ввода, чекбоксы, кнопку отправки. Сами результаты поиска остаются частью основного контента страницы, а не блока search.
